Merge pull request #77 from public-awesome/develop

Sync development > mainnet
This commit is contained in:
Serkan Reis 2022-12-19 17:59:39 +03:00 committed by GitHub
commit 27500f8474
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
60 changed files with 2810 additions and 361 deletions

View File

@ -1,19 +1,17 @@
APP_VERSION=0.1.0
APP_VERSION=0.3.1
NEXT_PUBLIC_PINATA_ENDPOINT_URL=https://api.pinata.cloud/pinning/pinFileToIPFS
NEXT_PUBLIC_SG721_CODE_ID=274
NEXT_PUBLIC_VENDING_MINTER_CODE_ID=275
NEXT_PUBLIC_VENDING_FACTORY_ADDRESS="stars1j4qn9krchp5xs8nued4j4vcr4j654wxkhf7acy76734xe5fsz08sku28s2"
NEXT_PUBLIC_BASE_FACTORY_ADDRESS="stars1c6juqgd7cm80afpmuszun66rl9zdc4kgfht8fk34tfq3zk87l78sdxngzv"
NEXT_PUBLIC_SG721_NAME_ADDRESS="stars1fx74nkqkw2748av8j7ew7r3xt9cgjqduwn8m0ur5lhe49uhlsasszc5fhr"
NEXT_PUBLIC_BASE_MINTER_CODE_ID=613
NEXT_PUBLIC_WHITELIST_CODE_ID=277
NEXT_PUBLIC_API_URL=https://
NEXT_PUBLIC_API_URL=https://nft-api.elgafar-1.stargaze-apis.com
NEXT_PUBLIC_BLOCK_EXPLORER_URL=https://testnet-explorer.publicawesome.dev/stargaze
NEXT_PUBLIC_NETWORK=testnet
NEXT_PUBLIC_STARGAZE_WEBSITE_URL=https://testnet.publicawesome.dev
NEXT_PUBLIC_WEBSITE_URL=https://
NEXT_PUBLIC_S3_BUCKET= # TODO
NEXT_PUBLIC_S3_ENDPOINT= # TODO
NEXT_PUBLIC_S3_KEY= # TODO
NEXT_PUBLIC_S3_REGION= # TODO
NEXT_PUBLIC_S3_SECRET= # TODO
NEXT_PUBLIC_WEBSITE_URL=https://

View File

@ -2,14 +2,18 @@ import clsx from 'clsx'
import { useCallback, useMemo, useState } from 'react'
import { getAssetType } from 'utils/getAssetType'
import type { MinterType } from './collections/actions/Combobox'
import { Conditional } from './Conditional'
interface AssetsPreviewProps {
assetFilesArray: File[]
updateMetadataFileIndex: (index: number) => void
minterType: MinterType
}
const ITEM_NUMBER = 12
export const AssetsPreview = ({ assetFilesArray, updateMetadataFileIndex }: AssetsPreviewProps) => {
export const AssetsPreview = ({ assetFilesArray, updateMetadataFileIndex, minterType }: AssetsPreviewProps) => {
const [page, setPage] = useState(1)
const totalPages = useMemo(() => Math.ceil(assetFilesArray.length / ITEM_NUMBER), [assetFilesArray])
@ -21,7 +25,11 @@ export const AssetsPreview = ({ assetFilesArray, updateMetadataFileIndex }: Asse
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) => {
@ -50,7 +58,11 @@ export const AssetsPreview = ({ assetFilesArray, updateMetadataFileIndex }: Asse
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)
}}
@ -60,18 +72,29 @@ export const AssetsPreview = ({ assetFilesArray, updateMetadataFileIndex }: Asse
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>
)}
@ -83,7 +106,11 @@ export const AssetsPreview = ({ assetFilesArray, updateMetadataFileIndex }: Asse
<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>
@ -116,23 +143,25 @@ export const AssetsPreview = ({ assetFilesArray, updateMetadataFileIndex }: Asse
return (
<div className="flex flex-col items-center">
<div className="mt-2 w-[400px] h-[300px]">{renderImages()}</div>
<div className="mt-5 btn-group">
<button className="text-white bg-plumbus-light btn" onClick={multiplePrevPage} type="button">
««
</button>
<button className="text-white bg-plumbus-light btn" onClick={prevPage} type="button">
«
</button>
<button className="text-white btn" type="button">
Page {page}/{totalPages}
</button>
<button className="text-white bg-plumbus-light btn" onClick={nextPage} type="button">
»
</button>
<button className="text-white bg-plumbus-light btn" onClick={multipleNextPage} type="button">
»»
</button>
</div>
<Conditional test={minterType === 'vending'}>
<div className="mt-5 btn-group">
<button className="text-white bg-plumbus-light btn" onClick={multiplePrevPage} type="button">
««
</button>
<button className="text-white bg-plumbus-light btn" onClick={prevPage} type="button">
«
</button>
<button className="text-white btn" type="button">
Page {page}/{totalPages}
</button>
<button className="text-white bg-plumbus-light btn" onClick={nextPage} type="button">
»
</button>
<button className="text-white bg-plumbus-light btn" onClick={multipleNextPage} type="button">
»»
</button>
</div>
</Conditional>
</div>
)
}

View File

@ -40,7 +40,7 @@ export const ConfirmationModal = (props: ConfirmationModalProps) => {
/>
</div>
<br />
Are you sure to create a collection with the specified assets, metadata and parameters?
Are you sure to proceed with the specified assets, metadata and parameters?
</div>
<div className="flex justify-end w-full">
<Button className="px-0 mt-4 mr-5 mb-4 max-h-12 bg-gray-600 hover:bg-gray-600">

View File

@ -18,26 +18,49 @@ export const sg721LinkTabs: LinkTabProps[] = [
},
]
export const minterLinkTabs: LinkTabProps[] = [
export const vendingMinterLinkTabs: LinkTabProps[] = [
{
title: 'Instantiate',
description: `Initialize a new Minter contract`,
href: '/contracts/minter/instantiate',
description: `Initialize a new Vending Minter contract`,
href: '/contracts/vendingMinter/instantiate',
},
{
title: 'Query',
description: `Dispatch queries with your Minter contract`,
href: '/contracts/minter/query',
description: `Dispatch queries with your Vending Minter contract`,
href: '/contracts/vendingMinter/query',
},
{
title: 'Execute',
description: `Execute Minter contract actions`,
href: '/contracts/minter/execute',
description: `Execute Vending Minter contract actions`,
href: '/contracts/vendingMinter/execute',
},
{
title: 'Migrate',
description: `Migrate Minter contract`,
href: '/contracts/minter/migrate',
description: `Migrate Vending Minter contract`,
href: '/contracts/vendingMinter/migrate',
},
]
export const baseMinterLinkTabs: LinkTabProps[] = [
{
title: 'Instantiate',
description: `Initialize a new Base Minter contract`,
href: '/contracts/baseMinter/instantiate',
},
{
title: 'Query',
description: `Dispatch queries with your Base Minter contract`,
href: '/contracts/baseMinter/query',
},
{
title: 'Execute',
description: `Execute Base Minter contract actions`,
href: '/contracts/baseMinter/execute',
},
{
title: 'Migrate',
description: `Migrate Base Minter contract`,
href: '/contracts/baseMinter/migrate',
},
]

View File

@ -5,6 +5,7 @@ import { useRouter } from 'next/router'
// import BrandText from 'public/brand/brand-text.svg'
import { footerLinks, socialsLinks } from 'utils/links'
import { BASE_FACTORY_ADDRESS } from '../utils/constants'
import { SidebarLayout } from './SidebarLayout'
import { WalletLoader } from './WalletLoader'
@ -14,7 +15,8 @@ const routes = [
{ text: 'My Collections', href: `/collections/myCollections/`, isChild: true },
{ text: 'Collection Actions', href: `/collections/actions/`, isChild: true },
{ text: 'Contract Dashboards', href: `/contracts/`, isChild: false },
{ text: 'Minter Contract', href: `/contracts/minter/`, isChild: true },
{ text: 'Base Minter Contract', href: `/contracts/baseMinter/`, isChild: true },
{ text: 'Vending Minter Contract', href: `/contracts/vendingMinter/`, isChild: true },
{ text: 'SG721 Contract', href: `/contracts/sg721/`, isChild: true },
{ text: 'Whitelist Contract', href: `/contracts/whitelist/`, isChild: true },
]
@ -23,6 +25,11 @@ export const Sidebar = () => {
const router = useRouter()
const wallet = useWallet()
let tempRoutes = routes
if (BASE_FACTORY_ADDRESS === undefined) {
tempRoutes = routes.filter((route) => route.href !== '/contracts/baseMinter/')
}
return (
<SidebarLayout>
{/* Stargaze brand as home button */}
@ -33,19 +40,19 @@ export const Sidebar = () => {
{/* wallet button */}
<WalletLoader />
{/* main navigation routes */}
{routes.map(({ text, href, isChild }) => (
{tempRoutes.map(({ text, href, isChild }) => (
<Anchor
key={href}
className={clsx(
'px-4 -mx-5 font-extrabold uppercase rounded-lg', // styling
'px-2 -mx-5 font-extrabold uppercase rounded-lg', // styling
'hover:bg-white/5 transition-colors', // hover styling
{ 'py-0 ml-2 text-sm font-bold': isChild },
{ 'py-0 -ml-2 text-sm font-bold': isChild },
{
'text-gray hover:text-white':
!router.asPath.substring(0, router.asPath.lastIndexOf('/') + 1).includes(href) && isChild,
},
{
'text-plumbus': router.asPath.substring(0, router.asPath.lastIndexOf('/') + 1).includes(href) && isChild,
'text-stargaze': router.asPath.substring(0, router.asPath.lastIndexOf('/') + 1).includes(href) && isChild,
}, // active route styling
// { 'text-gray-500 pointer-events-none': disabled }, // disabled route styling
)}

View File

@ -1,10 +1,13 @@
/* eslint-disable eslint-comments/disable-enable-pair */
/* eslint-disable no-misleading-character-class */
/* eslint-disable no-control-regex */
import { toUtf8 } from '@cosmjs/encoding'
import clsx from 'clsx'
import React from 'react'
import React, { useState } from 'react'
import { toast } from 'react-hot-toast'
import { useWallet } from '../contexts/wallet'
import { SG721_NAME_ADDRESS } from '../utils/constants'
import { isValidAddress } from '../utils/isValidAddress'
interface WhitelistUploadProps {
@ -12,7 +15,43 @@ interface WhitelistUploadProps {
}
export const WhitelistUpload = ({ onChange }: WhitelistUploadProps) => {
const wallet = useWallet()
const [resolvedAddresses, setResolvedAddresses] = useState<string[]>([])
const resolveAddresses = async (names: string[]) => {
await new Promise((resolve) => {
let i = 0
names.map(async (name) => {
if (!wallet.client) throw new Error('Wallet not connected')
await wallet.client
.queryContractRaw(
SG721_NAME_ADDRESS,
toUtf8(
Buffer.from(
`0006${Buffer.from('tokens').toString('hex')}${Buffer.from(name).toString('hex')}`,
'hex',
).toString(),
),
)
.then((res) => {
const tokenUri = JSON.parse(new TextDecoder().decode(res as Uint8Array)).token_uri
if (tokenUri && isValidAddress(tokenUri)) resolvedAddresses.push(tokenUri)
else toast.error(`Resolved address is empty or invalid for the name: ${name}.stars`)
})
.catch((e) => {
console.log(e)
toast.error(`Error resolving address for the name: ${name}.stars`)
})
i++
if (i === names.length) resolve(resolvedAddresses)
})
})
return resolvedAddresses
}
const onFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setResolvedAddresses([])
if (!event.target.files) return toast.error('Error opening file')
if (event.target.files.length !== 1) {
toast.error('No file selected')
@ -24,7 +63,7 @@ export const WhitelistUpload = ({ onChange }: WhitelistUploadProps) => {
return onChange([])
}
const reader = new FileReader()
reader.onload = (e: ProgressEvent<FileReader>) => {
reader.onload = async (e: ProgressEvent<FileReader>) => {
const text = e.target?.result?.toString()
let newline = '\n'
if (text?.includes('\r')) newline = '\r'
@ -35,12 +74,29 @@ export const WhitelistUpload = ({ onChange }: WhitelistUploadProps) => {
const regex =
/[\0-\x1F\x7F-\x9F\xAD\u0378\u0379\u037F-\u0383\u038B\u038D\u03A2\u0528-\u0530\u0557\u0558\u0560\u0588\u058B-\u058E\u0590\u05C8-\u05CF\u05EB-\u05EF\u05F5-\u0605\u061C\u061D\u06DD\u070E\u070F\u074B\u074C\u07B2-\u07BF\u07FB-\u07FF\u082E\u082F\u083F\u085C\u085D\u085F-\u089F\u08A1\u08AD-\u08E3\u08FF\u0978\u0980\u0984\u098D\u098E\u0991\u0992\u09A9\u09B1\u09B3-\u09B5\u09BA\u09BB\u09C5\u09C6\u09C9\u09CA\u09CF-\u09D6\u09D8-\u09DB\u09DE\u09E4\u09E5\u09FC-\u0A00\u0A04\u0A0B-\u0A0E\u0A11\u0A12\u0A29\u0A31\u0A34\u0A37\u0A3A\u0A3B\u0A3D\u0A43-\u0A46\u0A49\u0A4A\u0A4E-\u0A50\u0A52-\u0A58\u0A5D\u0A5F-\u0A65\u0A76-\u0A80\u0A84\u0A8E\u0A92\u0AA9\u0AB1\u0AB4\u0ABA\u0ABB\u0AC6\u0ACA\u0ACE\u0ACF\u0AD1-\u0ADF\u0AE4\u0AE5\u0AF2-\u0B00\u0B04\u0B0D\u0B0E\u0B11\u0B12\u0B29\u0B31\u0B34\u0B3A\u0B3B\u0B45\u0B46\u0B49\u0B4A\u0B4E-\u0B55\u0B58-\u0B5B\u0B5E\u0B64\u0B65\u0B78-\u0B81\u0B84\u0B8B-\u0B8D\u0B91\u0B96-\u0B98\u0B9B\u0B9D\u0BA0-\u0BA2\u0BA5-\u0BA7\u0BAB-\u0BAD\u0BBA-\u0BBD\u0BC3-\u0BC5\u0BC9\u0BCE\u0BCF\u0BD1-\u0BD6\u0BD8-\u0BE5\u0BFB-\u0C00\u0C04\u0C0D\u0C11\u0C29\u0C34\u0C3A-\u0C3C\u0C45\u0C49\u0C4E-\u0C54\u0C57\u0C5A-\u0C5F\u0C64\u0C65\u0C70-\u0C77\u0C80\u0C81\u0C84\u0C8D\u0C91\u0CA9\u0CB4\u0CBA\u0CBB\u0CC5\u0CC9\u0CCE-\u0CD4\u0CD7-\u0CDD\u0CDF\u0CE4\u0CE5\u0CF0\u0CF3-\u0D01\u0D04\u0D0D\u0D11\u0D3B\u0D3C\u0D45\u0D49\u0D4F-\u0D56\u0D58-\u0D5F\u0D64\u0D65\u0D76-\u0D78\u0D80\u0D81\u0D84\u0D97-\u0D99\u0DB2\u0DBC\u0DBE\u0DBF\u0DC7-\u0DC9\u0DCB-\u0DCE\u0DD5\u0DD7\u0DE0-\u0DF1\u0DF5-\u0E00\u0E3B-\u0E3E\u0E5C-\u0E80\u0E83\u0E85\u0E86\u0E89\u0E8B\u0E8C\u0E8E-\u0E93\u0E98\u0EA0\u0EA4\u0EA6\u0EA8\u0EA9\u0EAC\u0EBA\u0EBE\u0EBF\u0EC5\u0EC7\u0ECE\u0ECF\u0EDA\u0EDB\u0EE0-\u0EFF\u0F48\u0F6D-\u0F70\u0F98\u0FBD\u0FCD\u0FDB-\u0FFF\u10C6\u10C8-\u10CC\u10CE\u10CF\u1249\u124E\u124F\u1257\u1259\u125E\u125F\u1289\u128E\u128F\u12B1\u12B6\u12B7\u12BF\u12C1\u12C6\u12C7\u12D7\u1311\u1316\u1317\u135B\u135C\u137D-\u137F\u139A-\u139F\u13F5-\u13FF\u169D-\u169F\u16F1-\u16FF\u170D\u1715-\u171F\u1737-\u173F\u1754-\u175F\u176D\u1771\u1774-\u177F\u17DE\u17DF\u17EA-\u17EF\u17FA-\u17FF\u180F\u181A-\u181F\u1878-\u187F\u18AB-\u18AF\u18F6-\u18FF\u191D-\u191F\u192C-\u192F\u193C-\u193F\u1941-\u1943\u196E\u196F\u1975-\u197F\u19AC-\u19AF\u19CA-\u19CF\u19DB-\u19DD\u1A1C\u1A1D\u1A5F\u1A7D\u1A7E\u1A8A-\u1A8F\u1A9A-\u1A9F\u1AAE-\u1AFF\u1B4C-\u1B4F\u1B7D-\u1B7F\u1BF4-\u1BFB\u1C38-\u1C3A\u1C4A-\u1C4C\u1C80-\u1CBF\u1CC8-\u1CCF\u1CF7-\u1CFF\u1DE7-\u1DFB\u1F16\u1F17\u1F1E\u1F1F\u1F46\u1F47\u1F4E\u1F4F\u1F58\u1F5A\u1F5C\u1F5E\u1F7E\u1F7F\u1FB5\u1FC5\u1FD4\u1FD5\u1FDC\u1FF0\u1FF1\u1FF5\u1FFF\u200B-\u200F\u2020-\u202E\u2060-\u206F\u2072\u2073\u208F\u209D-\u209F\u20BB-\u20CF\u20F1-\u20FF\u218A-\u218F\u23F4-\u23FF\u2427-\u243F\u244B-\u245F\u2700\u2B4D-\u2B4F\u2B5A-\u2BFF\u2C2F\u2C5F\u2CF4-\u2CF8\u2D26\u2D28-\u2D2C\u2D2E\u2D2F\u2D68-\u2D6E\u2D71-\u2D7E\u2D97-\u2D9F\u2DA7\u2DAF\u2DB7\u2DBF\u2DC7\u2DCF\u2DD7\u2DDF\u2E3C-\u2E7F\u2E9A\u2EF4-\u2EFF\u2FD6-\u2FEF\u2FFC-\u2FFF\u3040\u3097\u3098\u3100-\u3104\u312E-\u3130\u318F\u31BB-\u31BF\u31E4-\u31EF\u321F\u32FF\u4DB6-\u4DBF\u9FCD-\u9FFF\uA48D-\uA48F\uA4C7-\uA4CF\uA62C-\uA63F\uA698-\uA69E\uA6F8-\uA6FF\uA78F\uA794-\uA79F\uA7AB-\uA7F7\uA82C-\uA82F\uA83A-\uA83F\uA878-\uA87F\uA8C5-\uA8CD\uA8DA-\uA8DF\uA8FC-\uA8FF\uA954-\uA95E\uA97D-\uA97F\uA9CE\uA9DA-\uA9DD\uA9E0-\uA9FF\uAA37-\uAA3F\uAA4E\uAA4F\uAA5A\uAA5B\uAA7C-\uAA7F\uAAC3-\uAADA\uAAF7-\uAB00\uAB07\uAB08\uAB0F\uAB10\uAB17-\uAB1F\uAB27\uAB2F-\uABBF\uABEE\uABEF\uABFA-\uABFF\uD7A4-\uD7AF\uD7C7-\uD7CA\uD7FC-\uF8FF\uFA6E\uFA6F\uFADA-\uFAFF\uFB07-\uFB12\uFB18-\uFB1C\uFB37\uFB3D\uFB3F\uFB42\uFB45\uFBC2-\uFBD2\uFD40-\uFD4F\uFD90\uFD91\uFDC8-\uFDEF\uFDFE\uFDFF\uFE1A-\uFE1F\uFE27-\uFE2F\uFE53\uFE67\uFE6C-\uFE6F\uFE75\uFEFD-\uFF00\uFFBF-\uFFC1\uFFC8\uFFC9\uFFD0\uFFD1\uFFD8\uFFD9\uFFDD-\uFFDF\uFFE7\uFFEF-\uFFFB\uFFFE\uFFFF]/g
const printableData = data?.map((item) => item.replace(regex, ''))
const names = printableData?.filter((address) => address !== '' && address.endsWith('.stars'))
const strippedNames = names?.map((name) => name.split('.')[0])
console.log(names)
if (strippedNames?.length) {
await toast
.promise(resolveAddresses(strippedNames), {
loading: 'Resolving addresses...',
success: 'Address resolution successful!',
error: 'Address resolution failed!',
})
.then((addresses) => {
console.log(addresses)
})
.catch((error) => {
console.log(error)
})
}
return onChange([
...new Set(
printableData?.filter(
(address) => address !== '' && isValidAddress(address) && address.startsWith('stars'),
) || [],
printableData
?.filter((address) => address !== '' && isValidAddress(address) && address.startsWith('stars'))
.concat(resolvedAddresses) || [],
),
])
}

View File

@ -13,8 +13,9 @@ import { InputDateTime } from 'components/InputDateTime'
import { JsonPreview } from 'components/JsonPreview'
import { TransactionHash } from 'components/TransactionHash'
import { useWallet } from 'contexts/wallet'
import type { MinterInstance } from 'contracts/minter'
import type { BaseMinterInstance } from 'contracts/baseMinter'
import type { SG721Instance } from 'contracts/sg721'
import type { VendingMinterInstance } from 'contracts/vendingMinter'
import type { FormEvent } from 'react'
import { useEffect, useState } from 'react'
import { toast } from 'react-hot-toast'
@ -24,12 +25,15 @@ import type { AirdropAllocation } from 'utils/isValidAccountsFile'
import type { CollectionInfo } from '../../../contracts/sg721/contract'
import { TextInput } from '../../forms/FormInput'
import type { MinterType } from './Combobox'
interface CollectionActionsProps {
minterContractAddress: string
sg721ContractAddress: string
sg721Messages: SG721Instance | undefined
minterMessages: MinterInstance | undefined
vendingMinterMessages: VendingMinterInstance | undefined
baseMinterMessages: BaseMinterInstance | undefined
minterType: MinterType
}
type ExplicitContentType = true | false | undefined
@ -38,7 +42,9 @@ export const CollectionActions = ({
sg721ContractAddress,
sg721Messages,
minterContractAddress,
minterMessages,
vendingMinterMessages,
baseMinterMessages,
minterType,
}: CollectionActionsProps) => {
const wallet = useWallet()
const [lastTx, setLastTx] = useState('')
@ -88,6 +94,14 @@ export const CollectionActions = ({
subtitle: 'Address of the recipient',
})
const tokenURIState = useInputState({
id: 'token-uri',
name: 'tokenURI',
title: 'Token URI',
subtitle: 'URI for the token to be minted',
placeholder: 'ipfs://',
})
const whitelistState = useInputState({
id: 'whitelist-address',
name: 'whitelistAddress',
@ -138,6 +152,7 @@ export const CollectionActions = ({
placeholder: '8%',
})
const showTokenUriField = type === 'mint_token_uri'
const showWhitelistField = type === 'set_whitelist'
const showDateField = isEitherType(type, ['update_start_time', 'update_start_trading_time'])
const showLimitField = type === 'update_per_address_limit'
@ -168,8 +183,10 @@ export const CollectionActions = ({
sg721Contract: sg721ContractAddress,
tokenId: tokenIdState.value,
tokenIds: tokenIdListState.value,
tokenUri: tokenURIState.value,
batchNumber: batchNumberState.value,
minterMessages,
vendingMinterMessages,
baseMinterMessages,
sg721Messages,
recipient: recipientState.value,
recipients: airdropArray,
@ -261,15 +278,16 @@ export const CollectionActions = ({
<form>
<div className="grid grid-cols-2 mt-4">
<div className="mr-2">
<ActionsCombobox {...actionComboboxState} />
<ActionsCombobox minterType={minterType} {...actionComboboxState} />
{showRecipientField && <AddressInput {...recipientState} />}
{showTokenUriField && <TextInput className="mt-2" {...tokenURIState} />}
{showWhitelistField && <AddressInput {...whitelistState} />}
{showLimitField && <NumberInput {...limitState} />}
{showTokenIdField && <NumberInput {...tokenIdState} />}
{showTokenIdListField && <TextInput className="mt-2" {...tokenIdListState} />}
{showNumberOfTokensField && <NumberInput {...batchNumberState} />}
{showPriceField && <NumberInput {...priceState} />}
{showDescriptionField && <TextInput className="mb-2" {...descriptionState} />}
{showDescriptionField && <TextInput className="my-2" {...descriptionState} />}
{showImageField && <TextInput className="mb-2" {...imageState} />}
{showExternalLinkField && <TextInput className="mb-2" {...externalLinkState} />}
{showRoyaltyRelatedFields && (
@ -334,7 +352,7 @@ export const CollectionActions = ({
</FormGroup>
)}
<Conditional test={showDateField}>
<FormControl htmlId="start-date" subtitle="Start time for the minting" title="Start Time">
<FormControl className="mt-2" htmlId="start-date" title="Start Time">
<InputDateTime minDate={new Date()} onChange={(date) => setTimestamp(date)} value={timestamp} />
</FormControl>
</Conditional>

View File

@ -2,19 +2,31 @@ import { Combobox, Transition } from '@headlessui/react'
import clsx from 'clsx'
import { FormControl } from 'components/FormControl'
import { matchSorter } from 'match-sorter'
import { Fragment, useState } from 'react'
import { Fragment, useEffect, useState } from 'react'
import { FaChevronDown, FaInfoCircle } from 'react-icons/fa'
import type { ActionListItem } from './actions'
import { ACTION_LIST } from './actions'
import { BASE_ACTION_LIST, VENDING_ACTION_LIST } from './actions'
export type MinterType = 'base' | 'vending'
export interface ActionsComboboxProps {
value: ActionListItem | null
onChange: (item: ActionListItem) => void
minterType?: MinterType
}
export const ActionsCombobox = ({ value, onChange }: ActionsComboboxProps) => {
export const ActionsCombobox = ({ value, onChange, minterType }: ActionsComboboxProps) => {
const [search, setSearch] = useState('')
const [ACTION_LIST, SET_ACTION_LIST] = useState<ActionListItem[]>(VENDING_ACTION_LIST)
useEffect(() => {
if (minterType === 'base') {
SET_ACTION_LIST(BASE_ACTION_LIST)
} else {
SET_ACTION_LIST(VENDING_ACTION_LIST)
}
}, [minterType])
const filtered =
search === '' ? ACTION_LIST : matchSorter(ACTION_LIST, search, { keys: ['id', 'name', 'description'] })
@ -68,7 +80,7 @@ export const ActionsCombobox = ({ value, onChange }: ActionsComboboxProps) => {
<Combobox.Option
key={entry.id}
className={({ active }) =>
clsx('flex relative flex-col py-2 px-4 space-y-1 cursor-pointer', { 'bg-plumbus-70': active })
clsx('flex relative flex-col py-2 px-4 space-y-1 cursor-pointer', { 'bg-stargaze-80': active })
}
value={entry}
>

View File

@ -1,12 +1,16 @@
import type { MinterInstance } from 'contracts/minter'
import { useMinterContract } from 'contracts/minter'
import { useBaseMinterContract } from 'contracts/baseMinter'
import type { CollectionInfo, SG721Instance } from 'contracts/sg721'
import { useSG721Contract } from 'contracts/sg721'
import type { VendingMinterInstance } from 'contracts/vendingMinter'
import { useVendingMinterContract } from 'contracts/vendingMinter'
import type { BaseMinterInstance } from '../../../contracts/baseMinter/contract'
export type ActionType = typeof ACTION_TYPES[number]
export const ACTION_TYPES = [
'mint',
'mint_token_uri',
'purge',
'update_mint_price',
'mint_to',
@ -35,7 +39,55 @@ export interface ActionListItem {
description?: string
}
export const ACTION_LIST: ActionListItem[] = [
export const BASE_ACTION_LIST: ActionListItem[] = [
{
id: 'mint_token_uri',
name: 'Mint Token URI',
description: `Mint a token with the given token URI`,
},
{
id: 'update_start_trading_time',
name: 'Update Trading Start Time',
description: `Update start time for trading`,
},
{
id: 'update_collection_info',
name: 'Update Collection Info',
description: `Update Collection Info`,
},
{
id: 'freeze_collection_info',
name: 'Freeze Collection Info',
description: `Freeze collection info to prevent further updates`,
},
{
id: 'withdraw',
name: 'Withdraw Tokens',
description: `Withdraw tokens from the contract`,
},
{
id: 'transfer',
name: 'Transfer Tokens',
description: `Transfer tokens from one address to another`,
},
{
id: 'batch_transfer',
name: 'Batch Transfer Tokens',
description: `Transfer a list of tokens to a recipient`,
},
{
id: 'burn',
name: 'Burn Token',
description: `Burn a specified token from the collection`,
},
{
id: 'batch_burn',
name: 'Batch Burn Tokens',
description: `Burn a list of tokens from the collection`,
},
]
export const VENDING_ACTION_LIST: ActionListItem[] = [
{
id: 'mint',
name: 'Mint',
@ -150,16 +202,18 @@ export interface DispatchExecuteProps {
type Select<T extends ActionType> = T
/** @see {@link MinterInstance} */
/** @see {@link VendingMinterInstance}{@link BaseMinterInstance} */
export type DispatchExecuteArgs = {
minterContract: string
sg721Contract: string
minterMessages?: MinterInstance
vendingMinterMessages?: VendingMinterInstance
baseMinterMessages?: BaseMinterInstance
sg721Messages?: SG721Instance
txSigner: string
} & (
| { type: undefined }
| { type: Select<'mint'> }
| { type: Select<'mint_token_uri'>; tokenUri: string }
| { type: Select<'purge'> }
| { type: Select<'update_mint_price'>; price: string }
| { type: Select<'mint_to'>; recipient: string }
@ -183,40 +237,43 @@ export type DispatchExecuteArgs = {
)
export const dispatchExecute = async (args: DispatchExecuteArgs) => {
const { minterMessages, sg721Messages, txSigner } = args
if (!minterMessages || !sg721Messages) {
const { vendingMinterMessages, baseMinterMessages, sg721Messages, txSigner } = args
if (!vendingMinterMessages || !baseMinterMessages || !sg721Messages) {
throw new Error('Cannot execute actions')
}
switch (args.type) {
case 'mint': {
return minterMessages.mint(txSigner)
return vendingMinterMessages.mint(txSigner)
}
case 'mint_token_uri': {
return baseMinterMessages.mint(txSigner, args.tokenUri)
}
case 'purge': {
return minterMessages.purge(txSigner)
return vendingMinterMessages.purge(txSigner)
}
case 'update_mint_price': {
return minterMessages.updateMintPrice(txSigner, args.price)
return vendingMinterMessages.updateMintPrice(txSigner, args.price)
}
case 'mint_to': {
return minterMessages.mintTo(txSigner, args.recipient)
return vendingMinterMessages.mintTo(txSigner, args.recipient)
}
case 'mint_for': {
return minterMessages.mintFor(txSigner, args.recipient, args.tokenId)
return vendingMinterMessages.mintFor(txSigner, args.recipient, args.tokenId)
}
case 'batch_mint': {
return minterMessages.batchMint(txSigner, args.recipient, args.batchNumber)
return vendingMinterMessages.batchMint(txSigner, args.recipient, args.batchNumber)
}
case 'set_whitelist': {
return minterMessages.setWhitelist(txSigner, args.whitelist)
return vendingMinterMessages.setWhitelist(txSigner, args.whitelist)
}
case 'update_start_time': {
return minterMessages.updateStartTime(txSigner, args.startTime)
return vendingMinterMessages.updateStartTime(txSigner, args.startTime)
}
case 'update_start_trading_time': {
return minterMessages.updateStartTradingTime(txSigner, args.startTime)
return vendingMinterMessages.updateStartTradingTime(txSigner, args.startTime)
}
case 'update_per_address_limit': {
return minterMessages.updatePerAddressLimit(txSigner, args.limit)
return vendingMinterMessages.updatePerAddressLimit(txSigner, args.limit)
}
case 'update_collection_info': {
return sg721Messages.updateCollectionInfo(args.collectionInfo as CollectionInfo)
@ -225,10 +282,10 @@ export const dispatchExecute = async (args: DispatchExecuteArgs) => {
return sg721Messages.freezeCollectionInfo()
}
case 'shuffle': {
return minterMessages.shuffle(txSigner)
return vendingMinterMessages.shuffle(txSigner)
}
case 'withdraw': {
return minterMessages.withdraw(txSigner)
return vendingMinterMessages.withdraw(txSigner)
}
case 'transfer': {
return sg721Messages.transferNft(args.recipient, args.tokenId.toString())
@ -243,13 +300,13 @@ export const dispatchExecute = async (args: DispatchExecuteArgs) => {
return sg721Messages.batchBurn(args.tokenIds)
}
case 'batch_mint_for': {
return minterMessages.batchMintFor(txSigner, args.recipient, args.tokenIds)
return vendingMinterMessages.batchMintFor(txSigner, args.recipient, args.tokenIds)
}
case 'airdrop': {
return minterMessages.airdrop(txSigner, args.recipients)
return vendingMinterMessages.airdrop(txSigner, args.recipients)
}
case 'burn_remaining': {
return minterMessages.burnRemaining(txSigner)
return vendingMinterMessages.burnRemaining(txSigner)
}
default: {
throw new Error('Unknown action')
@ -259,40 +316,45 @@ export const dispatchExecute = async (args: DispatchExecuteArgs) => {
export const previewExecutePayload = (args: DispatchExecuteArgs) => {
// eslint-disable-next-line react-hooks/rules-of-hooks
const { messages: minterMessages } = useMinterContract()
const { messages: vendingMinterMessages } = useVendingMinterContract()
// eslint-disable-next-line react-hooks/rules-of-hooks
const { messages: sg721Messages } = useSG721Contract()
// eslint-disable-next-line react-hooks/rules-of-hooks
const { messages: baseMinterMessages } = useBaseMinterContract()
const { minterContract, sg721Contract } = args
switch (args.type) {
case 'mint': {
return minterMessages(minterContract)?.mint()
return vendingMinterMessages(minterContract)?.mint()
}
case 'mint_token_uri': {
return baseMinterMessages(minterContract)?.mint(args.tokenUri)
}
case 'purge': {
return minterMessages(minterContract)?.purge()
return vendingMinterMessages(minterContract)?.purge()
}
case 'update_mint_price': {
return minterMessages(minterContract)?.updateMintPrice(args.price)
return vendingMinterMessages(minterContract)?.updateMintPrice(args.price)
}
case 'mint_to': {
return minterMessages(minterContract)?.mintTo(args.recipient)
return vendingMinterMessages(minterContract)?.mintTo(args.recipient)
}
case 'mint_for': {
return minterMessages(minterContract)?.mintFor(args.recipient, args.tokenId)
return vendingMinterMessages(minterContract)?.mintFor(args.recipient, args.tokenId)
}
case 'batch_mint': {
return minterMessages(minterContract)?.batchMint(args.recipient, args.batchNumber)
return vendingMinterMessages(minterContract)?.batchMint(args.recipient, args.batchNumber)
}
case 'set_whitelist': {
return minterMessages(minterContract)?.setWhitelist(args.whitelist)
return vendingMinterMessages(minterContract)?.setWhitelist(args.whitelist)
}
case 'update_start_time': {
return minterMessages(minterContract)?.updateStartTime(args.startTime)
return vendingMinterMessages(minterContract)?.updateStartTime(args.startTime)
}
case 'update_start_trading_time': {
return minterMessages(minterContract)?.updateStartTradingTime(args.startTime as string)
return vendingMinterMessages(minterContract)?.updateStartTradingTime(args.startTime as string)
}
case 'update_per_address_limit': {
return minterMessages(minterContract)?.updatePerAddressLimit(args.limit)
return vendingMinterMessages(minterContract)?.updatePerAddressLimit(args.limit)
}
case 'update_collection_info': {
return sg721Messages(sg721Contract)?.updateCollectionInfo(args.collectionInfo as CollectionInfo)
@ -301,10 +363,10 @@ export const previewExecutePayload = (args: DispatchExecuteArgs) => {
return sg721Messages(sg721Contract)?.freezeCollectionInfo()
}
case 'shuffle': {
return minterMessages(minterContract)?.shuffle()
return vendingMinterMessages(minterContract)?.shuffle()
}
case 'withdraw': {
return minterMessages(minterContract)?.withdraw()
return vendingMinterMessages(minterContract)?.withdraw()
}
case 'transfer': {
return sg721Messages(sg721Contract)?.transferNft(args.recipient, args.tokenId.toString())
@ -319,13 +381,13 @@ export const previewExecutePayload = (args: DispatchExecuteArgs) => {
return sg721Messages(sg721Contract)?.batchBurn(args.tokenIds)
}
case 'batch_mint_for': {
return minterMessages(minterContract)?.batchMintFor(args.recipient, args.tokenIds)
return vendingMinterMessages(minterContract)?.batchMintFor(args.recipient, args.tokenIds)
}
case 'airdrop': {
return minterMessages(minterContract)?.airdrop(args.recipients)
return vendingMinterMessages(minterContract)?.airdrop(args.recipients)
}
case 'burn_remaining': {
return minterMessages(minterContract)?.burnRemaining()
return vendingMinterMessages(minterContract)?.burnRemaining()
}
default: {
return {}

View File

@ -0,0 +1,199 @@
/* eslint-disable eslint-comments/disable-enable-pair */
/* eslint-disable @typescript-eslint/no-unsafe-call */
/* eslint-disable @typescript-eslint/no-unsafe-member-access */
/* eslint-disable @typescript-eslint/no-unsafe-assignment */
import { toUtf8 } from '@cosmjs/encoding'
import axios from 'axios'
import { useInputState } from 'components/forms/FormInput.hooks'
import { useWallet } from 'contexts/wallet'
import React, { useCallback, useEffect, useState } from 'react'
import { toast } from 'react-hot-toast'
import { API_URL } from 'utils/constants'
import { useDebounce } from '../../../utils/debounce'
import { TextInput } from '../../forms/FormInput'
import type { MinterType } from '../actions/Combobox'
export type MinterAcquisitionMethod = 'existing' | 'new'
export interface MinterInfo {
name: string
minter: string
}
interface MinterDetailsProps {
onChange: (data: MinterDetailsDataProps) => void
minterType: MinterType
}
export interface MinterDetailsDataProps {
minterAcquisitionMethod: MinterAcquisitionMethod
existingMinter: string | undefined
}
export const MinterDetails = ({ onChange, minterType }: MinterDetailsProps) => {
const wallet = useWallet()
const [myBaseMinterContracts, setMyBaseMinterContracts] = useState<MinterInfo[]>([])
const [minterAcquisitionMethod, setMinterAcquisitionMethod] = useState<MinterAcquisitionMethod>('new')
const existingMinterState = useInputState({
id: 'existingMinter',
name: 'existingMinter',
title: 'Existing Base Minter Contract Address',
subtitle: '',
placeholder: 'stars1...',
})
const fetchMinterContracts = async (): Promise<MinterInfo[]> => {
const contracts: MinterInfo[] = await axios
.get(`${API_URL}/api/v1beta/collections/${wallet.address}`)
.then((response) => {
const collectionData = response.data
const minterContracts = collectionData.map((collection: any) => {
return { name: collection.name, minter: collection.minter }
})
return minterContracts
})
.catch(console.error)
console.log(contracts)
return contracts
}
async function getMinterContractType(minterContractAddress: string) {
if (wallet.client && minterContractAddress.length > 0) {
const client = wallet.client
const data = await client.queryContractRaw(
minterContractAddress,
toUtf8(Buffer.from(Buffer.from('contract_info').toString('hex'), 'hex').toString()),
)
const contractType: string = JSON.parse(new TextDecoder().decode(data as Uint8Array)).contract
return contractType
}
}
const filterBaseMinterContracts = async () => {
setMyBaseMinterContracts([])
await fetchMinterContracts()
.then((minterContracts) =>
minterContracts.map(async (minterContract: any) => {
await getMinterContractType(minterContract.minter)
.then((contractType) => {
if (contractType?.includes('sg-base-minter')) {
setMyBaseMinterContracts((prevState) => [...prevState, minterContract])
}
})
.catch((err) => {
console.log(err)
console.log('Unable to retrieve contract type')
})
}),
)
.catch((err) => {
console.log(err)
console.log('Unable to fetch base minter contracts')
})
}
const debouncedMyBaseMinterContracts = useDebounce(myBaseMinterContracts, 500)
const renderMinterContracts = useCallback(() => {
return myBaseMinterContracts.map((minterContract, index) => {
return (
<option key={index} className="mt-2 text-lg bg-[#1A1A1A]">
{`${minterContract.name} - ${minterContract.minter}`}
</option>
)
})
}, [debouncedMyBaseMinterContracts])
const debouncedWalletAddress = useDebounce(wallet.address, 500)
const displayToast = async () => {
await toast.promise(filterBaseMinterContracts(), {
loading: 'Fetching Base Minter contracts...',
success: 'Base Minter contracts retrieved.',
error: 'Unable to retrieve Base Minter contracts.',
})
}
useEffect(() => {
if (debouncedWalletAddress && minterAcquisitionMethod === 'existing') {
void displayToast()
}
}, [debouncedWalletAddress, minterAcquisitionMethod])
useEffect(() => {
const data: MinterDetailsDataProps = {
minterAcquisitionMethod,
existingMinter: existingMinterState.value,
}
onChange(data)
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [existingMinterState.value, minterAcquisitionMethod])
return (
<div className="mx-10 mb-4 rounded border-2 border-white/20">
<div className="flex justify-center mb-2">
<div className="mt-3 ml-4 font-bold form-check form-check-inline">
<input
checked={minterAcquisitionMethod === 'new'}
className="peer sr-only"
id="inlineRadio5"
name="inlineRadioOptions5"
onClick={() => {
setMinterAcquisitionMethod('new')
}}
type="radio"
value="New"
/>
<label
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
</label>
</div>
<div className="mt-3 ml-2 font-bold form-check form-check-inline">
<input
checked={minterAcquisitionMethod === 'existing'}
className="peer sr-only"
id="inlineRadio6"
name="inlineRadioOptions6"
onClick={() => {
setMinterAcquisitionMethod('existing')
}}
type="radio"
value="Existing"
/>
<label
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
</label>
</div>
</div>
{minterAcquisitionMethod === 'existing' && (
<div>
<div className="grid grid-cols-2 grid-flow-col my-4 mx-10">
<select
className="mt-8 w-full max-w-lg text-sm bg-white/10 select select-bordered"
onChange={(e) => {
existingMinterState.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>
{renderMinterContracts()}
</select>
<TextInput defaultValue={existingMinterState.value} {...existingMinterState} isRequired />
</div>
</div>
)}
</div>
)
}

View File

@ -11,15 +11,20 @@ import { TextInput } from 'components/forms/FormInput'
import { useInputState } from 'components/forms/FormInput.hooks'
import { MetadataModal } from 'components/MetadataModal'
import type { ChangeEvent } from 'react'
import { useEffect, useState } from 'react'
import { useEffect, useRef, useState } from 'react'
import { toast } from 'react-hot-toast'
import type { UploadServiceType } from 'services/upload'
import { naturalCompare } from 'utils/sort'
import type { MinterType } from '../actions/Combobox'
import type { MinterAcquisitionMethod } from './MinterDetails'
export type UploadMethod = 'new' | 'existing'
interface UploadDetailsProps {
onChange: (value: UploadDetailsDataProps) => void
minterType: MinterType
minterAcquisitionMethod?: MinterAcquisitionMethod
}
export interface UploadDetailsDataProps {
@ -34,7 +39,7 @@ export interface UploadDetailsDataProps {
imageUrl?: string
}
export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
export const UploadDetails = ({ onChange, minterType, minterAcquisitionMethod }: UploadDetailsProps) => {
const [assetFilesArray, setAssetFilesArray] = useState<File[]>([])
const [metadataFilesArray, setMetadataFilesArray] = useState<File[]>([])
const [uploadMethod, setUploadMethod] = useState<UploadMethod>('new')
@ -42,6 +47,9 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
const [metadataFileArrayIndex, setMetadataFileArrayIndex] = useState(0)
const [refreshMetadata, setRefreshMetadata] = useState(false)
const assetFilesRef = useRef<HTMLInputElement | null>(null)
const metadataFilesRef = useRef<HTMLInputElement | null>(null)
const nftStorageApiKeyState = useInputState({
id: 'nft-storage-api-key',
name: 'nftStorageApiKey',
@ -67,7 +75,7 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
const baseTokenUriState = useInputState({
id: 'baseTokenUri',
name: 'baseTokenUri',
title: 'Base Token URI',
title: minterType === 'vending' ? 'Base Token URI' : 'Token URI',
placeholder: 'ipfs://',
defaultValue: '',
})
@ -84,16 +92,18 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
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
@ -125,16 +135,18 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
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
@ -226,14 +238,16 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
])
useEffect(() => {
if (assetFilesRef.current) assetFilesRef.current.value = ''
if (assetFilesRef.current) assetFilesRef.current.value = ''
setAssetFilesArray([])
setMetadataFilesArray([])
baseTokenUriState.onChange('')
coverImageUrlState.onChange('')
}, [uploadMethod])
}, [uploadMethod, minterType, minterAcquisitionMethod])
return (
<div className="justify-items-start mt-5 mb-3 rounded border border-2 border-white/20 flex-column">
<div className="justify-items-start mb-3 rounded border-2 border-white/20 flex-column">
<div className="flex justify-center">
<div className="mt-3 ml-4 font-bold form-check form-check-inline">
<input
@ -251,7 +265,7 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
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="inlineRadio2"
>
Upload assets & metadata
{minterType === 'base' ? 'Upload asset & metadata' : 'Upload assets & metadata'}
</label>
</div>
<div className="mt-3 ml-2 font-bold form-check form-check-inline">
@ -270,13 +284,13 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
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="inlineRadio1"
>
Use an existing base URI
{minterType === 'base' ? 'Use an existing Token URI' : 'Use an existing base URI'}
</label>
</div>
</div>
<div className="p-3 py-5 pb-8">
<Conditional test={uploadMethod === 'existing'}>
<Conditional test={uploadMethod === 'existing' && minterType === 'vending'}>
<div className="ml-3 flex-column">
<p className="mb-5 ml-5">
Though Stargaze&apos;s sg721 contract allows for off-chain metadata storage, it is recommended to use a
@ -293,9 +307,35 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
<div>
<TextInput {...baseTokenUriState} className="w-1/2" />
</div>
<Conditional test={minterType !== 'base'}>
<div>
<TextInput {...coverImageUrlState} className="mt-2 w-1/2" />
</div>
</Conditional>
</div>
</Conditional>
<Conditional test={uploadMethod === 'existing' && minterType === 'base'}>
<div className="ml-3 flex-column">
<p className="mb-5 ml-5">
Though Stargaze&apos;s sg721 contract allows for off-chain metadata storage, it is recommended to use a
decentralized storage solution, such as IPFS. <br /> You may head over to{' '}
<Anchor className="font-bold text-plumbus hover:underline" href="https://nft.storage">
NFT.Storage
</Anchor>{' '}
or{' '}
<Anchor className="font-bold text-plumbus hover:underline" href="https://www.pinata.cloud/">
Pinata
</Anchor>{' '}
and upload your asset & metadata manually to get a URI for your token before minting.
</p>
<div>
<TextInput {...coverImageUrlState} className="mt-2 w-1/2" />
<TextInput {...baseTokenUriState} className="w-1/2" />
</div>
<Conditional test={minterType !== 'base' || (minterType === 'base' && minterAcquisitionMethod === 'new')}>
<div>
<TextInput {...coverImageUrlState} className="mt-2 w-1/2" />
</div>
</Conditional>
</div>
</Conditional>
<Conditional test={uploadMethod === 'new'}>
@ -390,8 +430,9 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
'before:absolute before:inset-0 before:hover:bg-white/5 before:transition',
)}
id="assetFiles"
multiple
multiple={minterType === 'vending'}
onChange={selectAssets}
ref={assetFilesRef}
type="file"
/>
</div>
@ -418,8 +459,9 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
'before:absolute before:inset-0 before:hover:bg-white/5 before:transition',
)}
id="metadataFiles"
multiple
multiple={minterType === 'vending'}
onChange={selectMetadata}
ref={metadataFilesRef}
type="file"
/>
</div>
@ -435,7 +477,11 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
</div>
<Conditional test={assetFilesArray.length > 0}>
<AssetsPreview assetFilesArray={assetFilesArray} updateMetadataFileIndex={updateMetadataFileIndex} />
<AssetsPreview
assetFilesArray={assetFilesArray}
minterType={minterType}
updateMetadataFileIndex={updateMetadataFileIndex}
/>
</Conditional>
</div>
</div>

View File

@ -2,19 +2,30 @@ import { Combobox, Transition } from '@headlessui/react'
import clsx from 'clsx'
import { FormControl } from 'components/FormControl'
import { matchSorter } from 'match-sorter'
import { Fragment, useState } from 'react'
import { Fragment, useEffect, useState } from 'react'
import { FaChevronDown, FaInfoCircle } from 'react-icons/fa'
import type { MinterType } from '../actions/Combobox'
import type { QueryListItem } from './query'
import { QUERY_LIST } from './query'
import { BASE_QUERY_LIST, VENDING_QUERY_LIST } from './query'
export interface QueryComboboxProps {
value: QueryListItem | null
onChange: (item: QueryListItem) => void
minterType?: MinterType
}
export const QueryCombobox = ({ value, onChange }: QueryComboboxProps) => {
export const QueryCombobox = ({ value, onChange, minterType }: QueryComboboxProps) => {
const [search, setSearch] = useState('')
const [QUERY_LIST, SET_QUERY_LIST] = useState<QueryListItem[]>(VENDING_QUERY_LIST)
useEffect(() => {
if (minterType === 'base') {
SET_QUERY_LIST(BASE_QUERY_LIST)
} else {
SET_QUERY_LIST(VENDING_QUERY_LIST)
}
}, [minterType])
const filtered = search === '' ? QUERY_LIST : matchSorter(QUERY_LIST, search, { keys: ['id', 'name', 'description'] })
@ -67,7 +78,7 @@ export const QueryCombobox = ({ value, onChange }: QueryComboboxProps) => {
<Combobox.Option
key={entry.id}
className={({ active }) =>
clsx('flex relative flex-col py-2 px-4 space-y-1 cursor-pointer', { 'bg-plumbus-70': active })
clsx('flex relative flex-col py-2 px-4 space-y-1 cursor-pointer', { 'bg-stargaze-80': active })
}
value={entry}
>

View File

@ -5,22 +5,29 @@ import { FormControl } from 'components/FormControl'
import { AddressInput, TextInput } from 'components/forms/FormInput'
import { useInputState } from 'components/forms/FormInput.hooks'
import { JsonPreview } from 'components/JsonPreview'
import type { MinterInstance } from 'contracts/minter'
import type { BaseMinterInstance } from 'contracts/baseMinter'
import type { SG721Instance } from 'contracts/sg721'
import type { VendingMinterInstance } from 'contracts/vendingMinter'
import { toast } from 'react-hot-toast'
import { useQuery } from 'react-query'
import type { MinterType } from '../actions/Combobox'
interface CollectionQueriesProps {
minterContractAddress: string
sg721ContractAddress: string
sg721Messages: SG721Instance | undefined
minterMessages: MinterInstance | undefined
vendingMinterMessages: VendingMinterInstance | undefined
baseMinterMessages: BaseMinterInstance | undefined
minterType: MinterType
}
export const CollectionQueries = ({
sg721ContractAddress,
sg721Messages,
minterContractAddress,
minterMessages,
vendingMinterMessages,
baseMinterMessages,
minterType,
}: CollectionQueriesProps) => {
const comboboxState = useQueryComboboxState()
const type = comboboxState.value?.id
@ -43,15 +50,17 @@ 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, minterMessages, type, tokenId, address] as const,
[sg721Messages, baseMinterMessages, vendingMinterMessages, type, tokenId, address] as const,
async ({ queryKey }) => {
const [_sg721Messages, _minterMessages, _type, _tokenId, _address] = queryKey
const [_sg721Messages, _baseMinterMessages_, _vendingMinterMessages, _type, _tokenId, _address] = queryKey
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
const result = await dispatchQuery({
tokenId: _tokenId,
minterMessages: _minterMessages,
vendingMinterMessages: _vendingMinterMessages,
baseMinterMessages: _baseMinterMessages_,
sg721Messages: _sg721Messages,
address: _address,
type: _type,
@ -71,7 +80,7 @@ export const CollectionQueries = ({
return (
<div className="grid grid-cols-2 mt-4">
<div className="mr-2 space-y-8">
<QueryCombobox {...comboboxState} />
<QueryCombobox minterType={minterType} {...comboboxState} />
{showAddressField && <AddressInput {...addressState} />}
{showTokenIdField && <TextInput {...tokenIdState} />}
</div>

View File

@ -1,5 +1,6 @@
import type { MinterInstance } from 'contracts/minter'
import type { BaseMinterInstance } from 'contracts/baseMinter'
import type { SG721Instance } from 'contracts/sg721'
import type { VendingMinterInstance } from 'contracts/vendingMinter'
export type QueryType = typeof QUERY_TYPES[number]
@ -8,8 +9,11 @@ export const QUERY_TYPES = [
'mint_price',
'num_tokens',
'tokens_minted_to_user',
'tokens',
// 'token_owners',
'token_info',
'config',
'status',
] as const
export interface QueryListItem {
@ -18,7 +22,7 @@ export interface QueryListItem {
description?: string
}
export const QUERY_LIST: QueryListItem[] = [
export const VENDING_QUERY_LIST: QueryListItem[] = [
{
id: 'collection_info',
name: 'Collection Info',
@ -49,6 +53,43 @@ export const QUERY_LIST: QueryListItem[] = [
name: 'Token Info',
description: `Get information about a token in the collection.`,
},
{
id: 'config',
name: 'Minter Config',
description: `Query Minter Config`,
},
{
id: 'status',
name: 'Minter Status',
description: `Query Minter Status`,
},
]
export const BASE_QUERY_LIST: QueryListItem[] = [
{
id: 'collection_info',
name: 'Collection Info',
description: `Get information about the collection.`,
},
{
id: 'tokens',
name: 'Tokens Minted to User',
description: `Get the number of tokens minted in the collection to a user.`,
},
{
id: 'token_info',
name: 'Token Info',
description: `Get information about a token in the collection.`,
},
{
id: 'config',
name: 'Minter Config',
description: `Query Minter Config`,
},
{
id: 'status',
name: 'Minter Status',
description: `Query Minter Status`,
},
]
export interface DispatchExecuteProps {
@ -59,7 +100,8 @@ export interface DispatchExecuteProps {
type Select<T extends QueryType> = T
export type DispatchQueryArgs = {
minterMessages?: MinterInstance
baseMinterMessages?: BaseMinterInstance
vendingMinterMessages?: VendingMinterInstance
sg721Messages?: SG721Instance
} & (
| { type: undefined }
@ -67,13 +109,16 @@ 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'> }
| { type: Select<'status'> }
)
export const dispatchQuery = async (args: DispatchQueryArgs) => {
const { minterMessages, sg721Messages } = args
if (!minterMessages || !sg721Messages) {
const { baseMinterMessages, vendingMinterMessages, sg721Messages } = args
if (!baseMinterMessages || !vendingMinterMessages || !sg721Messages) {
throw new Error('Cannot execute actions')
}
switch (args.type) {
@ -81,21 +126,30 @@ export const dispatchQuery = async (args: DispatchQueryArgs) => {
return sg721Messages.collectionInfo()
}
case 'mint_price': {
return minterMessages.getMintPrice()
return vendingMinterMessages.getMintPrice()
}
case 'num_tokens': {
return minterMessages.getMintableNumTokens()
return vendingMinterMessages.getMintableNumTokens()
}
case 'tokens_minted_to_user': {
return minterMessages.getMintCount(args.address)
return vendingMinterMessages.getMintCount(args.address)
}
case 'tokens': {
return sg721Messages.tokens(args.address)
}
// case 'token_owners': {
// return minterMessages.updateStartTime(txSigner, args.startTime)
// return vendingMinterMessages.updateStartTime(txSigner, args.startTime)
// }
case 'token_info': {
if (!args.tokenId) return
return sg721Messages.allNftInfo(args.tokenId)
}
case 'config': {
return baseMinterMessages.getConfig()
}
case 'status': {
return baseMinterMessages.getStatus()
}
default: {
throw new Error('Unknown action')
}

View File

@ -1,4 +1,4 @@
import type { ExecuteListItem } from 'contracts/minter/messages/execute'
import type { ExecuteListItem } from 'contracts/baseMinter/messages/execute'
import { useState } from 'react'
export const useExecuteComboboxState = () => {

View File

@ -1,8 +1,8 @@
import { Combobox, Transition } from '@headlessui/react'
import clsx from 'clsx'
import { FormControl } from 'components/FormControl'
import type { ExecuteListItem } from 'contracts/minter/messages/execute'
import { EXECUTE_LIST } from 'contracts/minter/messages/execute'
import type { ExecuteListItem } from 'contracts/baseMinter/messages/execute'
import { EXECUTE_LIST } from 'contracts/baseMinter/messages/execute'
import { matchSorter } from 'match-sorter'
import { Fragment, useState } from 'react'
import { FaChevronDown, FaInfoCircle } from 'react-icons/fa'
@ -67,7 +67,7 @@ export const ExecuteCombobox = ({ value, onChange }: ExecuteComboboxProps) => {
<Combobox.Option
key={entry.id}
className={({ active }) =>
clsx('flex relative flex-col py-2 px-4 space-y-1 cursor-pointer', { 'bg-plumbus-70': active })
clsx('flex relative flex-col py-2 px-4 space-y-1 cursor-pointer', { 'bg-stargaze-80': active })
}
value={entry}
>

View File

@ -67,7 +67,7 @@ export const ExecuteCombobox = ({ value, onChange }: ExecuteComboboxProps) => {
<Combobox.Option
key={entry.id}
className={({ active }) =>
clsx('flex relative flex-col py-2 px-4 space-y-1 cursor-pointer', { 'bg-plumbus-70': active })
clsx('flex relative flex-col py-2 px-4 space-y-1 cursor-pointer', { 'bg-stargaze-80': active })
}
value={entry}
>

View File

@ -0,0 +1,7 @@
import type { ExecuteListItem } from 'contracts/vendingMinter/messages/execute'
import { useState } from 'react'
export const useExecuteComboboxState = () => {
const [value, setValue] = useState<ExecuteListItem | null>(null)
return { value, onChange: (item: ExecuteListItem) => setValue(item) }
}

View File

@ -0,0 +1,92 @@
import { Combobox, Transition } from '@headlessui/react'
import clsx from 'clsx'
import { FormControl } from 'components/FormControl'
import type { ExecuteListItem } from 'contracts/vendingMinter/messages/execute'
import { EXECUTE_LIST } from 'contracts/vendingMinter/messages/execute'
import { matchSorter } from 'match-sorter'
import { Fragment, useState } from 'react'
import { FaChevronDown, FaInfoCircle } from 'react-icons/fa'
export interface ExecuteComboboxProps {
value: ExecuteListItem | null
onChange: (item: ExecuteListItem) => void
}
export const ExecuteCombobox = ({ value, onChange }: ExecuteComboboxProps) => {
const [search, setSearch] = useState('')
const filtered =
search === '' ? EXECUTE_LIST : matchSorter(EXECUTE_LIST, search, { keys: ['id', 'name', 'description'] })
return (
<Combobox
as={FormControl}
htmlId="message-type"
labelAs={Combobox.Label}
onChange={onChange}
subtitle="Contract execute message type"
title="Message Type"
value={value}
>
<div className="relative">
<Combobox.Input
className={clsx(
'w-full bg-white/10 rounded border-2 border-white/20 form-input',
'placeholder:text-white/50',
'focus:ring focus:ring-plumbus-20',
)}
displayValue={(val?: ExecuteListItem) => val?.name ?? ''}
id="message-type"
onChange={(event) => setSearch(event.target.value)}
placeholder="Select message type"
/>
<Combobox.Button
className={clsx(
'flex absolute inset-y-0 right-0 items-center p-4',
'opacity-50 hover:opacity-100 active:opacity-100',
)}
>
{({ open }) => <FaChevronDown aria-hidden="true" className={clsx('w-4 h-4', { 'rotate-180': open })} />}
</Combobox.Button>
<Transition afterLeave={() => setSearch('')} as={Fragment}>
<Combobox.Options
className={clsx(
'overflow-auto absolute z-10 mt-2 w-full max-h-[30vh]',
'bg-stone-800/80 rounded shadow-lg backdrop-blur-sm',
'divide-y divide-stone-500/50',
)}
>
{filtered.length < 1 && (
<span className="flex flex-col justify-center items-center p-4 text-sm text-center text-white/50">
Message type not found.
</span>
)}
{filtered.map((entry) => (
<Combobox.Option
key={entry.id}
className={({ active }) =>
clsx('flex relative flex-col py-2 px-4 space-y-1 cursor-pointer', { 'bg-stargaze-80': active })
}
value={entry}
>
<span className="font-bold">{entry.name}</span>
<span className="max-w-md text-sm">{entry.description}</span>
</Combobox.Option>
))}
</Combobox.Options>
</Transition>
</div>
{value && (
<div className="flex space-x-2 text-white/50">
<div className="mt-1">
<FaInfoCircle className="w-3 h-3" />
</div>
<span className="text-sm">{value.description}</span>
</div>
)}
</Combobox>
)
}

View File

@ -67,7 +67,7 @@ export const ExecuteCombobox = ({ value, onChange }: ExecuteComboboxProps) => {
<Combobox.Option
key={entry.id}
className={({ active }) =>
clsx('flex relative flex-col py-2 px-4 space-y-1 cursor-pointer', { 'bg-plumbus-70': active })
clsx('flex relative flex-col py-2 px-4 space-y-1 cursor-pointer', { 'bg-stargaze-80': active })
}
value={entry}
>

View File

@ -1,7 +1,12 @@
import { toUtf8 } from '@cosmjs/encoding'
import { FormControl } from 'components/FormControl'
import { AddressInput } from 'components/forms/FormInput'
import { useWallet } from 'contexts/wallet'
import { useEffect, useId, useMemo } from 'react'
import toast from 'react-hot-toast'
import { FaMinus, FaPlus } from 'react-icons/fa'
import { SG721_NAME_ADDRESS } from 'utils/constants'
import { isValidAddress } from 'utils/isValidAddress'
import { useInputState } from './FormInput.hooks'
@ -46,6 +51,7 @@ export interface AddressProps {
}
export function Address({ id, isLast, onAdd, onChange, onRemove }: AddressProps) {
const wallet = useWallet()
const Icon = useMemo(() => (isLast ? FaPlus : FaMinus), [isLast])
const htmlId = useId()
@ -56,10 +62,40 @@ export function Address({ id, isLast, onAdd, onChange, onRemove }: AddressProps)
title: ``,
})
const resolveAddress = async (name: string) => {
if (!wallet.client) throw new Error('Wallet not connected')
await wallet.client
.queryContractRaw(
SG721_NAME_ADDRESS,
toUtf8(
Buffer.from(
`0006${Buffer.from('tokens').toString('hex')}${Buffer.from(name).toString('hex')}`,
'hex',
).toString(),
),
)
.then((res) => {
const tokenUri = JSON.parse(new TextDecoder().decode(res as Uint8Array)).token_uri
if (tokenUri && isValidAddress(tokenUri)) onChange(id, { address: tokenUri })
else {
toast.error(`Resolved address is empty or invalid for the name: ${name}.stars`)
onChange(id, { address: '' })
}
})
.catch((err) => {
toast.error(`Error resolving address for the name: ${name}.stars`)
console.error(err)
onChange(id, { address: '' })
})
}
useEffect(() => {
onChange(id, {
address: addressState.value,
})
if (addressState.value.endsWith('.stars')) {
void resolveAddress(addressState.value.split('.')[0])
} else {
onChange(id, {
address: addressState.value,
})
}
}, [addressState.value, id])
return (
@ -67,7 +103,7 @@ export function Address({ id, isLast, onAdd, onChange, onRemove }: AddressProps)
<AddressInput {...addressState} />
<div className="flex justify-end items-end pb-2 w-8">
<button
className="flex justify-center items-center p-2 bg-plumbus-80 hover:bg-plumbus-60 rounded-full"
className="flex justify-center items-center p-2 bg-stargaze-80 hover:bg-plumbus-60 rounded-full"
onClick={() => (isLast ? onAdd() : onRemove(id))}
type="button"
>

View File

@ -1,9 +1,13 @@
import type { UseMinterContractProps } from 'contracts/minter'
import { useMinterContract } from 'contracts/minter'
import type { UseBaseFactoryContractProps } from 'contracts/baseFactory'
import { useBaseFactoryContract } from 'contracts/baseFactory'
import type { UseBaseMinterContractProps } from 'contracts/baseMinter'
import { useBaseMinterContract } from 'contracts/baseMinter'
import type { UseSG721ContractProps } from 'contracts/sg721'
import { useSG721Contract } from 'contracts/sg721'
import type { UseVendingFactoryContractProps } from 'contracts/vendingFactory'
import { useVendingFactoryContract } from 'contracts/vendingFactory'
import type { UseVendingMinterContractProps } from 'contracts/vendingMinter'
import { useVendingMinterContract } from 'contracts/vendingMinter'
import type { UseWhiteListContractProps } from 'contracts/whitelist'
import { useWhiteListContract } from 'contracts/whitelist'
import type { ReactNode, VFC } from 'react'
@ -16,9 +20,11 @@ import create from 'zustand'
*/
export interface ContractsStore extends State {
sg721: UseSG721ContractProps | null
minter: UseMinterContractProps | null
vendingMinter: UseVendingMinterContractProps | null
baseMinter: UseBaseMinterContractProps | null
whitelist: UseWhiteListContractProps | null
vendingFactory: UseVendingFactoryContractProps | null
baseFactory: UseBaseFactoryContractProps | null
}
/**
@ -26,9 +32,11 @@ export interface ContractsStore extends State {
*/
export const defaultValues: ContractsStore = {
sg721: null,
minter: null,
vendingMinter: null,
baseMinter: null,
whitelist: null,
vendingFactory: null,
baseFactory: null,
}
/**
@ -53,18 +61,22 @@ export const ContractsProvider = ({ children }: { children: ReactNode }) => {
const ContractsSubscription: VFC = () => {
const sg721 = useSG721Contract()
const minter = useMinterContract()
const vendingMinter = useVendingMinterContract()
const baseMinter = useBaseMinterContract()
const whitelist = useWhiteListContract()
const vendingFactory = useVendingFactoryContract()
const baseFactory = useBaseFactoryContract()
useEffect(() => {
useContracts.setState({
sg721,
minter,
vendingMinter,
baseMinter,
whitelist,
vendingFactory,
baseFactory,
})
}, [sg721, minter, whitelist, vendingFactory])
}, [sg721, vendingMinter, baseMinter, whitelist, vendingFactory, baseFactory])
return null
}

View File

@ -0,0 +1,93 @@
import type { SigningCosmWasmClient } from '@cosmjs/cosmwasm-stargate'
import type { Coin } from '@cosmjs/proto-signing'
import { coin } from '@cosmjs/proto-signing'
import type { logs } from '@cosmjs/stargate'
import { BASE_FACTORY_ADDRESS } from 'utils/constants'
export interface CreateBaseMinterResponse {
readonly baseMinterAddress: string
readonly sg721Address: string
readonly transactionHash: string
readonly logs: readonly logs.Log[]
}
export interface BaseFactoryInstance {
readonly contractAddress: string
//Query
getParams: () => Promise<any>
//Execute
createBaseMinter: (
senderAddress: string,
msg: Record<string, unknown>,
funds: Coin[],
) => Promise<CreateBaseMinterResponse>
}
export interface BaseFactoryMessages {
createBaseMinter: (msg: Record<string, unknown>) => CreateBaseMinterMessage
}
export interface CreateBaseMinterMessage {
sender: string
contract: string
msg: Record<string, unknown>
funds: Coin[]
}
export interface BaseFactoryContract {
use: (contractAddress: string) => BaseFactoryInstance
messages: (contractAddress: string) => BaseFactoryMessages
}
export const baseFactory = (client: SigningCosmWasmClient, txSigner: string): BaseFactoryContract => {
const use = (contractAddress: string): BaseFactoryInstance => {
//Query
const getParams = async (): Promise<any> => {
const res = await client.queryContractSmart(contractAddress, {
params: {},
})
return res
}
//Execute
const createBaseMinter = async (
senderAddress: string,
msg: Record<string, unknown>,
funds: Coin[],
): Promise<CreateBaseMinterResponse> => {
const result = await client.execute(senderAddress, BASE_FACTORY_ADDRESS, msg, 'auto', '', funds)
return {
baseMinterAddress: result.logs[0].events[5].attributes[0].value,
sg721Address: result.logs[0].events[5].attributes[2].value,
transactionHash: result.transactionHash,
logs: result.logs,
}
}
return {
contractAddress,
getParams,
createBaseMinter,
}
}
const messages = (contractAddress: string) => {
const createBaseMinter = (msg: Record<string, unknown>): CreateBaseMinterMessage => {
return {
sender: txSigner,
contract: contractAddress,
msg,
funds: [coin('1000000000', 'ustars')],
}
}
return {
createBaseMinter,
}
}
return { use, messages }
}

View File

@ -0,0 +1,28 @@
import type { Coin } from '@cosmjs/proto-signing'
import type { BaseFactoryInstance } from '../index'
import { useBaseFactoryContract } from '../index'
/** @see {@link VendingFactoryInstance} */
export interface DispatchExecuteArgs {
contract: string
messages?: BaseFactoryInstance
txSigner: string
msg: Record<string, unknown>
funds: Coin[]
}
export const dispatchExecute = async (args: DispatchExecuteArgs) => {
const { messages, txSigner } = args
if (!messages) {
throw new Error('cannot dispatch execute, messages is not defined')
}
return messages.createBaseMinter(txSigner, args.msg, args.funds)
}
export const previewExecutePayload = (args: DispatchExecuteArgs) => {
// eslint-disable-next-line react-hooks/rules-of-hooks
const { messages } = useBaseFactoryContract()
const { contract } = args
return messages(contract)?.createBaseMinter(args.msg)
}

View File

@ -0,0 +1,57 @@
import { useWallet } from 'contexts/wallet'
import { useCallback, useEffect, useState } from 'react'
import type { BaseFactoryContract, BaseFactoryInstance, BaseFactoryMessages } from './contract'
import { baseFactory as initContract } from './contract'
export interface UseBaseFactoryContractProps {
use: (customAddress: string) => BaseFactoryInstance | undefined
updateContractAddress: (contractAddress: string) => void
getContractAddress: () => string | undefined
messages: (contractAddress: string) => BaseFactoryMessages | undefined
}
export function useBaseFactoryContract(): UseBaseFactoryContractProps {
const wallet = useWallet()
const [address, setAddress] = useState<string>('')
const [baseFactory, setBaseFactory] = useState<BaseFactoryContract>()
useEffect(() => {
setAddress(localStorage.getItem('contract_address') || '')
}, [])
useEffect(() => {
const BaseFactoryBaseContract = initContract(wallet.getClient(), wallet.address)
setBaseFactory(BaseFactoryBaseContract)
}, [wallet])
const updateContractAddress = (contractAddress: string) => {
setAddress(contractAddress)
}
const use = useCallback(
(customAddress = ''): BaseFactoryInstance | undefined => {
return baseFactory?.use(address || customAddress)
},
[baseFactory, address],
)
const getContractAddress = (): string | undefined => {
return address
}
const messages = useCallback(
(customAddress = ''): BaseFactoryMessages | undefined => {
return baseFactory?.messages(address || customAddress)
},
[baseFactory, address],
)
return {
use,
updateContractAddress,
getContractAddress,
messages,
}
}

View File

@ -0,0 +1,243 @@
import type { SigningCosmWasmClient } from '@cosmjs/cosmwasm-stargate'
import type { Coin } from '@cosmjs/proto-signing'
import { coin } from '@cosmjs/proto-signing'
import type { logs } from '@cosmjs/stargate'
import type { Timestamp } from '@stargazezone/types/contracts/minter/shared-types'
import toast from 'react-hot-toast'
import { BASE_FACTORY_ADDRESS } from 'utils/constants'
export interface InstantiateResponse {
readonly contractAddress: string
readonly transactionHash: string
readonly logs: readonly logs.Log[]
}
export interface MigrateResponse {
readonly transactionHash: string
readonly logs: readonly logs.Log[]
}
export interface RoyaltyInfo {
payment_address: string
share: string
}
export interface BaseMinterInstance {
readonly contractAddress: string
//Query
getConfig: () => Promise<any>
getStatus: () => Promise<any>
//Execute
mint: (senderAddress: string, tokenUri: string) => Promise<string>
updateStartTradingTime: (senderAddress: string, time?: Timestamp) => Promise<string>
}
export interface BaseMinterMessages {
mint: (tokenUri: string) => MintMessage
updateStartTradingTime: (time: Timestamp) => UpdateStartTradingTimeMessage
}
export interface MintMessage {
sender: string
contract: string
msg: {
mint: {
token_uri: string
}
}
funds: Coin[]
}
export interface UpdateStartTradingTimeMessage {
sender: string
contract: string
msg: {
update_start_trading_time: string
}
funds: Coin[]
}
export interface CustomMessage {
sender: string
contract: string
msg: Record<string, unknown>[]
funds: Coin[]
}
export interface MintPriceMessage {
public_price: {
denom: string
amount: string
}
airdrop_price: {
denom: string
amount: string
}
whitelist_price?: {
denom: string
amount: string
}
current_price: {
denom: string
amount: string
}
}
export interface BaseMinterContract {
instantiate: (
senderAddress: string,
codeId: number,
initMsg: Record<string, unknown>,
label: string,
admin?: string,
funds?: Coin[],
) => Promise<InstantiateResponse>
migrate: (
senderAddress: string,
contractAddress: string,
codeId: number,
migrateMsg: Record<string, unknown>,
) => Promise<MigrateResponse>
use: (contractAddress: string) => BaseMinterInstance
messages: (contractAddress: string) => BaseMinterMessages
}
export const baseMinter = (client: SigningCosmWasmClient, txSigner: string): BaseMinterContract => {
const use = (contractAddress: string): BaseMinterInstance => {
//Query
const getFactoryParameters = async (): Promise<any> => {
const res = await client.queryContractSmart(BASE_FACTORY_ADDRESS, { params: {} })
return res
console.log(res)
}
const getConfig = async (): Promise<any> => {
const res = await client.queryContractSmart(contractAddress, {
config: {},
})
return res
}
const getStatus = async (): Promise<any> => {
const res = await client.queryContractSmart(contractAddress, {
status: {},
})
return res
}
//Execute
const mint = async (senderAddress: string, tokenUri: string): Promise<string> => {
//const factoryParameters = await baseFactory?.use(BASE_FACTORY_ADDRESS)?.getParams()
const factoryParameters = await toast.promise(getFactoryParameters(), {
loading: 'Querying Factory Parameters...',
error: 'Querying Factory Parameters failed!',
success: 'Query successful! Minting...',
})
console.log(factoryParameters.params.mint_fee_bps)
const price = (await getConfig()).config.mint_price.amount
console.log(price)
console.log((Number(price) * Number(factoryParameters.params.mint_fee_bps)) / 100)
const res = await client.execute(
senderAddress,
contractAddress,
{
mint: { token_uri: tokenUri },
},
'auto',
'',
[coin((Number(price) * Number(factoryParameters.params.mint_fee_bps)) / 100 / 100, 'ustars')],
)
return res.transactionHash
}
const updateStartTradingTime = async (senderAddress: string, time?: Timestamp): Promise<string> => {
const res = await client.execute(
senderAddress,
contractAddress,
{
update_start_trading_time: time || null,
},
'auto',
'',
)
return res.transactionHash
}
return {
contractAddress,
getConfig,
getStatus,
mint,
updateStartTradingTime,
}
}
const migrate = async (
senderAddress: string,
contractAddress: string,
codeId: number,
migrateMsg: Record<string, unknown>,
): Promise<MigrateResponse> => {
const result = await client.migrate(senderAddress, contractAddress, codeId, migrateMsg, 'auto')
return {
transactionHash: result.transactionHash,
logs: result.logs,
}
}
const instantiate = async (
senderAddress: string,
codeId: number,
initMsg: Record<string, unknown>,
label: string,
): Promise<InstantiateResponse> => {
const result = await client.instantiate(senderAddress, codeId, initMsg, label, 'auto', {
funds: [coin('1000000000', 'ustars')],
})
return {
contractAddress: result.contractAddress,
transactionHash: result.transactionHash,
logs: result.logs,
}
}
const messages = (contractAddress: string) => {
const mint = (tokenUri: string): MintMessage => {
return {
sender: txSigner,
contract: contractAddress,
msg: {
mint: { token_uri: tokenUri },
},
funds: [],
}
}
const updateStartTradingTime = (startTime: string): UpdateStartTradingTimeMessage => {
return {
sender: txSigner,
contract: contractAddress,
msg: {
update_start_trading_time: startTime,
},
funds: [],
}
}
return {
mint,
updateStartTradingTime,
}
}
return { use, instantiate, migrate, messages }
}

View File

@ -0,0 +1,2 @@
export * from './contract'
export * from './useContract'

View File

@ -0,0 +1,82 @@
import type { BaseMinterInstance } from '../index'
import { useBaseMinterContract } from '../index'
export type ExecuteType = typeof EXECUTE_TYPES[number]
export const EXECUTE_TYPES = ['mint', 'update_start_trading_time'] as const
export interface ExecuteListItem {
id: ExecuteType
name: string
description?: string
}
export const EXECUTE_LIST: ExecuteListItem[] = [
{
id: 'mint',
name: 'Mint',
description: `Mint a token with the given token URI`,
},
{
id: 'update_start_trading_time',
name: 'Update Start Trading Time',
description: `Update start trading time for minting`,
},
]
export interface DispatchExecuteProps {
type: ExecuteType
[k: string]: unknown
}
type Select<T extends ExecuteType> = T
/** @see {@link BaseMinterInstance} */
export type DispatchExecuteArgs = {
contract: string
messages?: BaseMinterInstance
txSigner: string
} & (
| { type: undefined }
| { type: Select<'mint'>; tokenUri: string }
| { type: Select<'update_start_trading_time'>; startTime?: string }
)
export const dispatchExecute = async (args: DispatchExecuteArgs) => {
const { messages, txSigner } = args
if (!messages) {
throw new Error('cannot dispatch execute, messages is not defined')
}
switch (args.type) {
case 'mint': {
return messages.mint(txSigner, args.tokenUri)
}
case 'update_start_trading_time': {
return messages.updateStartTradingTime(txSigner, args.startTime)
}
default: {
throw new Error('unknown execute type')
}
}
}
export const previewExecutePayload = (args: DispatchExecuteArgs) => {
// eslint-disable-next-line react-hooks/rules-of-hooks
const { messages } = useBaseMinterContract()
const { contract } = args
switch (args.type) {
case 'mint': {
return messages(contract)?.mint(args.tokenUri)
}
case 'update_start_trading_time': {
return messages(contract)?.updateStartTradingTime(args.startTime as string)
}
default: {
return {}
}
}
}
export const isEitherType = <T extends ExecuteType>(type: unknown, arr: T[]): type is T => {
return arr.some((val) => type === val)
}

View File

@ -0,0 +1,37 @@
import type { BaseMinterInstance } from '../contract'
export type QueryType = typeof QUERY_TYPES[number]
export const QUERY_TYPES = ['config', 'status'] as const
export interface QueryListItem {
id: QueryType
name: string
description?: string
}
export const QUERY_LIST: QueryListItem[] = [
{ id: 'config', name: 'Config', description: 'Query current contract config' },
{ id: 'status', name: 'Status', description: 'Query current contract status' },
]
export interface DispatchQueryProps {
address: string
messages: BaseMinterInstance | undefined
type: QueryType
}
export const dispatchQuery = (props: DispatchQueryProps) => {
const { address, messages, type } = props
switch (type) {
case 'config': {
return messages?.getConfig()
}
case 'status': {
return messages?.getStatus()
}
default: {
throw new Error('unknown query type')
}
}
}

View File

@ -0,0 +1,102 @@
import type { Coin } from '@cosmjs/proto-signing'
import type { logs } from '@cosmjs/stargate'
import { useWallet } from 'contexts/wallet'
import { useCallback, useEffect, useState } from 'react'
import type { BaseMinterContract, BaseMinterInstance, BaseMinterMessages, MigrateResponse } from './contract'
import { baseMinter as initContract } from './contract'
interface InstantiateResponse {
readonly contractAddress: string
readonly transactionHash: string
readonly logs: readonly logs.Log[]
}
export interface UseBaseMinterContractProps {
instantiate: (
codeId: number,
initMsg: Record<string, unknown>,
label: string,
admin?: string,
funds?: Coin[],
) => Promise<InstantiateResponse>
migrate: (contractAddress: string, codeId: number, migrateMsg: Record<string, unknown>) => Promise<MigrateResponse>
use: (customAddress: string) => BaseMinterInstance | undefined
updateContractAddress: (contractAddress: string) => void
getContractAddress: () => string | undefined
messages: (contractAddress: string) => BaseMinterMessages | undefined
}
export function useBaseMinterContract(): UseBaseMinterContractProps {
const wallet = useWallet()
const [address, setAddress] = useState<string>('')
const [baseMinter, setBaseMinter] = useState<BaseMinterContract>()
useEffect(() => {
setAddress(localStorage.getItem('contract_address') || '')
}, [])
useEffect(() => {
const BaseMinterBaseContract = initContract(wallet.getClient(), wallet.address)
setBaseMinter(BaseMinterBaseContract)
}, [wallet])
const updateContractAddress = (contractAddress: string) => {
setAddress(contractAddress)
}
const instantiate = useCallback(
(codeId: number, initMsg: Record<string, unknown>, label: string, admin?: string): Promise<InstantiateResponse> => {
return new Promise((resolve, reject) => {
if (!baseMinter) {
reject(new Error('Contract is not initialized.'))
return
}
baseMinter.instantiate(wallet.address, codeId, initMsg, label, admin).then(resolve).catch(reject)
})
},
[baseMinter, wallet],
)
const migrate = useCallback(
(contractAddress: string, codeId: number, migrateMsg: Record<string, unknown>): Promise<MigrateResponse> => {
return new Promise((resolve, reject) => {
if (!baseMinter) {
reject(new Error('Contract is not initialized.'))
return
}
console.log(wallet.address, contractAddress, codeId)
baseMinter.migrate(wallet.address, contractAddress, codeId, migrateMsg).then(resolve).catch(reject)
})
},
[baseMinter, wallet],
)
const use = useCallback(
(customAddress = ''): BaseMinterInstance | undefined => {
return baseMinter?.use(address || customAddress)
},
[baseMinter, address],
)
const getContractAddress = (): string | undefined => {
return address
}
const messages = useCallback(
(customAddress = ''): BaseMinterMessages | undefined => {
return baseMinter?.messages(address || customAddress)
},
[baseMinter, address],
)
return {
instantiate,
use,
updateContractAddress,
getContractAddress,
messages,
migrate,
}
}

View File

@ -4,7 +4,7 @@ import type { Coin, logs } from '@cosmjs/stargate'
import { coin } from '@cosmjs/stargate'
import { MsgExecuteContract } from 'cosmjs-types/cosmwasm/wasm/v1/tx'
import type { RoyaltyInfo } from '../minter/contract'
import type { RoyaltyInfo } from '../vendingMinter/contract'
export interface InstantiateResponse {
readonly contractAddress: string

View File

@ -4,8 +4,8 @@ import { coin } from '@cosmjs/proto-signing'
import type { logs } from '@cosmjs/stargate'
import { VENDING_FACTORY_ADDRESS } from 'utils/constants'
export interface CreateMinterResponse {
readonly minterAddress: string
export interface CreateVendingMinterResponse {
readonly vendingMinterAddress: string
readonly sg721Address: string
readonly transactionHash: string
readonly logs: readonly logs.Log[]
@ -17,14 +17,18 @@ export interface VendingFactoryInstance {
//Query
//Execute
createMinter: (senderAddress: string, msg: Record<string, unknown>, funds: Coin[]) => Promise<CreateMinterResponse>
createVendingMinter: (
senderAddress: string,
msg: Record<string, unknown>,
funds: Coin[],
) => Promise<CreateVendingMinterResponse>
}
export interface VendingFactoryMessages {
createMinter: (msg: Record<string, unknown>) => CreateMinterMessage
createVendingMinter: (msg: Record<string, unknown>) => CreateVendingMinterMessage
}
export interface CreateMinterMessage {
export interface CreateVendingMinterMessage {
sender: string
contract: string
msg: Record<string, unknown>
@ -42,15 +46,15 @@ export const vendingFactory = (client: SigningCosmWasmClient, txSigner: string):
//Query
//Execute
const createMinter = async (
const createVendingMinter = async (
senderAddress: string,
msg: Record<string, unknown>,
funds: Coin[],
): Promise<CreateMinterResponse> => {
): Promise<CreateVendingMinterResponse> => {
const result = await client.execute(senderAddress, VENDING_FACTORY_ADDRESS, msg, 'auto', '', funds)
return {
minterAddress: result.logs[0].events[5].attributes[0].value,
vendingMinterAddress: result.logs[0].events[5].attributes[0].value,
sg721Address: result.logs[0].events[5].attributes[2].value,
transactionHash: result.transactionHash,
logs: result.logs,
@ -59,12 +63,12 @@ export const vendingFactory = (client: SigningCosmWasmClient, txSigner: string):
return {
contractAddress,
createMinter,
createVendingMinter,
}
}
const messages = (contractAddress: string) => {
const createMinter = (msg: Record<string, unknown>): CreateMinterMessage => {
const createVendingMinter = (msg: Record<string, unknown>): CreateVendingMinterMessage => {
return {
sender: txSigner,
contract: contractAddress,
@ -74,7 +78,7 @@ export const vendingFactory = (client: SigningCosmWasmClient, txSigner: string):
}
return {
createMinter,
createVendingMinter,
}
}

View File

@ -17,12 +17,12 @@ export const dispatchExecute = async (args: DispatchExecuteArgs) => {
if (!messages) {
throw new Error('cannot dispatch execute, messages is not defined')
}
return messages.createMinter(txSigner, args.msg, args.funds)
return messages.createVendingMinter(txSigner, args.msg, args.funds)
}
export const previewExecutePayload = (args: DispatchExecuteArgs) => {
// eslint-disable-next-line react-hooks/rules-of-hooks
const { messages } = useVendingFactoryContract()
const { contract } = args
return messages(contract)?.createMinter(args.msg)
return messages(contract)?.createVendingMinter(args.msg)
}

View File

@ -22,7 +22,7 @@ export interface RoyaltyInfo {
share: string
}
export interface MinterInstance {
export interface VendingMinterInstance {
readonly contractAddress: string
//Query
@ -50,7 +50,7 @@ export interface MinterInstance {
burnRemaining: (senderAddress: string) => Promise<string>
}
export interface MinterMessages {
export interface VendingMinterMessages {
mint: () => MintMessage
purge: () => PurgeMessage
updateMintPrice: (price: string) => UpdateMintPriceMessage
@ -219,7 +219,7 @@ export interface MintPriceMessage {
}
}
export interface MinterContract {
export interface VendingMinterContract {
instantiate: (
senderAddress: string,
codeId: number,
@ -236,13 +236,13 @@ export interface MinterContract {
migrateMsg: Record<string, unknown>,
) => Promise<MigrateResponse>
use: (contractAddress: string) => MinterInstance
use: (contractAddress: string) => VendingMinterInstance
messages: (contractAddress: string) => MinterMessages
messages: (contractAddress: string) => VendingMinterMessages
}
export const minter = (client: SigningCosmWasmClient, txSigner: string): MinterContract => {
const use = (contractAddress: string): MinterInstance => {
export const vendingMinter = (client: SigningCosmWasmClient, txSigner: string): VendingMinterContract => {
const use = (contractAddress: string): VendingMinterInstance => {
//Query
const getConfig = async (): Promise<any> => {
const res = await client.queryContractSmart(contractAddress, {

View File

@ -0,0 +1,2 @@
export * from './contract'
export * from './useContract'

View File

@ -1,5 +1,5 @@
import type { MinterInstance } from '../index'
import { useMinterContract } from '../index'
import type { VendingMinterInstance } from '../index'
import { useVendingMinterContract } from '../index'
export type ExecuteType = typeof EXECUTE_TYPES[number]
@ -89,10 +89,10 @@ export interface DispatchExecuteProps {
type Select<T extends ExecuteType> = T
/** @see {@link MinterInstance} */
/** @see {@link VendingMinterInstance} */
export type DispatchExecuteArgs = {
contract: string
messages?: MinterInstance
messages?: VendingMinterInstance
txSigner: string
} & (
| { type: undefined }
@ -160,7 +160,7 @@ export const dispatchExecute = async (args: DispatchExecuteArgs) => {
export const previewExecutePayload = (args: DispatchExecuteArgs) => {
// eslint-disable-next-line react-hooks/rules-of-hooks
const { messages } = useMinterContract()
const { messages } = useVendingMinterContract()
const { contract } = args
switch (args.type) {
case 'mint': {

View File

@ -1,4 +1,4 @@
import type { MinterInstance } from '../contract'
import type { VendingMinterInstance } from '../contract'
export type QueryType = typeof QUERY_TYPES[number]
@ -24,7 +24,7 @@ export const QUERY_LIST: QueryListItem[] = [
export interface DispatchQueryProps {
address: string
messages: MinterInstance | undefined
messages: VendingMinterInstance | undefined
type: QueryType
}

View File

@ -3,8 +3,8 @@ import type { logs } from '@cosmjs/stargate'
import { useWallet } from 'contexts/wallet'
import { useCallback, useEffect, useState } from 'react'
import type { MigrateResponse, MinterContract, MinterInstance, MinterMessages } from './contract'
import { minter as initContract } from './contract'
import type { MigrateResponse, VendingMinterContract, VendingMinterInstance, VendingMinterMessages } from './contract'
import { vendingMinter as initContract } from './contract'
/*export interface InstantiateResponse {
/** The address of the newly instantiated contract *-/
@ -24,7 +24,7 @@ interface InstantiateResponse {
readonly logs: readonly logs.Log[]
}
export interface UseMinterContractProps {
export interface UseVendingMinterContractProps {
instantiate: (
codeId: number,
initMsg: Record<string, unknown>,
@ -33,25 +33,25 @@ export interface UseMinterContractProps {
funds?: Coin[],
) => Promise<InstantiateResponse>
migrate: (contractAddress: string, codeId: number, migrateMsg: Record<string, unknown>) => Promise<MigrateResponse>
use: (customAddress: string) => MinterInstance | undefined
use: (customAddress: string) => VendingMinterInstance | undefined
updateContractAddress: (contractAddress: string) => void
getContractAddress: () => string | undefined
messages: (contractAddress: string) => MinterMessages | undefined
messages: (contractAddress: string) => VendingMinterMessages | undefined
}
export function useMinterContract(): UseMinterContractProps {
export function useVendingMinterContract(): UseVendingMinterContractProps {
const wallet = useWallet()
const [address, setAddress] = useState<string>('')
const [minter, setMinter] = useState<MinterContract>()
const [vendingMinter, setVendingMinter] = useState<VendingMinterContract>()
useEffect(() => {
setAddress(localStorage.getItem('contract_address') || '')
}, [])
useEffect(() => {
const MinterBaseContract = initContract(wallet.getClient(), wallet.address)
setMinter(MinterBaseContract)
const VendingMinterBaseContract = initContract(wallet.getClient(), wallet.address)
setVendingMinter(VendingMinterBaseContract)
}, [wallet])
const updateContractAddress = (contractAddress: string) => {
@ -61,35 +61,35 @@ export function useMinterContract(): UseMinterContractProps {
const instantiate = useCallback(
(codeId: number, initMsg: Record<string, unknown>, label: string, admin?: string): Promise<InstantiateResponse> => {
return new Promise((resolve, reject) => {
if (!minter) {
if (!vendingMinter) {
reject(new Error('Contract is not initialized.'))
return
}
minter.instantiate(wallet.address, codeId, initMsg, label, admin).then(resolve).catch(reject)
vendingMinter.instantiate(wallet.address, codeId, initMsg, label, admin).then(resolve).catch(reject)
})
},
[minter, wallet],
[vendingMinter, wallet],
)
const migrate = useCallback(
(contractAddress: string, codeId: number, migrateMsg: Record<string, unknown>): Promise<MigrateResponse> => {
return new Promise((resolve, reject) => {
if (!minter) {
if (!vendingMinter) {
reject(new Error('Contract is not initialized.'))
return
}
console.log(wallet.address, contractAddress, codeId)
minter.migrate(wallet.address, contractAddress, codeId, migrateMsg).then(resolve).catch(reject)
vendingMinter.migrate(wallet.address, contractAddress, codeId, migrateMsg).then(resolve).catch(reject)
})
},
[minter, wallet],
[vendingMinter, wallet],
)
const use = useCallback(
(customAddress = ''): MinterInstance | undefined => {
return minter?.use(address || customAddress)
(customAddress = ''): VendingMinterInstance | undefined => {
return vendingMinter?.use(address || customAddress)
},
[minter, address],
[vendingMinter, address],
)
const getContractAddress = (): string | undefined => {
@ -97,10 +97,10 @@ export function useMinterContract(): UseMinterContractProps {
}
const messages = useCallback(
(customAddress = ''): MinterMessages | undefined => {
return minter?.messages(address || customAddress)
(customAddress = ''): VendingMinterMessages | undefined => {
return vendingMinter?.messages(address || customAddress)
},
[minter, address],
[vendingMinter, address],
)
return {

3
env.d.ts vendored
View File

@ -18,6 +18,9 @@ declare namespace NodeJS {
readonly NEXT_PUBLIC_WHITELIST_CODE_ID: string
readonly NEXT_PUBLIC_VENDING_MINTER_CODE_ID: string
readonly NEXT_PUBLIC_VENDING_FACTORY_ADDRESS: string
readonly NEXT_PUBLIC_BASE_FACTORY_ADDRESS: string
readonly NEXT_PUBLIC_SG721_NAME_ADDRESS: string
readonly NEXT_PUBLIC_BASE_MINTER_CODE_ID: string
readonly NEXT_PUBLIC_PINATA_ENDPOINT_URL: string
readonly NEXT_PUBLIC_API_URL: string

View File

@ -14,7 +14,7 @@ const nextConfig = {
NEXT_PUBLIC_WEBSITE_URL:
process.env.NODE_ENV === 'development' ? LOCALHOST_URL : process.env.NEXT_PUBLIC_WEBSITE_URL,
},
reactStrictMode: true,
reactStrictMode: false,
trailingSlash: true,
webpack(config, { dev, webpack }) {
// svgr integration

View File

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

View File

@ -1,3 +1,4 @@
import { toUtf8 } from '@cosmjs/encoding'
import { CollectionActions } from 'components/collections/actions/Action'
import { CollectionQueries } from 'components/collections/queries/Queries'
import { ContractPageHeader } from 'components/ContractPageHeader'
@ -9,14 +10,19 @@ import type { NextPage } from 'next'
import { useRouter } from 'next/router'
import { NextSeo } from 'next-seo'
import { useEffect, useMemo, useState } from 'react'
import toast from 'react-hot-toast'
import { useDebounce } from 'utils/debounce'
import { withMetadata } from 'utils/layout'
import { links } from 'utils/links'
import type { MinterType } from '../../components/collections/actions/Combobox'
const CollectionActionsPage: NextPage = () => {
const { minter: minterContract, sg721: sg721Contract } = useContracts()
const { baseMinter: baseMinterContract, vendingMinter: vendingMinterContract, sg721: sg721Contract } = useContracts()
const wallet = useWallet()
const [action, setAction] = useState<boolean>(false)
const [minterType, setMinterType] = useState<MinterType>('vending')
const sg721ContractState = useInputState({
id: 'sg721-contract-address',
@ -32,9 +38,15 @@ const CollectionActionsPage: NextPage = () => {
subtitle: 'Address of the Minter contract',
})
const minterMessages = useMemo(
() => minterContract?.use(minterContractState.value),
[minterContract, minterContractState.value],
const debouncedMinterContractState = useDebounce(minterContractState.value, 300)
const vendingMinterMessages = useMemo(
() => vendingMinterContract?.use(minterContractState.value),
[vendingMinterContract, minterContractState.value],
)
const baseMinterMessages = useMemo(
() => baseMinterContract?.use(minterContractState.value),
[baseMinterContract, minterContractState.value],
)
const sg721Messages = useMemo(
() => sg721Contract?.use(sg721ContractState.value),
@ -66,6 +78,41 @@ const CollectionActionsPage: NextPage = () => {
if (initialSg721 && initialSg721.length > 0) sg721ContractState.onChange(initialSg721)
}, [])
useEffect(() => {
async function getMinterContractType() {
if (wallet.client && debouncedMinterContractState.length > 0) {
const client = wallet.client
const data = await toast.promise(
client.queryContractRaw(
debouncedMinterContractState,
toUtf8(Buffer.from(Buffer.from('contract_info').toString('hex'), 'hex').toString()),
),
{
loading: 'Retrieving Minter type...',
error: 'Minter type retrieval failed.',
success: 'Minter type retrieved.',
},
)
const contract: string = JSON.parse(new TextDecoder().decode(data as Uint8Array)).contract
console.log(contract)
return contract
}
}
void getMinterContractType()
.then((contract) => {
if (contract?.includes('sg-base-minter')) {
setMinterType('base')
} else {
setMinterType('vending')
}
})
.catch((err) => {
console.log(err)
setMinterType('vending')
console.log('Unable to retrieve contract version')
})
}, [debouncedMinterContractState, wallet.client])
return (
<section className="py-6 px-12 space-y-4">
<NextSeo title="Collection Actions" />
@ -124,18 +171,23 @@ const CollectionActionsPage: NextPage = () => {
</div>
<div>
{(action && (
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
<CollectionActions
baseMinterMessages={baseMinterMessages}
minterContractAddress={minterContractState.value}
minterMessages={minterMessages}
minterType={minterType}
sg721ContractAddress={sg721ContractState.value}
sg721Messages={sg721Messages}
vendingMinterMessages={vendingMinterMessages}
/>
)) || (
<CollectionQueries
baseMinterMessages={baseMinterMessages}
minterContractAddress={minterContractState.value}
minterMessages={minterMessages}
minterType={minterType}
sg721ContractAddress={sg721ContractState.value}
sg721Messages={sg721Messages}
vendingMinterMessages={vendingMinterMessages}
/>
)}
</div>

View File

@ -4,6 +4,7 @@
/* eslint-disable @typescript-eslint/no-unsafe-member-access */
import { coin } from '@cosmjs/proto-signing'
import clsx from 'clsx'
import { Alert } from 'components/Alert'
import { Anchor } from 'components/Anchor'
import { Button } from 'components/Button'
@ -15,6 +16,8 @@ import {
WhitelistDetails,
} from 'components/collections/creation'
import type { CollectionDetailsDataProps } from 'components/collections/creation/CollectionDetails'
import type { MinterDetailsDataProps } from 'components/collections/creation/MinterDetails'
import { MinterDetails } from 'components/collections/creation/MinterDetails'
import type { MintingDetailsDataProps } from 'components/collections/creation/MintingDetails'
import type { RoyaltyDetailsDataProps } from 'components/collections/creation/RoyaltyDetails'
import type { UploadDetailsDataProps } from 'components/collections/creation/UploadDetails'
@ -23,8 +26,10 @@ import { Conditional } from 'components/Conditional'
import { LoadingModal } from 'components/LoadingModal'
import { useContracts } from 'contexts/contracts'
import { useWallet } from 'contexts/wallet'
import type { DispatchExecuteArgs } from 'contracts/vendingFactory/messages/execute'
import { dispatchExecute } from 'contracts/vendingFactory/messages/execute'
import type { DispatchExecuteArgs as BaseFactoryDispatchExecuteArgs } from 'contracts/baseFactory/messages/execute'
import { dispatchExecute as baseFactoryDispatchExecute } from 'contracts/baseFactory/messages/execute'
import type { DispatchExecuteArgs as VendingFactoryDispatchExecuteArgs } from 'contracts/vendingFactory/messages/execute'
import { dispatchExecute as vendingFactoryDispatchExecute } from 'contracts/vendingFactory/messages/execute'
import type { NextPage } from 'next'
import { NextSeo } from 'next-seo'
import { useEffect, useMemo, useRef, useState } from 'react'
@ -32,6 +37,7 @@ import { toast } from 'react-hot-toast'
import { upload } from 'services/upload'
import { compareFileArrays } from 'utils/compareFileArrays'
import {
BASE_FACTORY_ADDRESS,
BLOCK_EXPLORER_URL,
NETWORK,
SG721_CODE_ID,
@ -42,6 +48,7 @@ import {
import { withMetadata } from 'utils/layout'
import { links } from 'utils/links'
import type { MinterType } from '../../components/collections/actions/Combobox'
import type { UploadMethod } from '../../components/collections/creation/UploadDetails'
import { ConfirmationModal } from '../../components/ConfirmationModal'
import { getAssetType } from '../../utils/getAssetType'
@ -49,47 +56,58 @@ import { getAssetType } from '../../utils/getAssetType'
const CollectionCreationPage: NextPage = () => {
const wallet = useWallet()
const {
minter: minterContract,
baseMinter: baseMinterContract,
vendingMinter: vendingMinterContract,
whitelist: whitelistContract,
vendingFactory: vendingFactoryContract,
baseFactory: baseFactoryContract,
} = useContracts()
const scrollRef = useRef<HTMLDivElement>(null)
const messages = useMemo(
const vendingFactoryMessages = useMemo(
() => vendingFactoryContract?.use(VENDING_FACTORY_ADDRESS),
[vendingFactoryContract, wallet.address],
)
const baseFactoryMessages = useMemo(
() => baseFactoryContract?.use(BASE_FACTORY_ADDRESS),
[baseFactoryContract, wallet.address],
)
const [uploadDetails, setUploadDetails] = useState<UploadDetailsDataProps | null>(null)
const [collectionDetails, setCollectionDetails] = useState<CollectionDetailsDataProps | null>(null)
const [minterDetails, setMinterDetails] = useState<MinterDetailsDataProps | null>(null)
const [mintingDetails, setMintingDetails] = useState<MintingDetailsDataProps | null>(null)
const [whitelistDetails, setWhitelistDetails] = useState<WhitelistDetailsDataProps | null>(null)
const [royaltyDetails, setRoyaltyDetails] = useState<RoyaltyDetailsDataProps | null>(null)
const [minterType, setMinterType] = useState<MinterType>('vending')
const [uploading, setUploading] = useState(false)
const [creatingCollection, setCreatingCollection] = useState(false)
const [readyToCreate, setReadyToCreate] = useState(false)
const [minterContractAddress, setMinterContractAddress] = useState<string | null>(null)
const [readyToCreateVm, setReadyToCreateVm] = useState(false)
const [readyToCreateBm, setReadyToCreateBm] = useState(false)
const [readyToUploadAndMint, setReadyToUploadAndMint] = useState(false)
const [vendingMinterContractAddress, setVendingMinterContractAddress] = useState<string | null>(null)
const [sg721ContractAddress, setSg721ContractAddress] = useState<string | null>(null)
const [whitelistContractAddress, setWhitelistContractAddress] = useState<string | null | undefined>(null)
const [baseTokenUri, setBaseTokenUri] = useState<string | null>(null)
const [coverImageUrl, setCoverImageUrl] = useState<string | null>(null)
const [transactionHash, setTransactionHash] = useState<string | null>(null)
const performChecks = () => {
const performVendingMinterChecks = () => {
try {
setReadyToCreate(false)
setReadyToCreateVm(false)
checkUploadDetails()
checkCollectionDetails()
checkMintingDetails()
checkRoyaltyDetails()
checkWhitelistDetails()
.then(() => {
setReadyToCreate(true)
setReadyToCreateVm(true)
})
.catch((err) => {
toast.error(`Error in Whitelist Configuration: ${err.message}`, { style: { maxWidth: 'none' } })
setReadyToCreate(false)
setReadyToCreateVm(false)
})
} catch (error: any) {
toast.error(error.message, { style: { maxWidth: 'none' } })
@ -97,12 +115,56 @@ const CollectionCreationPage: NextPage = () => {
}
}
const createCollection = async () => {
const performBaseMinterChecks = () => {
try {
setReadyToCreateBm(false)
checkUploadDetails()
checkRoyaltyDetails()
checkCollectionDetails()
checkWhitelistDetails()
.then(() => {
setReadyToCreateBm(true)
})
.catch((err) => {
toast.error(`Error in Whitelist Configuration: ${err.message}`, { style: { maxWidth: 'none' } })
setReadyToCreateBm(false)
})
} catch (error: any) {
toast.error(error.message, { style: { maxWidth: 'none' } })
setUploading(false)
}
}
const performUploadAndMintChecks = () => {
try {
setReadyToUploadAndMint(false)
checkUploadDetails()
checkWhitelistDetails()
.then(() => {
setReadyToUploadAndMint(true)
})
.catch((err) => {
toast.error(`Error in Whitelist Configuration: ${err.message}`, { style: { maxWidth: 'none' } })
setReadyToUploadAndMint(false)
})
} catch (error: any) {
toast.error(error.message, { style: { maxWidth: 'none' } })
setUploading(false)
}
}
const resetReadyFlags = () => {
setReadyToCreateVm(false)
setReadyToCreateBm(false)
setReadyToUploadAndMint(false)
}
const createVendingMinterCollection = async () => {
try {
setCreatingCollection(true)
setBaseTokenUri(null)
setCoverImageUrl(null)
setMinterContractAddress(null)
setVendingMinterContractAddress(null)
setSg721ContractAddress(null)
setWhitelistContractAddress(null)
setTransactionHash(null)
@ -130,7 +192,7 @@ const CollectionCreationPage: NextPage = () => {
else if (whitelistDetails?.whitelistType === 'new') whitelist = await instantiateWhitelist()
setWhitelistContractAddress(whitelist as string)
await instantiate(baseUri, coverImageUri, whitelist)
await instantiateVendingMinter(baseUri, coverImageUri, whitelist)
} else {
setBaseTokenUri(uploadDetails?.baseTokenURI as string)
setCoverImageUrl(uploadDetails?.imageUrl as string)
@ -140,7 +202,110 @@ const CollectionCreationPage: NextPage = () => {
else if (whitelistDetails?.whitelistType === 'new') whitelist = await instantiateWhitelist()
setWhitelistContractAddress(whitelist as string)
await instantiate(baseTokenUri as string, coverImageUrl as string, whitelist)
await instantiateVendingMinter(baseTokenUri as string, coverImageUrl as string, whitelist)
}
setCreatingCollection(false)
// eslint-disable-next-line @typescript-eslint/no-explicit-any
} catch (error: any) {
toast.error(error.message, { style: { maxWidth: 'none' } })
setCreatingCollection(false)
setUploading(false)
}
}
const createBaseMinterCollection = async () => {
try {
setCreatingCollection(true)
setBaseTokenUri(null)
setCoverImageUrl(null)
setVendingMinterContractAddress(null)
setSg721ContractAddress(null)
setWhitelistContractAddress(null)
setTransactionHash(null)
if (uploadDetails?.uploadMethod === 'new') {
setUploading(true)
const baseUri = await uploadFiles()
//upload coverImageUri and append the file name
const coverImageUri = await upload(
collectionDetails?.imageFile as File[],
uploadDetails.uploadService,
'cover',
uploadDetails.nftStorageApiKey as string,
uploadDetails.pinataApiKey as string,
uploadDetails.pinataSecretKey as string,
)
setUploading(false)
setBaseTokenUri(baseUri)
setCoverImageUrl(coverImageUri)
await instantiateBaseMinter(
`ipfs://${baseUri}/${uploadDetails.metadataFiles[0].name.split('.')[0]}`,
coverImageUri,
)
} else {
setBaseTokenUri(uploadDetails?.baseTokenURI as string)
setCoverImageUrl(uploadDetails?.imageUrl as string)
await instantiateBaseMinter(uploadDetails?.baseTokenURI as string, uploadDetails?.imageUrl as string)
}
setCreatingCollection(false)
// eslint-disable-next-line @typescript-eslint/no-explicit-any
} catch (error: any) {
toast.error(error.message, { style: { maxWidth: 'none' } })
setCreatingCollection(false)
setUploading(false)
}
}
const uploadAndMint = async () => {
try {
if (!wallet.initialized) throw new Error('Wallet not connected')
if (!baseMinterContract) throw new Error('Contract not found')
setCreatingCollection(true)
setBaseTokenUri(null)
setCoverImageUrl(null)
setVendingMinterContractAddress(null)
setSg721ContractAddress(null)
setTransactionHash(null)
if (uploadDetails?.uploadMethod === 'new') {
setUploading(true)
await uploadFiles()
.then(async (baseUri) => {
setUploading(false)
setBaseTokenUri(baseUri)
const result = await baseMinterContract
.use(minterDetails?.existingMinter as string)
// 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
})
.then((result) => {
toast.success(`Minted successfully! Tx Hash: ${result}`, { style: { maxWidth: 'none' }, duration: 5000 })
})
.catch((error) => {
toast.error(error.message, { style: { maxWidth: 'none' } })
setUploading(false)
setCreatingCollection(false)
})
} else {
setBaseTokenUri(uploadDetails?.baseTokenURI as string)
setUploading(false)
await baseMinterContract
.use(minterDetails?.existingMinter as string)
?.mint(wallet.address, `ipfs://${uploadDetails?.baseTokenURI}`)
.then((result) => {
toast.success(`Minted successfully! Tx Hash: ${result}`, { style: { maxWidth: 'none' }, duration: 5000 })
})
.catch((error) => {
toast.error(error.message, { style: { maxWidth: 'none' } })
setUploading(false)
setCreatingCollection(false)
})
}
setCreatingCollection(false)
// eslint-disable-next-line @typescript-eslint/no-explicit-any
@ -174,9 +339,9 @@ const CollectionCreationPage: NextPage = () => {
return data.contractAddress
}
const instantiate = async (baseUri: string, coverImageUri: string, whitelist?: string) => {
const instantiateVendingMinter = async (baseUri: string, coverImageUri: string, whitelist?: string) => {
if (!wallet.initialized) throw new Error('Wallet not connected')
if (!minterContract) throw new Error('Contract not found')
if (!vendingFactoryContract) throw new Error('Contract not found')
let royaltyInfo = null
if (royaltyDetails?.royaltyType === 'new') {
@ -220,19 +385,96 @@ const CollectionCreationPage: NextPage = () => {
},
}
const payload: DispatchExecuteArgs = {
const payload: VendingFactoryDispatchExecuteArgs = {
contract: VENDING_FACTORY_ADDRESS,
messages,
messages: vendingFactoryMessages,
txSigner: wallet.address,
msg,
funds: [coin('1000000000', 'ustars')],
}
const data = await dispatchExecute(payload)
const data = await vendingFactoryDispatchExecute(payload)
setTransactionHash(data.transactionHash)
setMinterContractAddress(data.minterAddress)
setVendingMinterContractAddress(data.vendingMinterAddress)
setSg721ContractAddress(data.sg721Address)
}
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') {
royaltyInfo = {
payment_address: royaltyDetails.paymentAddress,
share: (Number(royaltyDetails.share) / 100).toString(),
}
}
const msg = {
create_minter: {
init_msg: null,
collection_params: {
code_id: SG721_CODE_ID,
name: collectionDetails?.name,
symbol: collectionDetails?.symbol,
info: {
creator: wallet.address,
description: collectionDetails?.description,
image: `${
uploadDetails?.uploadMethod === 'new'
? `ipfs://${coverImageUri}/${collectionDetails?.imageFile[0].name as string}`
: `${coverImageUri}`
}`,
external_link: collectionDetails?.externalLink,
explicit_content: collectionDetails?.explicit,
royalty_info: royaltyInfo,
start_trading_time: collectionDetails?.startTradingTime || null,
},
},
},
}
const payload: BaseFactoryDispatchExecuteArgs = {
contract: BASE_FACTORY_ADDRESS,
messages: baseFactoryMessages,
txSigner: wallet.address,
msg,
funds: [coin('1000000000', 'ustars')],
}
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> => {
if (!uploadDetails) throw new Error('Please upload asset and metadata')
return new Promise((resolve, reject) => {
@ -298,16 +540,21 @@ const CollectionCreationPage: NextPage = () => {
}
const checkUploadDetails = () => {
if (!wallet.initialized) throw new Error('Wallet not connected.')
if (!uploadDetails) {
throw new Error('Please select assets and metadata')
}
if (minterType === 'base' && uploadDetails.uploadMethod === 'new' && uploadDetails.assetFiles.length > 1) {
throw new Error('Base Minter can only mint one asset at a time. Please select only one asset.')
}
if (uploadDetails.uploadMethod === 'new' && uploadDetails.assetFiles.length === 0) {
throw new Error('Please select the assets')
}
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 === '') {
@ -320,6 +567,9 @@ const CollectionCreationPage: NextPage = () => {
if (uploadDetails.uploadMethod === 'existing' && !uploadDetails.baseTokenURI?.includes('ipfs://')) {
throw new Error('Please specify a valid base token URI')
}
if (minterDetails?.minterAcquisitionMethod === 'existing' && !minterDetails.existingMinter) {
throw new Error('Please specify a valid Base Minter contract address')
}
}
const checkCollectionDetails = () => {
@ -399,20 +649,35 @@ const CollectionCreationPage: NextPage = () => {
}
}
useEffect(() => {
if (minterContractAddress !== null) scrollRef.current?.scrollIntoView({ behavior: 'smooth' })
}, [minterContractAddress])
if (vendingMinterContractAddress !== null) scrollRef.current?.scrollIntoView({ behavior: 'smooth' })
}, [vendingMinterContractAddress])
useEffect(() => {
setBaseTokenUri(uploadDetails?.baseTokenURI as string)
setCoverImageUrl(uploadDetails?.imageUrl as string)
}, [uploadDetails?.baseTokenURI, uploadDetails?.imageUrl])
useEffect(() => {
resetReadyFlags()
setVendingMinterContractAddress(null)
}, [minterType, minterDetails?.minterAcquisitionMethod])
return (
<div>
<NextSeo title="Create Collection" />
<NextSeo
title={
minterType === 'base' && minterDetails?.minterAcquisitionMethod === 'existing'
? 'Mint Token'
: 'Create Collection'
}
/>
<div className="mt-5 space-y-5 text-center">
<h1 className="font-heading text-4xl font-bold">Create Collection</h1>
<h1 className="font-heading text-4xl font-bold">
{minterType === 'base' && minterDetails?.minterAcquisitionMethod === 'existing'
? 'Mint Token'
: 'Create Collection'}
</h1>
<Conditional test={uploading}>
<LoadingModal />
@ -427,7 +692,7 @@ const CollectionCreationPage: NextPage = () => {
</p>
</div>
<div className="mx-10" ref={scrollRef}>
<Conditional test={minterContractAddress !== null}>
<Conditional test={vendingMinterContractAddress !== null}>
<Alert className="mt-5" type="info">
<div>
Base Token URI:{' '}
@ -456,9 +721,13 @@ const CollectionCreationPage: NextPage = () => {
<Anchor
className="text-stargaze hover:underline"
external
href={`/contracts/minter/query/?contractAddress=${minterContractAddress as string}`}
href={
minterType === 'vending'
? `/contracts/vendingMinter/query/?contractAddress=${vendingMinterContractAddress as string}`
: `/contracts/baseMinter/query/?contractAddress=${vendingMinterContractAddress as string}`
}
>
{minterContractAddress}
{vendingMinterContractAddress}
</Anchor>
<br />
SG721 Contract Address:{' '}
@ -504,7 +773,7 @@ const CollectionCreationPage: NextPage = () => {
<Anchor
className="text-white"
external
href={`${STARGAZE_URL}/launchpad/${minterContractAddress as string}`}
href={`${STARGAZE_URL}/launchpad/${vendingMinterContractAddress as string}`}
>
View on Launchpad
</Anchor>
@ -513,36 +782,160 @@ const CollectionCreationPage: NextPage = () => {
</Alert>
</Conditional>
</div>
<div className="mx-10">
<UploadDetails onChange={setUploadDetails} />
<div className="flex justify-between py-3 px-8 rounded border-2 border-white/20 grid-col-2">
<CollectionDetails
coverImageUrl={coverImageUrl as string}
onChange={setCollectionDetails}
uploadMethod={uploadDetails?.uploadMethod as UploadMethod}
/>
<MintingDetails
numberOfTokens={uploadDetails?.assetFiles.length}
onChange={setMintingDetails}
uploadMethod={uploadDetails?.uploadMethod as UploadMethod}
/>
</div>
<div className="my-6">
<WhitelistDetails onChange={setWhitelistDetails} />
<div className="my-6" />
<RoyaltyDetails onChange={setRoyaltyDetails} />
</div>
{readyToCreate && <ConfirmationModal confirm={createCollection} />}
<div className="flex justify-end w-full">
<Button
className="relative justify-center p-2 mb-6 max-h-12 text-white bg-plumbus hover:bg-plumbus-light border-0"
isLoading={creatingCollection}
onClick={performChecks}
variant="solid"
{/* To be removed */}
<Conditional test={BASE_FACTORY_ADDRESS === undefined}>
<div className="mx-10 mt-5" />
</Conditional>
<Conditional test={BASE_FACTORY_ADDRESS !== undefined}>
{/* /To be removed */}
<div>
<div
className={clsx(
'mx-10 mt-5',
'grid before:absolute relative grid-cols-2 grid-flow-col items-stretch rounded',
'before:inset-x-0 before:bottom-0 before:border-white/25',
)}
>
Create Collection
</Button>
<div
className={clsx(
'isolate space-y-1 border-2',
'first-of-type:rounded-tl-md last-of-type:rounded-tr-md',
minterType === 'vending' ? 'border-stargaze' : 'border-transparent',
minterType !== 'vending' ? 'bg-stargaze/5 hover:bg-stargaze/80' : 'hover:bg-white/5',
)}
>
<button
className="p-4 w-full h-full text-left bg-transparent"
onClick={() => {
setMinterType('vending')
resetReadyFlags()
}}
type="button"
>
<h4 className="font-bold">Vending Minter</h4>
<span className="text-sm text-white/80 line-clamp-2">
Vending Minter contract facilitates primary market vending machine style minting
</span>
</button>
</div>
<div
className={clsx(
'isolate space-y-1 border-2',
'first-of-type:rounded-tl-md last-of-type:rounded-tr-md',
minterType === 'base' ? 'border-stargaze' : 'border-transparent',
minterType !== 'base' ? 'bg-stargaze/5 hover:bg-stargaze/80' : 'hover:bg-white/5',
)}
>
<button
className="p-4 w-full h-full text-left bg-transparent"
onClick={() => {
setMinterType('base')
resetReadyFlags()
}}
type="button"
>
<h4 className="font-bold">Base Minter</h4>
<span className="text-sm text-white/80 line-clamp-2">Base Minter contract enables 1/1 minting</span>
</button>
</div>
</div>
</div>
</Conditional>
{minterType === 'base' && (
<div>
<MinterDetails minterType={minterType} onChange={setMinterDetails} />
</div>
)}
<div className="mx-10">
<UploadDetails
minterAcquisitionMethod={minterDetails?.minterAcquisitionMethod}
minterType={minterType}
onChange={setUploadDetails}
/>
<Conditional
test={minterType === 'vending' || (minterType === 'base' && minterDetails?.minterAcquisitionMethod === 'new')}
>
<div className="flex justify-between py-3 px-8 rounded border-2 border-white/20 grid-col-2">
<Conditional
test={
minterType === 'vending' || (minterType === 'base' && minterDetails?.minterAcquisitionMethod === 'new')
}
>
<CollectionDetails
coverImageUrl={coverImageUrl as string}
onChange={setCollectionDetails}
uploadMethod={uploadDetails?.uploadMethod as UploadMethod}
/>
</Conditional>
<Conditional test={minterType === 'vending'}>
<MintingDetails
numberOfTokens={uploadDetails?.assetFiles.length}
onChange={setMintingDetails}
uploadMethod={uploadDetails?.uploadMethod as UploadMethod}
/>
</Conditional>
</div>
</Conditional>
<Conditional
test={minterType === 'vending' || (minterType === 'base' && minterDetails?.minterAcquisitionMethod === 'new')}
>
<div className="my-6">
<Conditional test={minterType === 'vending'}>
<WhitelistDetails onChange={setWhitelistDetails} />
<div className="my-6" />
</Conditional>
<RoyaltyDetails onChange={setRoyaltyDetails} />
</div>
</Conditional>
<Conditional test={readyToCreateVm && minterType === 'vending'}>
<ConfirmationModal confirm={createVendingMinterCollection} />
</Conditional>
<Conditional
test={readyToCreateBm && minterType === 'base' && minterDetails?.minterAcquisitionMethod === 'new'}
>
<ConfirmationModal confirm={createBaseMinterCollection} />
</Conditional>
<Conditional
test={readyToUploadAndMint && minterType === 'base' && minterDetails?.minterAcquisitionMethod === 'existing'}
>
<ConfirmationModal confirm={uploadAndMint} />
</Conditional>
<div className="flex justify-end w-full">
<Conditional test={minterType === 'vending'}>
<Button
className="relative justify-center p-2 mb-6 max-h-12 text-white bg-plumbus hover:bg-plumbus-light border-0"
isLoading={creatingCollection}
onClick={performVendingMinterChecks}
variant="solid"
>
Create Collection
</Button>
</Conditional>
<Conditional test={minterType === 'base' && minterDetails?.minterAcquisitionMethod === 'new'}>
<Button
className="relative justify-center p-2 mb-6 max-h-12 text-white bg-plumbus hover:bg-plumbus-light border-0"
isLoading={creatingCollection}
onClick={performBaseMinterChecks}
variant="solid"
>
Create Collection
</Button>
</Conditional>
<Conditional test={minterType === 'base' && minterDetails?.minterAcquisitionMethod === 'existing'}>
<Button
className="relative justify-center p-2 mb-6 max-h-12 text-white bg-plumbus hover:bg-plumbus-light border-0"
isLoading={creatingCollection}
onClick={performUploadAndMintChecks}
variant="solid"
>
Upload & Mint Token
</Button>
</Conditional>
</div>
</div>
</div>

View File

@ -16,7 +16,7 @@ import { withMetadata } from 'utils/layout'
import { links } from 'utils/links'
const CollectionQueriesPage: NextPage = () => {
const { minter: minterContract, sg721: sg721Contract } = useContracts()
const { baseMinter: baseMinterContract, vendingMinter: vendingMinterContract, sg721: sg721Contract } = useContracts()
const comboboxState = useQueryComboboxState()
const type = comboboxState.value?.id
@ -57,19 +57,25 @@ const CollectionQueriesPage: NextPage = () => {
const showTokenIdField = type === 'token_info'
const showAddressField = type === 'tokens_minted_to_user'
const minterMessages = useMemo(
() => minterContract?.use(minterContractAddress),
[minterContract, minterContractAddress],
const vendingMinterMessages = useMemo(
() => vendingMinterContract?.use(minterContractAddress),
[vendingMinterContract, minterContractAddress],
)
const baseMinterMessages = useMemo(
() => baseMinterContract?.use(minterContractAddress),
[baseMinterContract, minterContractAddress],
)
const sg721Messages = useMemo(() => sg721Contract?.use(sg721ContractAddress), [sg721Contract, sg721ContractAddress])
const { data: response } = useQuery(
[sg721Messages, minterMessages, type, tokenId, address] as const,
[sg721Messages, baseMinterMessages, vendingMinterMessages, type, tokenId, address] as const,
async ({ queryKey }) => {
const [_sg721Messages, _minterMessages, _type, _tokenId, _address] = queryKey
const [_sg721Messages, _baseMinterMessages_, _vendingMinterMessages, _type, _tokenId, _address] = queryKey
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
const result = await dispatchQuery({
tokenId: _tokenId,
minterMessages: _minterMessages,
vendingMinterMessages: _vendingMinterMessages,
baseMinterMessages: _baseMinterMessages_,
sg721Messages: _sg721Messages,
address: _address,
type: _type,

View File

@ -0,0 +1,145 @@
import { Button } from 'components/Button'
import { Conditional } from 'components/Conditional'
import { ContractPageHeader } from 'components/ContractPageHeader'
import { ExecuteCombobox } from 'components/contracts/baseMinter/ExecuteCombobox'
import { useExecuteComboboxState } from 'components/contracts/baseMinter/ExecuteCombobox.hooks'
import { FormControl } from 'components/FormControl'
import { AddressInput, TextInput } from 'components/forms/FormInput'
import { useInputState } from 'components/forms/FormInput.hooks'
import { InputDateTime } from 'components/InputDateTime'
import { JsonPreview } from 'components/JsonPreview'
import { LinkTabs } from 'components/LinkTabs'
import { baseMinterLinkTabs } from 'components/LinkTabs.data'
import { TransactionHash } from 'components/TransactionHash'
import { useContracts } from 'contexts/contracts'
import { useWallet } from 'contexts/wallet'
import type { DispatchExecuteArgs } from 'contracts/baseMinter/messages/execute'
import { dispatchExecute, previewExecutePayload } from 'contracts/baseMinter/messages/execute'
import type { NextPage } from 'next'
import { useRouter } from 'next/router'
import { NextSeo } from 'next-seo'
import type { FormEvent } from 'react'
import { useEffect, useMemo, useState } from 'react'
import { toast } from 'react-hot-toast'
import { FaArrowRight } from 'react-icons/fa'
import { useMutation } from 'react-query'
import { withMetadata } from 'utils/layout'
import { links } from 'utils/links'
const BaseMinterExecutePage: NextPage = () => {
const { baseMinter: contract } = useContracts()
const wallet = useWallet()
const [lastTx, setLastTx] = useState('')
const [timestamp, setTimestamp] = useState<Date | undefined>(undefined)
const comboboxState = useExecuteComboboxState()
const type = comboboxState.value?.id
const contractState = useInputState({
id: 'contract-address',
name: 'contract-address',
title: 'Base Minter Address',
subtitle: 'Address of the Base Minter contract',
})
const tokenUriState = useInputState({
id: 'token-uri',
name: 'token-uri',
title: 'Token URI',
placeholder: 'ipfs://',
})
const contractAddress = contractState.value
const showDateField = type === 'update_start_trading_time'
const showTokenUriField = type === 'mint'
const messages = useMemo(() => contract?.use(contractState.value), [contract, wallet.address, contractState.value])
const payload: DispatchExecuteArgs = {
startTime: timestamp ? (timestamp.getTime() * 1_000_000).toString() : '',
tokenUri: tokenUriState.value,
contract: contractState.value,
messages,
txSigner: wallet.address,
type,
}
const { isLoading, mutate } = useMutation(
async (event: FormEvent) => {
event.preventDefault()
if (!type) {
throw new Error('Please select message type!')
}
if (!wallet.initialized) {
throw new Error('Please connect your wallet.')
}
const txHash = await toast.promise(dispatchExecute(payload), {
error: `${type.charAt(0).toUpperCase() + type.slice(1)} execute failed!`,
loading: 'Executing message...',
success: (tx) => `Transaction ${tx} success!`,
})
if (txHash) {
setLastTx(txHash)
}
},
{
onError: (error) => {
toast.error(String(error), { style: { maxWidth: 'none' } })
},
},
)
const router = useRouter()
useEffect(() => {
if (contractAddress.length > 0) {
void router.replace({ query: { contractAddress } })
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [contractAddress])
useEffect(() => {
const initial = new URL(document.URL).searchParams.get('contractAddress')
if (initial && initial.length > 0) contractState.onChange(initial)
}, [])
return (
<section className="py-6 px-12 space-y-4">
<NextSeo title="Execute Base Minter Contract" />
<ContractPageHeader
description="Base Minter contract facilitates 1/1 minting."
link={links.Documentation}
title="Base Minter Contract"
/>
<LinkTabs activeIndex={2} data={baseMinterLinkTabs} />
<form className="grid grid-cols-2 p-4 space-x-8" onSubmit={mutate}>
<div className="space-y-8">
<AddressInput {...contractState} />
<ExecuteCombobox {...comboboxState} />
<Conditional test={showTokenUriField}>
<TextInput {...tokenUriState} />
</Conditional>
<Conditional test={showDateField}>
<FormControl htmlId="start-date" subtitle="Start time for trading." title="Trading Start Time">
<InputDateTime minDate={new Date()} onChange={(date) => setTimestamp(date)} value={timestamp} />
</FormControl>
</Conditional>
</div>
<div className="space-y-8">
<div className="relative">
<Button className="absolute top-0 right-0" isLoading={isLoading} rightIcon={<FaArrowRight />} type="submit">
Execute
</Button>
<FormControl subtitle="View execution transaction hash" title="Transaction Hash">
<TransactionHash hash={lastTx} />
</FormControl>
</div>
<FormControl subtitle="View current message to be sent" title="Payload Preview">
<JsonPreview content={previewExecutePayload(payload)} isCopyable />
</FormControl>
</div>
</form>
</section>
)
}
export default withMetadata(BaseMinterExecutePage, { center: false })

View File

@ -0,0 +1,259 @@
import { coin } from '@cosmjs/proto-signing'
import { Alert } from 'components/Alert'
import { Button } from 'components/Button'
import { Conditional } from 'components/Conditional'
import { ContractPageHeader } from 'components/ContractPageHeader'
import { FormControl } from 'components/FormControl'
import { FormGroup } from 'components/FormGroup'
import { NumberInput, TextInput } from 'components/forms/FormInput'
import { useInputState, useNumberInputState } from 'components/forms/FormInput.hooks'
import { FormTextArea } from 'components/forms/FormTextArea'
import { InputDateTime } from 'components/InputDateTime'
import { JsonPreview } from 'components/JsonPreview'
import { LinkTabs } from 'components/LinkTabs'
import { baseMinterLinkTabs } from 'components/LinkTabs.data'
import { useContracts } from 'contexts/contracts'
import { useWallet } from 'contexts/wallet'
import type { NextPage } from 'next'
import { NextSeo } from 'next-seo'
import type { FormEvent } from 'react'
import { useState } from 'react'
import { toast } from 'react-hot-toast'
import { FaAsterisk } from 'react-icons/fa'
import { useMutation } from 'react-query'
import { BASE_FACTORY_ADDRESS } from 'utils/constants'
import { withMetadata } from 'utils/layout'
import { links } from 'utils/links'
import type { CreateBaseMinterResponse } from '../../../contracts/baseFactory/contract'
import { SG721_CODE_ID } from '../../../utils/constants'
const BaseMinterInstantiatePage: NextPage = () => {
const wallet = useWallet()
const contract = useContracts().baseFactory
const [timestamp, setTimestamp] = useState<Date | undefined>()
const [explicit, setExplicit] = useState<boolean>(false)
const nameState = useInputState({
id: 'name',
name: 'name',
title: 'Name',
placeholder: 'My Awesome SG721 Contract',
subtitle: 'Name of the sg721 contract',
})
const symbolState = useInputState({
id: 'symbol',
name: 'symbol',
title: 'Symbol',
placeholder: 'AWSM',
subtitle: 'Symbol of the sg721 contract',
})
const codeIdState = useNumberInputState({
id: 'code-id',
name: 'code-id',
title: 'Code ID',
subtitle: 'Code ID for the sg721 contract',
placeholder: '1',
defaultValue: SG721_CODE_ID,
})
const creatorState = useInputState({
id: 'creator-address',
name: 'creatorAddress',
title: 'Creator Address',
placeholder: 'stars1234567890abcdefghijklmnopqrstuvwxyz...',
subtitle: 'Address of the collection creator',
defaultValue: wallet.address,
})
const descriptionState = useInputState({
id: 'description',
name: 'description',
title: 'Description',
subtitle: 'Description of the collection',
})
const imageState = useInputState({
id: 'image',
name: 'image',
title: 'Image',
subtitle: 'Image of the collection',
placeholder: 'ipfs://bafybe....',
})
const externalLinkState = useInputState({
id: 'external-link',
name: 'externalLink',
title: 'External Link (optional)',
subtitle: 'External link to the collection',
})
const royaltyPaymentAddressState = useInputState({
id: 'royalty-payment-address',
name: 'royaltyPaymentAddress',
title: 'Payment Address',
subtitle: 'Address to receive royalties',
placeholder: 'stars1234567890abcdefghijklmnopqrstuvwxyz...',
})
const royaltyShareState = useInputState({
id: 'royalty-share',
name: 'royaltyShare',
title: 'Share Percentage',
subtitle: 'Percentage of royalties to be paid',
placeholder: '8%',
})
const { data, isLoading, mutate } = useMutation(
async (event: FormEvent): Promise<CreateBaseMinterResponse | null> => {
event.preventDefault()
if (!contract) {
throw new Error('Smart contract connection failed')
}
let royaltyInfo = null
if (royaltyPaymentAddressState.value && royaltyShareState.value) {
royaltyInfo = {
payment_address: royaltyPaymentAddressState.value,
share: (Number(royaltyShareState.value) / 100).toString(),
}
}
const msg = {
create_minter: {
collection_params: {
code_id: codeIdState.value,
name: nameState.value,
symbol: symbolState.value,
info: {
creator: creatorState.value,
description: descriptionState.value,
image: imageState.value,
external_link: externalLinkState.value || null,
explicit_content: explicit,
start_trading_time: timestamp ? (timestamp.getTime() * 1_000_000).toString() : null,
royalty_info: royaltyInfo,
},
},
},
}
return toast.promise(
contract
.use(BASE_FACTORY_ADDRESS)
?.createBaseMinter(wallet.address, msg, [coin('1000000000', 'ustars')]) as Promise<CreateBaseMinterResponse>,
{
loading: 'Instantiating contract...',
error: 'Instantiation failed!',
success: 'Instantiation success!',
},
)
},
{
onError: (error) => {
toast.error(String(error), { style: { maxWidth: 'none' } })
},
},
)
const txHash = data?.transactionHash
return (
<form className="py-6 px-12 space-y-4" onSubmit={mutate}>
<NextSeo title="Instantiate Base Minter Contract" />
<ContractPageHeader
description="Base Minter contract facilitates 1/1 minting."
link={links.Documentation}
title="Base Minter Contract"
/>
<LinkTabs activeIndex={0} data={baseMinterLinkTabs} />
<Conditional test={Boolean(data)}>
<Alert type="info">
<b>Instantiate success!</b> Here is the transaction result containing the contract address and the transaction
hash.
</Alert>
<JsonPreview content={data} title="Transaction Result" />
<br />
</Conditional>
<FormGroup subtitle="Information about your sg721 contract" title="SG721 Contract Details">
<NumberInput isRequired {...codeIdState} />
<TextInput isRequired {...nameState} />
<TextInput isRequired {...symbolState} />
</FormGroup>
<FormGroup subtitle="Information about your collection" title="Collection Details">
<TextInput isRequired {...creatorState} />
<FormTextArea isRequired {...descriptionState} />
<TextInput isRequired {...imageState} />
<TextInput {...externalLinkState} />
<FormControl htmlId="timestamp" subtitle="Trading start time (local)" title="Trading Start Time (optional)">
<InputDateTime minDate={new Date()} onChange={(date) => setTimestamp(date)} value={timestamp} />
</FormControl>
<div className="flex flex-col space-y-2">
<div>
<div className="flex">
<span className="mt-1 text-sm first-letter:capitalize">
Does the collection contain explicit content?
</span>
<div className="ml-2 font-bold form-check form-check-inline">
<input
checked={explicit}
className="peer sr-only"
id="explicitRadio1"
name="explicitRadioOptions1"
onClick={() => {
setExplicit(true)
}}
type="radio"
/>
<label
className="inline-block py-1 px-2 text-sm text-gray peer-checked:text-white hover:text-white peer-checked:bg-black hover:rounded-sm peer-checked:border-b-2 hover:border-b-2 peer-checked:border-plumbus hover:border-plumbus cursor-pointer form-check-label"
htmlFor="explicitRadio1"
>
YES
</label>
</div>
<div className="ml-2 font-bold form-check form-check-inline">
<input
checked={!explicit}
className="peer sr-only"
id="explicitRadio2"
name="explicitRadioOptions2"
onClick={() => {
setExplicit(false)
}}
type="radio"
/>
<label
className="inline-block py-1 px-2 text-sm text-gray peer-checked:text-white hover:text-white peer-checked:bg-black hover:rounded-sm peer-checked:border-b-2 hover:border-b-2 peer-checked:border-plumbus hover:border-plumbus cursor-pointer form-check-label"
htmlFor="explicitRadio2"
>
NO
</label>
</div>
</div>
</div>
</div>
</FormGroup>
<FormGroup subtitle="Information about royalty" title="Royalty Details (optional)">
<TextInput {...royaltyPaymentAddressState} />
<NumberInput {...royaltyShareState} />
</FormGroup>
<div className="flex items-center p-4">
<div className="flex-grow" />
<Button isLoading={isLoading} isWide rightIcon={<FaAsterisk />} type="submit">
Instantiate Contract
</Button>
</div>
</form>
)
}
export default withMetadata(BaseMinterInstantiatePage, { center: false })

View File

@ -1,16 +1,16 @@
import { Button } from 'components/Button'
import { ContractPageHeader } from 'components/ContractPageHeader'
import { useExecuteComboboxState } from 'components/contracts/minter/ExecuteCombobox.hooks'
import { useExecuteComboboxState } from 'components/contracts/baseMinter/ExecuteCombobox.hooks'
import { FormControl } from 'components/FormControl'
import { AddressInput, NumberInput } from 'components/forms/FormInput'
import { useInputState, useNumberInputState } from 'components/forms/FormInput.hooks'
import { JsonPreview } from 'components/JsonPreview'
import { LinkTabs } from 'components/LinkTabs'
import { minterLinkTabs } from 'components/LinkTabs.data'
import { baseMinterLinkTabs } from 'components/LinkTabs.data'
import { TransactionHash } from 'components/TransactionHash'
import { useContracts } from 'contexts/contracts'
import { useWallet } from 'contexts/wallet'
import type { MigrateResponse } from 'contracts/minter'
import type { MigrateResponse } from 'contracts/baseMinter'
import type { NextPage } from 'next'
import { useRouter } from 'next/router'
import { NextSeo } from 'next-seo'
@ -22,8 +22,8 @@ import { useMutation } from 'react-query'
import { withMetadata } from 'utils/layout'
import { links } from 'utils/links'
const MinterMigratePage: NextPage = () => {
const { minter: contract } = useContracts()
const BaseMinterMigratePage: NextPage = () => {
const { baseMinter: contract } = useContracts()
const wallet = useWallet()
const [lastTx, setLastTx] = useState('')
@ -34,15 +34,15 @@ const MinterMigratePage: NextPage = () => {
id: 'code-id',
name: 'code-id',
title: 'Code ID',
subtitle: 'Code ID of the New Minter',
subtitle: 'Code ID of the New Base Minter',
placeholder: '1',
})
const contractState = useInputState({
id: 'contract-address',
name: 'contract-address',
title: 'Minter Address',
subtitle: 'Address of the Minter contract',
title: 'Base Minter Address',
subtitle: 'Address of the Base Minter contract',
})
const contractAddress = contractState.value
@ -90,13 +90,13 @@ const MinterMigratePage: NextPage = () => {
return (
<section className="py-6 px-12 space-y-4">
<NextSeo title="Migrate Minter Contract" />
<NextSeo title="Migrate Base Minter Contract" />
<ContractPageHeader
description="Minter contract facilitates primary market vending machine style minting."
description="Base Minter contract facilitates 1/1 minting."
link={links.Documentation}
title="Minter Contract"
title="Base Minter Contract"
/>
<LinkTabs activeIndex={3} data={minterLinkTabs} />
<LinkTabs activeIndex={3} data={baseMinterLinkTabs} />
<form className="grid grid-cols-2 p-4 space-x-8" onSubmit={mutate}>
<div className="space-y-8">
@ -129,4 +129,4 @@ const MinterMigratePage: NextPage = () => {
)
}
export default withMetadata(MinterMigratePage, { center: false })
export default withMetadata(BaseMinterMigratePage, { center: false })

View File

@ -0,0 +1,116 @@
import clsx from 'clsx'
import { ContractPageHeader } from 'components/ContractPageHeader'
import { FormControl } from 'components/FormControl'
import { AddressInput } from 'components/forms/FormInput'
import { useInputState } from 'components/forms/FormInput.hooks'
import { JsonPreview } from 'components/JsonPreview'
import { LinkTabs } from 'components/LinkTabs'
import { baseMinterLinkTabs } from 'components/LinkTabs.data'
import { useContracts } from 'contexts/contracts'
import { useWallet } from 'contexts/wallet'
import type { QueryType } from 'contracts/baseMinter/messages/query'
import { dispatchQuery, QUERY_LIST } from 'contracts/baseMinter/messages/query'
import type { NextPage } from 'next'
import { useRouter } from 'next/router'
import { NextSeo } from 'next-seo'
import { useEffect, useState } from 'react'
import { toast } from 'react-hot-toast'
import { useQuery } from 'react-query'
import { withMetadata } from 'utils/layout'
import { links } from 'utils/links'
const BaseMinterQueryPage: NextPage = () => {
const { baseMinter: contract } = useContracts()
const wallet = useWallet()
const contractState = useInputState({
id: 'contract-address',
name: 'contract-address',
title: 'Base Minter Address',
subtitle: 'Address of the Base Minter contract',
})
const contractAddress = contractState.value
const addressState = useInputState({
id: 'address',
name: 'address',
title: 'Address',
subtitle: 'Address of the user - defaults to current address',
})
const address = addressState.value
const [type, setType] = useState<QueryType>('config')
const { data: response } = useQuery(
[contractAddress, type, contract, wallet, address] as const,
async ({ queryKey }) => {
const [_contractAddress, _type, _contract, _wallet] = queryKey
const messages = contract?.use(_contractAddress)
const result = await dispatchQuery({
address,
messages,
type,
})
return result
},
{
placeholderData: null,
onError: (error: any) => {
toast.error(error.message, { style: { maxWidth: 'none' } })
},
enabled: Boolean(contractAddress && contract && wallet),
},
)
const router = useRouter()
useEffect(() => {
if (contractAddress.length > 0) {
void router.replace({ query: { contractAddress } })
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [contractAddress])
useEffect(() => {
const initial = new URL(document.URL).searchParams.get('contractAddress')
if (initial && initial.length > 0) contractState.onChange(initial)
}, [])
return (
<section className="py-6 px-12 space-y-4">
<NextSeo title="Query Base Minter Contract" />
<ContractPageHeader
description="Base Minter contract facilitates 1/1 minting."
link={links.Documentation}
title="Base Minter Contract"
/>
<LinkTabs activeIndex={1} data={baseMinterLinkTabs} />
<div className="grid grid-cols-2 p-4 space-x-8">
<div className="space-y-8">
<AddressInput {...contractState} />
<FormControl htmlId="contract-query-type" subtitle="Type of query to be dispatched" title="Query Type">
<select
className={clsx(
'bg-white/10 rounded border-2 border-white/20 form-select',
'placeholder:text-white/50',
'focus:ring focus:ring-plumbus-20',
)}
id="contract-query-type"
name="query-type"
onChange={(e) => setType(e.target.value as QueryType)}
>
{QUERY_LIST.map(({ id, name }) => (
<option key={`query-${id}`} value={id}>
{name}
</option>
))}
</select>
</FormControl>
</div>
<JsonPreview content={contractAddress ? { type, response } : null} title="Query Response" />
</div>
</section>
)
}
export default withMetadata(BaseMinterQueryPage, { center: false })

View File

@ -1,8 +1,11 @@
import { Conditional } from 'components/Conditional'
import { HomeCard } from 'components/HomeCard'
import type { NextPage } from 'next'
// import Brand from 'public/brand/brand.svg'
import { withMetadata } from 'utils/layout'
import { BASE_FACTORY_ADDRESS } from '../../utils/constants'
const HomePage: NextPage = () => {
return (
<section className="px-8 pt-4 pb-16 mx-auto space-y-8 max-w-4xl">
@ -20,8 +23,21 @@ 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.
<Conditional test={BASE_FACTORY_ADDRESS !== undefined}>
<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>
</Conditional>
<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.

View File

@ -1,20 +1,20 @@
import { Button } from 'components/Button'
import { Conditional } from 'components/Conditional'
import { ContractPageHeader } from 'components/ContractPageHeader'
import { ExecuteCombobox } from 'components/contracts/minter/ExecuteCombobox'
import { useExecuteComboboxState } from 'components/contracts/minter/ExecuteCombobox.hooks'
import { ExecuteCombobox } from 'components/contracts/vendingMinter/ExecuteCombobox'
import { useExecuteComboboxState } from 'components/contracts/vendingMinter/ExecuteCombobox.hooks'
import { FormControl } from 'components/FormControl'
import { AddressInput, NumberInput } from 'components/forms/FormInput'
import { useInputState, useNumberInputState } from 'components/forms/FormInput.hooks'
import { InputDateTime } from 'components/InputDateTime'
import { JsonPreview } from 'components/JsonPreview'
import { LinkTabs } from 'components/LinkTabs'
import { minterLinkTabs } from 'components/LinkTabs.data'
import { vendingMinterLinkTabs } from 'components/LinkTabs.data'
import { TransactionHash } from 'components/TransactionHash'
import { useContracts } from 'contexts/contracts'
import { useWallet } from 'contexts/wallet'
import type { DispatchExecuteArgs } from 'contracts/minter/messages/execute'
import { dispatchExecute, isEitherType, previewExecutePayload } from 'contracts/minter/messages/execute'
import type { DispatchExecuteArgs } from 'contracts/vendingMinter/messages/execute'
import { dispatchExecute, isEitherType, previewExecutePayload } from 'contracts/vendingMinter/messages/execute'
import type { NextPage } from 'next'
import { useRouter } from 'next/router'
import { NextSeo } from 'next-seo'
@ -26,8 +26,8 @@ import { useMutation } from 'react-query'
import { withMetadata } from 'utils/layout'
import { links } from 'utils/links'
const MinterExecutePage: NextPage = () => {
const { minter: contract } = useContracts()
const VendingMinterExecutePage: NextPage = () => {
const { vendingMinter: contract } = useContracts()
const wallet = useWallet()
const [lastTx, setLastTx] = useState('')
@ -60,8 +60,8 @@ const MinterExecutePage: NextPage = () => {
const contractState = useInputState({
id: 'contract-address',
name: 'contract-address',
title: 'Minter Address',
subtitle: 'Address of the Minter contract',
title: 'Vending Minter Address',
subtitle: 'Address of the Vending Minter contract',
})
const contractAddress = contractState.value
@ -139,13 +139,13 @@ const MinterExecutePage: NextPage = () => {
return (
<section className="py-6 px-12 space-y-4">
<NextSeo title="Execute Minter Contract" />
<NextSeo title="Execute Vending Minter Contract" />
<ContractPageHeader
description="Minter contract facilitates primary market vending machine style minting."
description="Vending Minter contract facilitates primary market vending machine style minting."
link={links.Documentation}
title="Minter Contract"
title="Vending Minter Contract"
/>
<LinkTabs activeIndex={2} data={minterLinkTabs} />
<LinkTabs activeIndex={2} data={vendingMinterLinkTabs} />
<form className="grid grid-cols-2 p-4 space-x-8" onSubmit={mutate}>
<div className="space-y-8">
@ -181,4 +181,4 @@ const MinterExecutePage: NextPage = () => {
)
}
export default withMetadata(MinterExecutePage, { center: false })
export default withMetadata(VendingMinterExecutePage, { center: false })

View File

@ -0,0 +1 @@
export { default } from './instantiate'

View File

@ -11,7 +11,7 @@ import { FormTextArea } from 'components/forms/FormTextArea'
import { InputDateTime } from 'components/InputDateTime'
import { JsonPreview } from 'components/JsonPreview'
import { LinkTabs } from 'components/LinkTabs'
import { minterLinkTabs } from 'components/LinkTabs.data'
import { vendingMinterLinkTabs } from 'components/LinkTabs.data'
import { useContracts } from 'contexts/contracts'
import { useWallet } from 'contexts/wallet'
import type { NextPage } from 'next'
@ -25,9 +25,9 @@ import { VENDING_FACTORY_ADDRESS } from 'utils/constants'
import { withMetadata } from 'utils/layout'
import { links } from 'utils/links'
import type { CreateMinterResponse } from '../../../contracts/vendingFactory/contract'
import type { CreateVendingMinterResponse } from '../../../contracts/vendingFactory/contract'
const MinterInstantiatePage: NextPage = () => {
const VendingMinterInstantiatePage: NextPage = () => {
const wallet = useWallet()
const contract = useContracts().vendingFactory
@ -146,7 +146,7 @@ const MinterInstantiatePage: NextPage = () => {
})
const { data, isLoading, mutate } = useMutation(
async (event: FormEvent): Promise<CreateMinterResponse | null> => {
async (event: FormEvent): Promise<CreateVendingMinterResponse | null> => {
event.preventDefault()
if (!contract) {
throw new Error('Smart contract connection failed')
@ -206,7 +206,9 @@ const MinterInstantiatePage: NextPage = () => {
return toast.promise(
contract
.use(VENDING_FACTORY_ADDRESS)
?.createMinter(wallet.address, msg, [coin('1000000000', 'ustars')]) as Promise<CreateMinterResponse>,
?.createVendingMinter(wallet.address, msg, [
coin('1000000000', 'ustars'),
]) as Promise<CreateVendingMinterResponse>,
{
loading: 'Instantiating contract...',
error: 'Instantiation failed!',
@ -225,13 +227,13 @@ const MinterInstantiatePage: NextPage = () => {
return (
<form className="py-6 px-12 space-y-4" onSubmit={mutate}>
<NextSeo title="Instantiate Minter Contract" />
<NextSeo title="Instantiate Vending Minter Contract" />
<ContractPageHeader
description="Minter contract facilitates primary market vending machine style minting."
description="Vending Minter contract facilitates primary market vending machine style minting."
link={links.Documentation}
title="Minter Contract"
title="Vending Minter Contract"
/>
<LinkTabs activeIndex={0} data={minterLinkTabs} />
<LinkTabs activeIndex={0} data={vendingMinterLinkTabs} />
<Conditional test={Boolean(data)}>
<Alert type="info">
@ -329,4 +331,4 @@ const MinterInstantiatePage: NextPage = () => {
)
}
export default withMetadata(MinterInstantiatePage, { center: false })
export default withMetadata(VendingMinterInstantiatePage, { center: false })

View File

@ -0,0 +1,132 @@
import { Button } from 'components/Button'
import { ContractPageHeader } from 'components/ContractPageHeader'
import { useExecuteComboboxState } from 'components/contracts/vendingMinter/ExecuteCombobox.hooks'
import { FormControl } from 'components/FormControl'
import { AddressInput, NumberInput } from 'components/forms/FormInput'
import { useInputState, useNumberInputState } from 'components/forms/FormInput.hooks'
import { JsonPreview } from 'components/JsonPreview'
import { LinkTabs } from 'components/LinkTabs'
import { vendingMinterLinkTabs } from 'components/LinkTabs.data'
import { TransactionHash } from 'components/TransactionHash'
import { useContracts } from 'contexts/contracts'
import { useWallet } from 'contexts/wallet'
import type { MigrateResponse } from 'contracts/vendingMinter'
import type { NextPage } from 'next'
import { useRouter } from 'next/router'
import { NextSeo } from 'next-seo'
import type { FormEvent } from 'react'
import { useEffect, useState } from 'react'
import { toast } from 'react-hot-toast'
import { FaArrowRight } from 'react-icons/fa'
import { useMutation } from 'react-query'
import { withMetadata } from 'utils/layout'
import { links } from 'utils/links'
const VendingMinterMigratePage: NextPage = () => {
const { vendingMinter: contract } = useContracts()
const wallet = useWallet()
const [lastTx, setLastTx] = useState('')
const comboboxState = useExecuteComboboxState()
const type = comboboxState.value?.id
const codeIdState = useNumberInputState({
id: 'code-id',
name: 'code-id',
title: 'Code ID',
subtitle: 'Code ID of the New Vending Minter',
placeholder: '1',
})
const contractState = useInputState({
id: 'contract-address',
name: 'contract-address',
title: 'Vending Minter Address',
subtitle: 'Address of the Vending Minter contract',
})
const contractAddress = contractState.value
const { data, isLoading, mutate } = useMutation(
async (event: FormEvent): Promise<MigrateResponse | null> => {
event.preventDefault()
if (!contract) {
throw new Error('Smart contract connection failed')
}
if (!wallet.initialized) {
throw new Error('Please connect your wallet.')
}
const migrateMsg = {}
return toast.promise(contract.migrate(contractAddress, codeIdState.value, migrateMsg), {
error: `Migration failed!`,
loading: 'Executing message...',
success: (tx) => {
if (tx) {
setLastTx(tx.transactionHash)
}
return `Transaction success!`
},
})
},
{
onError: (error) => {
toast.error(String(error))
},
},
)
const router = useRouter()
useEffect(() => {
if (contractAddress.length > 0) {
void router.replace({ query: { contractAddress } })
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [contractAddress])
useEffect(() => {
const initial = new URL(document.URL).searchParams.get('contractAddress')
if (initial && initial.length > 0) contractState.onChange(initial)
}, [])
return (
<section className="py-6 px-12 space-y-4">
<NextSeo title="Migrate Vending Minter Contract" />
<ContractPageHeader
description="Vending Minter contract facilitates primary market vending machine style minting."
link={links.Documentation}
title="Vending Minter Contract"
/>
<LinkTabs activeIndex={3} data={vendingMinterLinkTabs} />
<form className="grid grid-cols-2 p-4 space-x-8" onSubmit={mutate}>
<div className="space-y-8">
<AddressInput {...contractState} />
<NumberInput isRequired {...codeIdState} />
</div>
<div className="space-y-8">
<div className="relative">
<Button className="absolute top-0 right-0" isLoading={isLoading} rightIcon={<FaArrowRight />} type="submit">
Execute
</Button>
<FormControl subtitle="View execution transaction hash" title="Transaction Hash">
<TransactionHash hash={lastTx} />
</FormControl>
</div>
<FormControl subtitle="View current message to be sent" title="Payload Preview">
<JsonPreview
content={{
sender: wallet.address,
contract: contractAddress,
code_id: codeIdState.value,
msg: {},
}}
isCopyable
/>
</FormControl>
</div>
</form>
</section>
)
}
export default withMetadata(VendingMinterMigratePage, { center: false })

View File

@ -6,11 +6,11 @@ import { AddressInput } from 'components/forms/FormInput'
import { useInputState } from 'components/forms/FormInput.hooks'
import { JsonPreview } from 'components/JsonPreview'
import { LinkTabs } from 'components/LinkTabs'
import { minterLinkTabs } from 'components/LinkTabs.data'
import { vendingMinterLinkTabs } from 'components/LinkTabs.data'
import { useContracts } from 'contexts/contracts'
import { useWallet } from 'contexts/wallet'
import type { QueryType } from 'contracts/minter/messages/query'
import { dispatchQuery, QUERY_LIST } from 'contracts/minter/messages/query'
import type { QueryType } from 'contracts/vendingMinter/messages/query'
import { dispatchQuery, QUERY_LIST } from 'contracts/vendingMinter/messages/query'
import type { NextPage } from 'next'
import { useRouter } from 'next/router'
import { NextSeo } from 'next-seo'
@ -20,15 +20,15 @@ import { useQuery } from 'react-query'
import { withMetadata } from 'utils/layout'
import { links } from 'utils/links'
const MinterQueryPage: NextPage = () => {
const { minter: contract } = useContracts()
const VendingMinterQueryPage: NextPage = () => {
const { vendingMinter: contract } = useContracts()
const wallet = useWallet()
const contractState = useInputState({
id: 'contract-address',
name: 'contract-address',
title: 'Minter Address',
subtitle: 'Address of the Minter contract',
title: 'Vending Minter Address',
subtitle: 'Address of the Vending Minter contract',
})
const contractAddress = contractState.value
@ -78,13 +78,13 @@ const MinterQueryPage: NextPage = () => {
return (
<section className="py-6 px-12 space-y-4">
<NextSeo title="Query Minter Contract" />
<NextSeo title="Query Vending Minter Contract" />
<ContractPageHeader
description="Minter contract facilitates primary market vending machine style minting."
description="Vending Minter contract facilitates primary market vending machine style minting."
link={links.Documentation}
title="Minter Contract"
title="Vending Minter Contract"
/>
<LinkTabs activeIndex={1} data={minterLinkTabs} />
<LinkTabs activeIndex={1} data={vendingMinterLinkTabs} />
<div className="grid grid-cols-2 p-4 space-x-8">
<div className="space-y-8">
@ -117,4 +117,4 @@ const MinterQueryPage: NextPage = () => {
)
}
export default withMetadata(MinterQueryPage, { center: false })
export default withMetadata(VendingMinterQueryPage, { center: false })

View File

@ -12,7 +12,7 @@ module.exports = {
theme: {
extend: {
colors: {
stargaze: { DEFAULT: '#DB2676' },
stargaze: { DEFAULT: '#DB2676', 80: '#C81F71' },
dark: { DEFAULT: '#06090B' },
gray: { DEFAULT: '#A9A9A9' },
'dark-gray': { DEFAULT: '#191D20' },

View File

@ -1,5 +1,5 @@
import type { Renderable } from 'react-hot-toast'
import { toast } from 'react-hot-toast'
import type { Renderable } from 'react-hot-toast/dist/core/types'
export async function copy(text: string, message: Renderable = 'Copied to clipboard!') {
try {

View File

@ -2,6 +2,9 @@ export const SG721_CODE_ID = parseInt(process.env.NEXT_PUBLIC_SG721_CODE_ID, 10)
export const WHITELIST_CODE_ID = parseInt(process.env.NEXT_PUBLIC_WHITELIST_CODE_ID, 10)
export const VENDING_MINTER_CODE_ID = parseInt(process.env.NEXT_PUBLIC_VENDING_MINTER_CODE_ID, 10)
export const VENDING_FACTORY_ADDRESS = process.env.NEXT_PUBLIC_VENDING_FACTORY_ADDRESS
export const BASE_FACTORY_ADDRESS = process.env.NEXT_PUBLIC_BASE_FACTORY_ADDRESS
export const SG721_NAME_ADDRESS = process.env.NEXT_PUBLIC_SG721_NAME_ADDRESS
export const BASE_MINTER_CODE_ID = parseInt(process.env.NEXT_PUBLIC_VENDING_MINTER_CODE_ID, 10)
export const PINATA_ENDPOINT_URL = process.env.NEXT_PUBLIC_PINATA_ENDPOINT_URL
export const NETWORK = process.env.NEXT_PUBLIC_NETWORK

View File

@ -4922,10 +4922,10 @@ globby@^11.0.4:
merge2 "^1.4.1"
slash "^3.0.0"
goober@^2.1.1:
version "2.1.9"
resolved "https://registry.npmjs.org/goober/-/goober-2.1.9.tgz"
integrity sha512-PAtnJbrWtHbfpJUIveG5PJIB6Mc9Kd0gimu9wZwPyA+wQUSeOeA4x4Ug16lyaaUUKZ/G6QEH1xunKOuXP1F4Vw==
goober@^2.1.10:
version "2.1.11"
resolved "https://registry.yarnpkg.com/goober/-/goober-2.1.11.tgz#bbd71f90d2df725397340f808dbe7acc3118e610"
integrity sha512-5SS2lmxbhqH0u9ABEWq7WPU69a4i2pYcHeCxqaNq6Cw3mnrF0ghWNM4tEGid4dKy8XNIAUbuThuozDHHKJVh3A==
hamt-sharding@^2.0.0:
version "2.0.1"
@ -6807,11 +6807,11 @@ react-hook-form@^7:
integrity sha512-DzjiM6o2vtDGNMB9I4yCqW8J21P314SboNG1O0obROkbg7KVS0I7bMtwSdKyapnCPjHgnxc3L7E5PEdISeEUcQ==
react-hot-toast@^2:
version "2.2.0"
resolved "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.2.0.tgz"
integrity sha512-248rXw13uhf/6TNDVzagX+y7R8J183rp7MwUMNkcrBRyHj/jWOggfXTGlM8zAOuh701WyVW+eUaWG2LeSufX9g==
version "2.4.0"
resolved "https://registry.yarnpkg.com/react-hot-toast/-/react-hot-toast-2.4.0.tgz#b91e7a4c1b6e3068fc599d3d83b4fb48668ae51d"
integrity sha512-qnnVbXropKuwUpriVVosgo8QrB+IaPJCpL8oBI6Ov84uvHZ5QQcTp2qg6ku2wNfgJl6rlQXJIQU5q+5lmPOutA==
dependencies:
goober "^2.1.1"
goober "^2.1.10"
react-icons@^4:
version "4.3.1"