Merge pull request #75 from public-awesome/ui-improvements

Base Minter related UI improvements

components/AssetsPreview.tsx

@@ -25,7 +25,11 @@ export const AssetsPreview = ({ assetFilesArray, updateMetadataFileIndex, minter
         tempArray.push(
           <video
             key={assetFile.name}
-            className="absolute px-1 my-1 max-h-24 thumbnail"
+            className={clsx(
+              'absolute px-1 my-1 thumbnail',
+              { 'max-h-24': minterType === 'vending' },
+              { 'max-h-72': minterType === 'base' },
+            )}
             id="video"
             muted
             onMouseEnter={(e) => {
@@ -54,7 +58,11 @@ export const AssetsPreview = ({ assetFilesArray, updateMetadataFileIndex, minter
     return assetFilesArray.slice((page - 1) * ITEM_NUMBER, page * ITEM_NUMBER).map((assetSource, index) => (
       <button
         key={assetSource.name}
-        className="relative p-0 w-[100px] h-[100px] bg-transparent hover:bg-transparent border-0 btn modal-button"
+        className={clsx(
+          'relative p-0 bg-transparent hover:bg-transparent border-0 btn modal-button',
+          { 'w-[100px] h-[100px]': minterType === 'vending' },
+          { 'mt-14 ml-20 w-[288px] h-[288px]': minterType === 'base' },
+        )}
         onClick={() => {
           updateMetadataFileIndex((page - 1) * ITEM_NUMBER + index)
         }}
@@ -64,18 +72,29 @@ export const AssetsPreview = ({ assetFilesArray, updateMetadataFileIndex, minter
           className="relative p-0 w-full h-full bg-transparent hover:bg-transparent border-0 btn modal-button"
           htmlFor="my-modal-4"
         >
-          <div
-            className={clsx(
-              'flex absolute right-20 bottom-20 justify-center items-center',
-              'text-sm  text-white bg-stargaze rounded-full',
-              getOverlaySize(),
-            )}
-          >
-            {(page - 1) * 12 + (index + 1)}
-          </div>
+          <Conditional test={minterType === 'vending'}>
+            <div
+              className={clsx(
+                'flex absolute right-20 bottom-20 justify-center items-center',
+                'text-sm  text-white bg-stargaze rounded-full',
+                getOverlaySize(),
+              )}
+            >
+              {(page - 1) * 12 + (index + 1)}
+            </div>
+          </Conditional>
           {getAssetType(assetSource.name) === 'audio' && (
             <div className="flex absolute flex-col items-center mt-4 ml-2">
-              <img key={`audio-${index}`} alt="audio_icon" className="mb-2 ml-1 w-6 h-6 thumbnail" src="/audio.png" />
+              <img
+                key={`audio-${index}`}
+                alt="audio_icon"
+                className={clsx(
+                  'mb-2 ml-1 thumbnail',
+                  { 'w-6 h-6': minterType === 'vending' },
+                  { 'w-24 h-24': minterType === 'base' },
+                )}
+                src="/audio.png"
+              />
               <span className="flex self-center ">{assetSource.name}</span>
             </div>
           )}
@@ -87,7 +106,11 @@ export const AssetsPreview = ({ assetFilesArray, updateMetadataFileIndex, minter
               <img
                 key={`image-${index}`}
                 alt="asset"
-                className="px-1 my-1 max-h-24 thumbnail"
+                className={clsx(
+                  'px-1 my-1 thumbnail',
+                  { 'max-h-24': minterType === 'vending' },
+                  { 'max-h-72': minterType === 'base' },
+                )}
                 src={URL.createObjectURL(assetSource)}
               />
             </div>

components/collections/creation/UploadDetails.tsx

@@ -92,16 +92,18 @@ export const UploadDetails = ({ onChange, minterType, minterAcquisitionMethod }:
     setAssetFilesArray([])
     setMetadataFilesArray([])
     if (event.target.files === null) return
-    //sort the files
-    const sortedFiles = Array.from(event.target.files).sort((a, b) => naturalCompare(a.name, b.name))
-    //check if the sorted file names are in numerical order
-    const sortedFileNames = sortedFiles.map((file) => file.name.split('.')[0])
-    for (let i = 0; i < sortedFileNames.length; i++) {
-      if (isNaN(Number(sortedFileNames[i])) || parseInt(sortedFileNames[i]) !== i + 1) {
-        toast.error('The file names should be in numerical order starting from 1.')
-        //clear the input
-        event.target.value = ''
-        return
+    if (minterType === 'vending') {
+      //sort the files
+      const sortedFiles = Array.from(event.target.files).sort((a, b) => naturalCompare(a.name, b.name))
+      //check if the sorted file names are in numerical order
+      const sortedFileNames = sortedFiles.map((file) => file.name.split('.')[0])
+      for (let i = 0; i < sortedFileNames.length; i++) {
+        if (isNaN(Number(sortedFileNames[i])) || parseInt(sortedFileNames[i]) !== i + 1) {
+          toast.error('The file names should be in numerical order starting from 1.')
+          //clear the input
+          event.target.value = ''
+          return
+        }
       }
     }
     let loadedFileCount = 0
@@ -133,16 +135,18 @@ export const UploadDetails = ({ onChange, minterType, minterAcquisitionMethod }:
       event.target.value = ''
       return toast.error('The number of metadata files should be equal to the number of asset files.')
     }
-    //sort the files
-    const sortedFiles = Array.from(event.target.files).sort((a, b) => naturalCompare(a.name, b.name))
-    //check if the sorted file names are in numerical order
-    const sortedFileNames = sortedFiles.map((file) => file.name.split('.')[0])
-    for (let i = 0; i < sortedFileNames.length; i++) {
-      if (isNaN(Number(sortedFileNames[i])) || parseInt(sortedFileNames[i]) !== i + 1) {
-        toast.error('The file names should be in numerical order starting from 1.')
-        //clear the input
-        event.target.value = ''
-        return
+    if (minterType === 'vending') {
+      //sort the files
+      const sortedFiles = Array.from(event.target.files).sort((a, b) => naturalCompare(a.name, b.name))
+      //check if the sorted file names are in numerical order
+      const sortedFileNames = sortedFiles.map((file) => file.name.split('.')[0])
+      for (let i = 0; i < sortedFileNames.length; i++) {
+        if (isNaN(Number(sortedFileNames[i])) || parseInt(sortedFileNames[i]) !== i + 1) {
+          toast.error('The file names should be in numerical order starting from 1.')
+          //clear the input
+          event.target.value = ''
+          return
+        }
       }
     }
     let loadedFileCount = 0

components/collections/queries/Queries.tsx

@@ -50,7 +50,7 @@ export const CollectionQueries = ({
   const address = addressState.value
 
   const showTokenIdField = type === 'token_info'
-  const showAddressField = type === 'tokens_minted_to_user'
+  const showAddressField = type === 'tokens_minted_to_user' || type === 'tokens'
 
   const { data: response } = useQuery(
     [sg721Messages, baseMinterMessages, vendingMinterMessages, type, tokenId, address] as const,

components/collections/queries/query.ts

@@ -9,6 +9,7 @@ export const QUERY_TYPES = [
   'mint_price',
   'num_tokens',
   'tokens_minted_to_user',
+  'tokens',
   // 'token_owners',
   'token_info',
   'config',
@@ -70,7 +71,7 @@ export const BASE_QUERY_LIST: QueryListItem[] = [
     description: `Get information about the collection.`,
   },
   {
-    id: 'tokens_minted_to_user',
+    id: 'tokens',
     name: 'Tokens Minted to User',
     description: `Get the number of tokens minted in the collection to a user.`,
   },
@@ -108,6 +109,7 @@ export type DispatchQueryArgs = {
   | { type: Select<'mint_price'> }
   | { type: Select<'num_tokens'> }
   | { type: Select<'tokens_minted_to_user'>; address: string }
+  | { type: Select<'tokens'>; address: string }
   // | { type: Select<'token_owners'> }
   | { type: Select<'token_info'>; tokenId: string }
   | { type: Select<'config'> }
@@ -132,6 +134,9 @@ export const dispatchQuery = async (args: DispatchQueryArgs) => {
     case 'tokens_minted_to_user': {
       return vendingMinterMessages.getMintCount(args.address)
     }
+    case 'tokens': {
+      return sg721Messages.tokens(args.address)
+    }
     // case 'token_owners': {
     //   return vendingMinterMessages.updateStartTime(txSigner, args.startTime)
     // }

package.json

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

pages/collections/create.tsx

@@ -241,7 +241,10 @@ const CollectionCreationPage: NextPage = () => {
         setBaseTokenUri(baseUri)
         setCoverImageUrl(coverImageUri)
 
-        await instantiateBaseMinter(baseUri, coverImageUri)
+        await instantiateBaseMinter(
+          `ipfs://${baseUri}/${uploadDetails.metadataFiles[0].name.split('.')[0]}`,
+          coverImageUri,
+        )
       } else {
         setBaseTokenUri(uploadDetails?.baseTokenURI as string)
         setCoverImageUrl(uploadDetails?.imageUrl as string)
@@ -276,7 +279,8 @@ const CollectionCreationPage: NextPage = () => {
             setBaseTokenUri(baseUri)
             const result = await baseMinterContract
               .use(minterDetails?.existingMinter as string)
-              ?.mint(wallet.address, `ipfs://${baseUri}`)
+              // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+              ?.mint(wallet.address, `ipfs://${baseUri}/${uploadDetails?.metadataFiles[0].name.split('.')[0]}`)
             console.log(result)
             return result
           })
@@ -397,6 +401,7 @@ const CollectionCreationPage: NextPage = () => {
   const instantiateBaseMinter = async (baseUri: string, coverImageUri: string) => {
     if (!wallet.initialized) throw new Error('Wallet not connected')
     if (!baseFactoryContract) throw new Error('Contract not found')
+    if (!baseMinterContract) throw new Error('Contract not found')
 
     let royaltyInfo = null
     if (royaltyDetails?.royaltyType === 'new') {
@@ -437,10 +442,37 @@ const CollectionCreationPage: NextPage = () => {
       msg,
       funds: [coin('1000000000', 'ustars')],
     }
-    const data = await baseFactoryDispatchExecute(payload)
-    setTransactionHash(data.transactionHash)
-    setVendingMinterContractAddress(data.baseMinterAddress)
-    setSg721ContractAddress(data.sg721Address)
+    await baseFactoryDispatchExecute(payload)
+      .then(async (data) => {
+        setTransactionHash(data.transactionHash)
+        setVendingMinterContractAddress(data.baseMinterAddress)
+        setSg721ContractAddress(data.sg721Address)
+        await toast
+          .promise(
+            baseMinterContract
+              .use(data.baseMinterAddress)
+
+              ?.mint(wallet.address, baseUri) as Promise<string>,
+            {
+              loading: 'Minting token...',
+              success: (result) => `Token minted successfully! Tx Hash: ${result}`,
+              error: (error) => `Failed to mint token: ${error.message}`,
+            },
+            { style: { maxWidth: 'none' } },
+          )
+          .catch((error) => {
+            toast.error(error.message, { style: { maxWidth: 'none' } })
+            setUploading(false)
+            setCreatingCollection(false)
+          })
+        setUploading(false)
+        setCreatingCollection(false)
+      })
+      .catch((error) => {
+        toast.error(error.message, { style: { maxWidth: 'none' } })
+        setUploading(false)
+        setCreatingCollection(false)
+      })
   }
 
   const uploadFiles = async (): Promise<string> => {
@@ -521,7 +553,8 @@ const CollectionCreationPage: NextPage = () => {
     if (uploadDetails.uploadMethod === 'new' && uploadDetails.metadataFiles.length === 0) {
       throw new Error('Please select the metadata files')
     }
-    if (uploadDetails.uploadMethod === 'new') compareFileArrays(uploadDetails.assetFiles, uploadDetails.metadataFiles)
+    if (uploadDetails.uploadMethod === 'new' && minterType === 'vending')
+      compareFileArrays(uploadDetails.assetFiles, uploadDetails.metadataFiles)
     if (uploadDetails.uploadMethod === 'new') {
       if (uploadDetails.uploadService === 'nft-storage') {
         if (uploadDetails.nftStorageApiKey === '') {
@@ -688,7 +721,11 @@ const CollectionCreationPage: NextPage = () => {
               <Anchor
                 className="text-stargaze hover:underline"
                 external
-                href={`/contracts/vendingMinter/query/?contractAddress=${vendingMinterContractAddress as string}`}
+                href={
+                  minterType === 'vending'
+                    ? `/contracts/vendingMinter/query/?contractAddress=${vendingMinterContractAddress as string}`
+                    : `/contracts/baseMinter/query/?contractAddress=${vendingMinterContractAddress as string}`
+                }
               >
                 {vendingMinterContractAddress}
               </Anchor>

pages/contracts/index.tsx

@@ -20,8 +20,19 @@ const HomePage: NextPage = () => {
       <br />
 
       <div className="grid gap-8 md:grid-cols-2">
-        <HomeCard className="p-4 -m-4 hover:bg-gray-500/10 rounded" link="/contracts/minter" title="Minter contract">
-          Execute messages and run queries on Stargaze&apos;s minter contract.
+        <HomeCard
+          className="p-4 -m-4 hover:bg-gray-500/10 rounded"
+          link="/contracts/baseMinter"
+          title="Base Minter contract"
+        >
+          Execute messages and run queries on Stargaze&apos;s Base Minter contract.
+        </HomeCard>
+        <HomeCard
+          className="p-4 -m-4 hover:bg-gray-500/10 rounded"
+          link="/contracts/vendingMinter"
+          title="Vending Minter contract"
+        >
+          Execute messages and run queries on Stargaze&apos;s Vending Minter contract.
         </HomeCard>
         <HomeCard className="p-4 -m-4 hover:bg-gray-500/10 rounded" link="/contracts/sg721" title="Sg721 Contract">
           Execute messages and run queries on Stargaze&apos;s sg721 contract.