Display collection creation results (#35)

* Display collection creation results

* Add links for collection creation details

* Update link appearance

pages/collections/create.tsx

@@ -3,6 +3,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 
 import { coin } from '@cosmjs/proto-signing'
+import { Alert } from 'components/Alert'
 import { Anchor } from 'components/Anchor'
 import Button from 'components/Button'
 import {
@@ -23,7 +24,7 @@ import { useContracts } from 'contexts/contracts'
 import { useWallet } from 'contexts/wallet'
 import type { NextPage } from 'next'
 import { NextSeo } from 'next-seo'
-import { useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import useCollapse from 'react-collapsed'
 import { toast } from 'react-hot-toast'
 import type { UploadServiceType } from 'services/upload'
@@ -42,6 +43,7 @@ const CollectionCreationPage: NextPage = () => {
   const { getCollapseProps, getToggleProps, isExpanded } = useCollapse()
   const toggleProps = getToggleProps()
   const collapseProps = getCollapseProps()
+  const scrollRef = useRef<HTMLDivElement>(null)
 
   const [uploadDetails, setUploadDetails] = useState<UploadDetailsDataProps | null>(null)
   const [collectionDetails, setCollectionDetails] = useState<CollectionDetailsDataProps | null>(null)
@@ -50,11 +52,17 @@ const CollectionCreationPage: NextPage = () => {
   const [royaltyDetails, setRoyaltyDetails] = useState<RoyaltyDetailsDataProps | null>(null)
 
   const [uploading, setUploading] = useState(false)
-  const [contractAddress, setContractAddress] = useState<string | null>(null)
+  const [minterContractAddress, setMinterContractAddress] = useState<string | null>(null)
+  const [sg721ContractAddress, setSg721ContractAddress] = useState<string | null>(null)
+  const [baseTokenUri, setBaseTokenUri] = useState<string | null>(null)
   const [transactionHash, setTransactionHash] = useState<string | null>(null)
 
   const createCollection = async () => {
     try {
+      setBaseTokenUri(null)
+      setMinterContractAddress(null)
+      setSg721ContractAddress(null)
+      setTransactionHash(null)
       checkUploadDetails()
       checkCollectionDetails()
       checkMintingDetails()
@@ -64,6 +72,7 @@ const CollectionCreationPage: NextPage = () => {
       setUploading(true)
 
       const baseUri = await uploadFiles()
+      setBaseTokenUri(baseUri)
       //upload coverImageUri and append the file name
       const coverImageUri = await upload(
         collectionDetails?.imageFile as File[],
@@ -148,7 +157,8 @@ const CollectionCreationPage: NextPage = () => {
 
     const data = await minterContract.instantiate(MINTER_CODE_ID, msg, 'Stargaze Minter Contract', wallet.address)
     setTransactionHash(data.transactionHash)
-    setContractAddress(data.contractAddress)
+    setMinterContractAddress(data.contractAddress)
+    setSg721ContractAddress(data.logs[0].events[3].attributes[2].value)
   }
 
   const uploadFiles = async (): Promise<string> => {
@@ -274,6 +284,9 @@ const CollectionCreationPage: NextPage = () => {
       if (royaltyDetails.paymentAddress === '') throw new Error('Royalty payment address is required')
     }
   }
+  useEffect(() => {
+    if (minterContractAddress !== null) scrollRef.current?.scrollIntoView({ behavior: 'smooth' })
+  }, [minterContractAddress])
 
   return (
     <div>
@@ -288,13 +301,55 @@ const CollectionCreationPage: NextPage = () => {
 
         <p>
           Make sure you check our{' '}
-          <Anchor className="font-bold text-plumbus hover:underline" href={links['Docs']}>
+          <Anchor className="font-bold text-plumbus hover:underline" external href={links['Docs']}>
             documentation
           </Anchor>{' '}
           on how to create your collection
         </p>
       </div>
-
+      <div className="mx-10" ref={scrollRef}>
+        <Conditional test={minterContractAddress !== null}>
+          <Alert className="mt-5" type="info">
+            <div>
+              Base Token URI:{' '}
+              <Anchor
+                className="text-stargaze hover:underline"
+                external
+                href={`https://ipfs.stargaze.zone/ipfs/${baseTokenUri as string}/`}
+              >
+                ipfs://{baseTokenUri as string}/
+              </Anchor>
+              <br />
+              Minter Contract Address:{'  '}
+              <Anchor
+                className="text-stargaze hover:underline"
+                external
+                href={`/contracts/minter/query/?contractAddress=${minterContractAddress as string}`}
+              >
+                {minterContractAddress}
+              </Anchor>
+              <br />
+              SG721 Contract Address:{'  '}
+              <Anchor
+                className="text-stargaze hover:underline"
+                external
+                href={`/contracts/sg721/query/?contractAddress=${sg721ContractAddress as string}`}
+              >
+                {sg721ContractAddress}
+              </Anchor>
+              <br />
+              Transaction Hash: {'  '}
+              <Anchor
+                className="text-stargaze hover:underline"
+                external
+                href={`https://testnet-explorer.publicawesome.dev/stargaze/tx/${transactionHash as string}`}
+              >
+                {transactionHash}
+              </Anchor>
+            </div>
+          </Alert>
+        </Conditional>
+      </div>
       <div className="mx-10">
         <UploadDetails onChange={setUploadDetails} />