335 lines
12 KiB
TypeScript
335 lines
12 KiB
TypeScript
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 { vendingMinterLinkTabs } 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 { VENDING_FACTORY_ADDRESS } from 'utils/constants'
|
|
import { withMetadata } from 'utils/layout'
|
|
import { links } from 'utils/links'
|
|
|
|
import type { CreateVendingMinterResponse } from '../../../contracts/vendingFactory/contract'
|
|
|
|
const VendingMinterInstantiatePage: NextPage = () => {
|
|
const wallet = useWallet()
|
|
const contract = useContracts().vendingFactory
|
|
|
|
const [startDate, setStartDate] = useState<Date | undefined>(undefined)
|
|
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',
|
|
})
|
|
|
|
const creatorState = useInputState({
|
|
id: 'creator-address',
|
|
name: 'creatorAddress',
|
|
title: 'Creator Address',
|
|
placeholder: 'stars1234567890abcdefghijklmnopqrstuvwxyz...',
|
|
subtitle: 'Address of the collection creator',
|
|
})
|
|
|
|
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',
|
|
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 unitPriceState = useNumberInputState({
|
|
id: 'unit-price',
|
|
name: 'unitPrice',
|
|
title: 'Unit Price',
|
|
subtitle: 'Price of each tokens in collection',
|
|
placeholder: '50',
|
|
})
|
|
|
|
const baseTokenUriState = useInputState({
|
|
id: 'base-token-uri',
|
|
name: 'baseTokenUri',
|
|
title: 'Base Token URI',
|
|
subtitle: 'IPFS uri for the tokens',
|
|
placeholder: 'ipfs://bafybe....',
|
|
})
|
|
|
|
const tokenNumberState = useNumberInputState({
|
|
id: 'token-number',
|
|
name: 'tokenNumber',
|
|
title: 'Token Amount',
|
|
subtitle: 'Number of tokens in collection',
|
|
placeholder: '1000',
|
|
})
|
|
|
|
const perAddressLimitState = useNumberInputState({
|
|
id: 'per-address-limit',
|
|
name: 'perAddressLimit',
|
|
title: 'Per Address Limit',
|
|
subtitle: 'Limit of tokens per address',
|
|
placeholder: '5',
|
|
})
|
|
|
|
const whitelistAddressState = useInputState({
|
|
id: 'whitelist-address',
|
|
name: 'whitelistAddress',
|
|
title: 'Whitelist Address',
|
|
subtitle: 'Address to whitelist contract',
|
|
placeholder: 'stars1234567890abcdefghijklmnopqrstuvwxyz...',
|
|
})
|
|
|
|
const { data, isLoading, mutate } = useMutation(
|
|
async (event: FormEvent): Promise<CreateVendingMinterResponse | 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(),
|
|
}
|
|
}
|
|
|
|
if (tokenNumberState.value < 1 || tokenNumberState.value > 10000) {
|
|
throw new Error('Token amount must be between 1 and 10000')
|
|
}
|
|
|
|
if (perAddressLimitState.value < 1 || perAddressLimitState.value > 50) {
|
|
throw new Error('Per address limit must be between 1 and 50')
|
|
}
|
|
|
|
if (Number(unitPriceState.value) < 50) {
|
|
throw new Error('Unit price must be greater than 50 STARS')
|
|
}
|
|
|
|
if (!startDate) {
|
|
throw new Error('Start date is required')
|
|
}
|
|
|
|
const msg = {
|
|
create_minter: {
|
|
init_msg: {
|
|
base_token_uri: baseTokenUriState.value,
|
|
start_time: (startDate.getTime() * 1_000_000).toString(),
|
|
num_tokens: tokenNumberState.value,
|
|
mint_price: coin(String(Number(unitPriceState.value) * 1000000), 'ustars'),
|
|
per_address_limit: perAddressLimitState.value,
|
|
whitelist: whitelistAddressState.value || null,
|
|
},
|
|
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(VENDING_FACTORY_ADDRESS)
|
|
?.createVendingMinter(wallet.address, msg, [
|
|
coin('1000000000', 'ustars'),
|
|
]) as Promise<CreateVendingMinterResponse>,
|
|
{
|
|
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 Vending Minter Contract" />
|
|
<ContractPageHeader
|
|
description="Vending Minter contract facilitates primary market vending machine style minting."
|
|
link={links.Documentation}
|
|
title="Vending Minter Contract"
|
|
/>
|
|
<LinkTabs activeIndex={0} data={vendingMinterLinkTabs} />
|
|
|
|
<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">
|
|
<TextInput {...royaltyPaymentAddressState} />
|
|
<NumberInput {...royaltyShareState} />
|
|
</FormGroup>
|
|
|
|
<FormGroup subtitle="Information about your minting settings" title="Minting Details">
|
|
<NumberInput isRequired {...unitPriceState} />
|
|
<TextInput isRequired {...baseTokenUriState} />
|
|
<NumberInput isRequired {...tokenNumberState} />
|
|
<NumberInput isRequired {...perAddressLimitState} />
|
|
<FormControl htmlId="start-date" isRequired subtitle="Start time for the minting" title="Start Time">
|
|
<InputDateTime minDate={new Date()} onChange={(date) => setStartDate(date)} value={startDate} />
|
|
</FormControl>
|
|
<TextInput {...whitelistAddressState} />
|
|
</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(VendingMinterInstantiatePage, { center: false })
|