Display summary upon adding new tokens to a 1/1 collection

components/collections/creation/BaseMinterDetails.tsx

@@ -22,6 +22,7 @@ export type BaseMinterAcquisitionMethod = 'existing' | 'new'
 export interface MinterInfo {
   name: string
   minter: string
+  contractAddress: string
 }
 
 interface BaseMinterDetailsProps {
@@ -32,6 +33,8 @@ interface BaseMinterDetailsProps {
 export interface BaseMinterDetailsDataProps {
   baseMinterAcquisitionMethod: BaseMinterAcquisitionMethod
   existingBaseMinter: string | undefined
+  selectedCollectionAddress: string | undefined
+  collectionTokenCount: number | undefined
 }
 
 export const BaseMinterDetails = ({ onChange, minterType }: BaseMinterDetailsProps) => {
@@ -39,6 +42,8 @@ export const BaseMinterDetails = ({ onChange, minterType }: BaseMinterDetailsPro
 
   const [myBaseMinterContracts, setMyBaseMinterContracts] = useState<MinterInfo[]>([])
   const [baseMinterAcquisitionMethod, setBaseMinterAcquisitionMethod] = useState<BaseMinterAcquisitionMethod>('new')
+  const [selectedCollectionAddress, setSelectedCollectionAddress] = useState<string | undefined>(undefined)
+  const [collectionTokenCount, setCollectionTokenCount] = useState<number | undefined>(undefined)
 
   const existingBaseMinterState = useInputState({
     id: 'existingMinter',
@@ -54,7 +59,7 @@ export const BaseMinterDetails = ({ onChange, minterType }: BaseMinterDetailsPro
       .then((response) => {
         const collectionData = response.data
         const minterContracts = collectionData.map((collection: any) => {
-          return { name: collection.name, minter: collection.minter }
+          return { name: collection.name, minter: collection.minter, contractAddress: collection.contractAddress }
         })
         return minterContracts
       })
@@ -111,6 +116,8 @@ export const BaseMinterDetails = ({ onChange, minterType }: BaseMinterDetailsPro
 
   const debouncedWalletAddress = useDebounce(wallet.address, 300)
 
+  const debouncedExistingBaseMinterContract = useDebounce(existingBaseMinterState.value, 300)
+
   const displayToast = async () => {
     await toast.promise(filterBaseMinterContracts(), {
       loading: 'Retrieving previous 1/1 collections...',
@@ -119,6 +126,38 @@ export const BaseMinterDetails = ({ onChange, minterType }: BaseMinterDetailsPro
     })
   }
 
+  const fetchSg721Address = async () => {
+    if (debouncedExistingBaseMinterContract.length === 0) return
+    await wallet.client
+      ?.queryContractSmart(debouncedExistingBaseMinterContract, {
+        config: {},
+      })
+      .then((response) => {
+        console.log(response.collection_address)
+        setSelectedCollectionAddress(response.collection_address)
+      })
+      .catch((err) => {
+        console.log(err)
+        console.log('Unable to retrieve collection address')
+      })
+  }
+
+  const fetchCollectionTokenCount = async () => {
+    if (selectedCollectionAddress === undefined) return
+    await wallet.client
+      ?.queryContractSmart(selectedCollectionAddress, {
+        num_tokens: {},
+      })
+      .then((response) => {
+        console.log(response)
+        setCollectionTokenCount(Number(response.count))
+      })
+      .catch((err) => {
+        console.log(err)
+        console.log('Unable to retrieve collection token count')
+      })
+  }
+
   useEffect(() => {
     if (debouncedWalletAddress && baseMinterAcquisitionMethod === 'existing') {
       setMyBaseMinterContracts([])
@@ -130,14 +169,34 @@ export const BaseMinterDetails = ({ onChange, minterType }: BaseMinterDetailsPro
     }
   }, [debouncedWalletAddress, baseMinterAcquisitionMethod])
 
+  useEffect(() => {
+    if (baseMinterAcquisitionMethod === 'existing') {
+      void fetchSg721Address()
+    }
+  }, [debouncedExistingBaseMinterContract])
+
+  useEffect(() => {
+    if (baseMinterAcquisitionMethod === 'existing') {
+      void fetchCollectionTokenCount()
+    }
+  }, [selectedCollectionAddress])
+
   useEffect(() => {
     const data: BaseMinterDetailsDataProps = {
       baseMinterAcquisitionMethod,
       existingBaseMinter: existingBaseMinterState.value,
+      selectedCollectionAddress,
+      collectionTokenCount,
     }
     onChange(data)
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [existingBaseMinterState.value, baseMinterAcquisitionMethod, wallet.initialized])
+  }, [
+    existingBaseMinterState.value,
+    baseMinterAcquisitionMethod,
+    wallet.initialized,
+    selectedCollectionAddress,
+    collectionTokenCount,
+  ])
 
   return (
     <div className="mx-10 mb-4 rounded border-2 border-white/20">

components/collections/creation/MintingDetails.tsx

@@ -105,7 +105,7 @@ export const MintingDetails = ({ onChange, numberOfTokens, uploadMethod }: Minti
           <InputDateTime minDate={new Date()} onChange={(date) => setTimestamp(date)} value={timestamp} />
         </FormControl>
       </FormGroup>
-      <TextInput className="p-4 mt-5" {...paymentAddressState} />
+      <TextInput className="p-4 mt-10" {...paymentAddressState} />
     </div>
   )
 }

pages/collections/create.tsx

@@ -9,6 +9,7 @@ import { coin } from '@cosmjs/proto-signing'
 import clsx from 'clsx'
 import { Alert } from 'components/Alert'
 import { Anchor } from 'components/Anchor'
+import { AnchorButton } from 'components/AnchorButton'
 import { Button } from 'components/Button'
 import {
   CollectionDetails,
@@ -297,12 +298,12 @@ const CollectionCreationPage: NextPage = () => {
       if (!wallet.initialized) throw new Error('Wallet not connected')
       if (!baseMinterContract) throw new Error('Contract not found')
       setCreatingCollection(true)
+      setIsMintingComplete(false)
       setBaseTokenUri(null)
       setCoverImageUrl(null)
       setVendingMinterContractAddress(null)
       setSg721ContractAddress(null)
       setTransactionHash(null)
-
       if (uploadDetails?.uploadMethod === 'new') {
         console.log(JSON.stringify(uploadDetails.baseMinterMetadataFile?.text()))
         setUploading(true)
@@ -330,7 +331,6 @@ const CollectionCreationPage: NextPage = () => {
               return result
             }
             setBaseTokenUri(baseUri)
-
             const result = await baseMinterContract
               .use(baseMinterDetails?.existingBaseMinter as string)
               ?.batchMint(wallet.address, `ipfs://${baseUri}`, uploadDetails.assetFiles.length)
@@ -343,6 +343,8 @@ const CollectionCreationPage: NextPage = () => {
               duration: 5000,
             })
             setIsMintingComplete(true)
+            setSg721ContractAddress(baseMinterDetails?.selectedCollectionAddress as string)
+            setTransactionHash(result as string)
           })
           .catch((error) => {
             toast.error(error.message, { style: { maxWidth: 'none' } })
@@ -361,6 +363,9 @@ const CollectionCreationPage: NextPage = () => {
               style: { maxWidth: 'none' },
               duration: 5000,
             })
+            setIsMintingComplete(true)
+            setSg721ContractAddress(baseMinterDetails?.selectedCollectionAddress as string)
+            setTransactionHash(result)
           })
           .catch((error) => {
             toast.error(error.message, { style: { maxWidth: 'none' } })
@@ -933,8 +938,9 @@ const CollectionCreationPage: NextPage = () => {
     }
   }
   useEffect(() => {
-    if (vendingMinterContractAddress !== null) scrollRef.current?.scrollIntoView({ behavior: 'smooth' })
-  }, [vendingMinterContractAddress])
+    if (vendingMinterContractAddress !== null || isMintingComplete)
+      scrollRef.current?.scrollIntoView({ behavior: 'smooth' })
+  }, [vendingMinterContractAddress, isMintingComplete])
 
   useEffect(() => {
     setBaseTokenUri(uploadDetails?.baseTokenURI as string)
@@ -981,7 +987,7 @@ const CollectionCreationPage: NextPage = () => {
         </p>
       </div>
       <div className="mx-10" ref={scrollRef}>
-        <Conditional test={vendingMinterContractAddress !== null}>
+        <Conditional test={vendingMinterContractAddress !== null || isMintingComplete}>
           <Alert className="mt-5" type="info">
             <div>
               <Conditional test={minterType === 'vending' || isMintingComplete}>
@@ -1007,80 +1013,145 @@ const CollectionCreationPage: NextPage = () => {
                   </Anchor>
                 )}
                 <br />
+                <Conditional test={vendingMinterContractAddress === null && isMintingComplete}>
+                  Transaction Hash: {'  '}
+                  <Conditional test={NETWORK === 'testnet'}>
+                    <Anchor
+                      className="text-stargaze hover:underline"
+                      external
+                      href={`${BLOCK_EXPLORER_URL}/tx/${transactionHash as string}`}
+                    >
+                      {transactionHash}
+                    </Anchor>
+                  </Conditional>
+                  <Conditional test={NETWORK === 'mainnet'}>
+                    <Anchor
+                      className="text-stargaze hover:underline"
+                      external
+                      href={`${BLOCK_EXPLORER_URL}/txs/${transactionHash as string}`}
+                    >
+                      {transactionHash}
+                    </Anchor>
+                  </Conditional>
+                  <br />
+                  Minter Contract Address:{'  '}
+                  <Anchor
+                    className="text-stargaze hover:underline"
+                    external
+                    href={`/contracts/baseMinter/query/?contractAddress=${
+                      baseMinterDetails?.existingBaseMinter as string
+                    }`}
+                  >
+                    {baseMinterDetails?.existingBaseMinter as string}
+                  </Anchor>
+                  <br />
+                  SG721 Contract Address:{'  '}
+                  <Anchor
+                    className="text-stargaze hover:underline"
+                    external
+                    href={`/contracts/sg721/query/?contractAddress=${sg721ContractAddress as string}`}
+                  >
+                    {sg721ContractAddress}
+                  </Anchor>
+                  <br />
+                  <div className="flex flex-row mt-2">
+                    <AnchorButton className="text-white" external href={`${STARGAZE_URL}/profile/${wallet.address}`}>
+                      Visit Your Profile
+                    </AnchorButton>
+                    <AnchorButton
+                      className="ml-2 text-white"
+                      external
+                      href={`${STARGAZE_URL}/marketplace/${sg721ContractAddress as string}/${
+                        baseMinterDetails?.collectionTokenCount
+                          ? (baseMinterDetails.collectionTokenCount + 1).toString()
+                          : '1'
+                      }`}
+                    >
+                      View the Token(s) on Marketplace
+                    </AnchorButton>
+                  </div>
+                </Conditional>
               </Conditional>
-              Minter Contract Address:{'  '}
-              <Anchor
-                className="text-stargaze hover:underline"
-                external
-                href={
-                  minterType === 'vending'
-                    ? `/contracts/vendingMinter/query/?contractAddress=${vendingMinterContractAddress as string}`
-                    : `/contracts/baseMinter/query/?contractAddress=${vendingMinterContractAddress as string}`
-                }
-              >
-                {vendingMinterContractAddress}
-              </Anchor>
-              <br />
-              SG721 Contract Address:{'  '}
-              <Anchor
-                className="text-stargaze hover:underline"
-                external
-                href={`/contracts/sg721/query/?contractAddress=${sg721ContractAddress as string}`}
-              >
-                {sg721ContractAddress}
-              </Anchor>
-              <br />
-              <Conditional test={whitelistContractAddress !== null && whitelistContractAddress !== undefined}>
-                Whitelist Contract Address:{'  '}
+              <Conditional test={vendingMinterContractAddress !== null}>
+                Minter Contract Address:{'  '}
                 <Anchor
                   className="text-stargaze hover:underline"
                   external
-                  href={`/contracts/whitelist/query/?contractAddress=${whitelistContractAddress as string}`}
+                  href={
+                    minterType === 'vending'
+                      ? `/contracts/vendingMinter/query/?contractAddress=${vendingMinterContractAddress as string}`
+                      : `/contracts/baseMinter/query/?contractAddress=${vendingMinterContractAddress as string}`
+                  }
                 >
-                  {whitelistContractAddress}
+                  {vendingMinterContractAddress}
                 </Anchor>
                 <br />
-              </Conditional>
-              Transaction Hash: {'  '}
-              <Conditional test={NETWORK === 'testnet'}>
+                SG721 Contract Address:{'  '}
                 <Anchor
                   className="text-stargaze hover:underline"
                   external
-                  href={`${BLOCK_EXPLORER_URL}/tx/${transactionHash as string}`}
+                  href={`/contracts/sg721/query/?contractAddress=${sg721ContractAddress as string}`}
                 >
-                  {transactionHash}
+                  {sg721ContractAddress}
                 </Anchor>
-              </Conditional>
-              <Conditional test={NETWORK === 'mainnet'}>
-                <Anchor
-                  className="text-stargaze hover:underline"
-                  external
-                  href={`${BLOCK_EXPLORER_URL}/txs/${transactionHash as string}`}
-                >
-                  {transactionHash}
-                </Anchor>
-              </Conditional>
-              <Conditional test={minterType === 'vending'}>
-                <Button className="mt-2">
+                <br />
+                <Conditional test={whitelistContractAddress !== null && whitelistContractAddress !== undefined}>
+                  Whitelist Contract Address:{'  '}
                   <Anchor
-                    className="text-white"
+                    className="text-stargaze hover:underline"
                     external
-                    href={`${STARGAZE_URL}/launchpad/${vendingMinterContractAddress as string}`}
+                    href={`/contracts/whitelist/query/?contractAddress=${whitelistContractAddress as string}`}
                   >
-                    View on Launchpad
+                    {whitelistContractAddress}
                   </Anchor>
-                </Button>
-              </Conditional>
-              <Conditional test={minterType === 'base'}>
-                <Button className="mt-2">
+                  <br />
+                </Conditional>
+                Transaction Hash: {'  '}
+                <Conditional test={NETWORK === 'testnet'}>
                   <Anchor
-                    className="text-white"
+                    className="text-stargaze hover:underline"
                     external
-                    href={`${STARGAZE_URL}/marketplace/${sg721ContractAddress as string}?sort=price_asc`}
+                    href={`${BLOCK_EXPLORER_URL}/tx/${transactionHash as string}`}
                   >
-                    View on Marketplace
+                    {transactionHash}
                   </Anchor>
-                </Button>
+                </Conditional>
+                <Conditional test={NETWORK === 'mainnet'}>
+                  <Anchor
+                    className="text-stargaze hover:underline"
+                    external
+                    href={`${BLOCK_EXPLORER_URL}/txs/${transactionHash as string}`}
+                  >
+                    {transactionHash}
+                  </Anchor>
+                </Conditional>
+                <Conditional test={minterType === 'vending'}>
+                  <Button className="mt-2">
+                    <Anchor
+                      className="text-white"
+                      external
+                      href={`${STARGAZE_URL}/launchpad/${vendingMinterContractAddress as string}`}
+                    >
+                      View on Launchpad
+                    </Anchor>
+                  </Button>
+                </Conditional>
+                <Conditional test={minterType === 'base'}>
+                  <div className="flex flex-row mt-2">
+                    <AnchorButton className="text-white" external href={`${STARGAZE_URL}/profile/${wallet.address}`}>
+                      Visit Your Profile
+                    </AnchorButton>
+                    <AnchorButton
+                      className="ml-2 text-white"
+                      external
+                      href={`${STARGAZE_URL}/marketplace/${sg721ContractAddress as string}${
+                        !isMintingComplete ? `?sort=price_asc` : `/1`
+                      }`}
+                    >
+                      View the Collection on Marketplace
+                    </AnchorButton>
+                  </div>
+                </Conditional>
               </Conditional>
             </div>
           </Alert>