diff --git a/pages/collections/create.tsx b/pages/collections/create.tsx index 743a4e6..e5f9045 100644 --- a/pages/collections/create.tsx +++ b/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(null) const [uploadDetails, setUploadDetails] = useState(null) const [collectionDetails, setCollectionDetails] = useState(null) @@ -50,11 +52,17 @@ const CollectionCreationPage: NextPage = () => { const [royaltyDetails, setRoyaltyDetails] = useState(null) const [uploading, setUploading] = useState(false) - const [contractAddress, setContractAddress] = useState(null) + const [minterContractAddress, setMinterContractAddress] = useState(null) + const [sg721ContractAddress, setSg721ContractAddress] = useState(null) + const [baseTokenUri, setBaseTokenUri] = useState(null) const [transactionHash, setTransactionHash] = useState(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 => { @@ -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 (
@@ -288,13 +301,55 @@ const CollectionCreationPage: NextPage = () => {

Make sure you check our{' '} - + documentation {' '} on how to create your collection

- +
+ + +
+ Base Token URI:{' '} + + ipfs://{baseTokenUri as string}/ + +
+ Minter Contract Address:{' '} + + {minterContractAddress} + +
+ SG721 Contract Address:{' '} + + {sg721ContractAddress} + +
+ Transaction Hash: {' '} + + {transactionHash} + +
+
+
+