stargaze-studio/pages/contracts/whitelist/instantiate.tsx
name-user1 039b8b424b
Launchpad V2 sync (#34)
* V2 Sync

* v2 sync

* Launchpad V2 sync

* Update trading start time description

* Add explicit_content to CollectionDetails update dependencies

* Minor UI changes

* Update MintPriceMessage interface

* Add symbolState.value to CollectionDetails update dependencies

* Add external_link to Collection Details

* Remove the tab Instantiate from the minter contract dashboard

* Add price check for update_minting_price

* Implement dynamic per address limit check

* Add checks for trading start time

* Update Minter Contract Dashboard Instantiate Tab - 1

* Update Minter Contract Dashboard Instantiate Tab - 2

* Remove Instantiate tab from SG721 Contract Dashboard

* Update whitelist contract helpers

* Update whitelist instantiate fee wrt member limit

Co-authored-by: name-user1 <eray@deuslabs.fi>
Co-authored-by: Serkan Reis <serkanreis@gmail.com>
2022-10-20 19:02:52 -06:00

152 lines
5.5 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 } from 'components/forms/FormInput'
import { useNumberInputState } from 'components/forms/FormInput.hooks'
import { InputDateTime } from 'components/InputDateTime'
import { JsonPreview } from 'components/JsonPreview'
import { LinkTabs } from 'components/LinkTabs'
import { whitelistLinkTabs } from 'components/LinkTabs.data'
import { WhitelistUpload } from 'components/WhitelistUpload'
import { useContracts } from 'contexts/contracts'
import { useWallet } from 'contexts/wallet'
import type { InstantiateResponse } from 'contracts/sg721'
import type { NextPage } from 'next'
import { NextSeo } from 'next-seo'
import { type FormEvent, useState } from 'react'
import { toast } from 'react-hot-toast'
import { FaAsterisk } from 'react-icons/fa'
import { useMutation } from 'react-query'
import { WHITELIST_CODE_ID } from 'utils/constants'
import { withMetadata } from 'utils/layout'
import { links } from 'utils/links'
const Sg721InstantiatePage: NextPage = () => {
const wallet = useWallet()
const { whitelist: contract } = useContracts()
const [startDate, setStartDate] = useState<Date | undefined>(undefined)
const [endDate, setEndDate] = useState<Date | undefined>(undefined)
const [whitelistArray, setWhitelistArray] = useState<string[]>([])
const unitPriceState = useNumberInputState({
id: 'unit-price',
name: 'unitPrice',
title: 'Unit Price',
subtitle: 'Price of each tokens in collection',
placeholder: '500',
})
const memberLimitState = useNumberInputState({
id: 'member-limit',
name: 'memberLimit',
title: 'Member Limit',
subtitle: 'Limit of the whitelisted members',
placeholder: '1000',
})
const perAddressLimitState = useNumberInputState({
id: 'per-address-limit',
name: 'perAddressLimit',
title: 'Per Address Limit',
subtitle: 'Limit of tokens per address',
placeholder: '5',
})
const { data, isLoading, mutate } = useMutation(
async (event: FormEvent): Promise<InstantiateResponse | null> => {
event.preventDefault()
if (!contract) {
throw new Error('Smart contract connection failed')
}
if (!startDate) {
throw new Error('Start date is required')
}
if (!endDate) {
throw new Error('End date is required')
}
const msg = {
members: whitelistArray,
start_time: (startDate.getTime() * 1_000_000).toString(),
end_time: (endDate.getTime() * 1_000_000).toString(),
mint_price: coin(String(Number(unitPriceState.value) * 1000000), 'ustars'),
per_address_limit: perAddressLimitState.value,
member_limit: memberLimitState.value,
}
return toast.promise(
contract.instantiate(WHITELIST_CODE_ID, msg, 'Stargaze Whitelist Contract', wallet.address),
{
loading: 'Instantiating contract...',
error: 'Instantiation failed!',
success: 'Instantiation success!',
},
)
},
{
onError: (error) => {
toast.error(String(error))
},
},
)
const whitelistFileOnChange = (whitelistData: string[]) => {
setWhitelistArray(whitelistData)
}
return (
<form className="py-6 px-12 space-y-4" onSubmit={mutate}>
<NextSeo title="Instantiate Whitelist Contract" />
<ContractPageHeader
description="Whitelist contract manages the whitelisted addresses for the collection."
link={links.Documentation}
title="Whitelist Contract"
/>
<LinkTabs activeIndex={0} data={whitelistLinkTabs} />
<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="Your whitelisted addresses" title="Whitelist File">
<WhitelistUpload onChange={whitelistFileOnChange} />
<Conditional test={whitelistArray.length > 0}>
<JsonPreview content={whitelistArray} initialState={false} title="File Contents" />
</Conditional>
</FormGroup>
<FormGroup subtitle="Information about your minting settings" title="Minting Details">
<NumberInput isRequired {...unitPriceState} />
<NumberInput isRequired {...memberLimitState} />
<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>
<FormControl htmlId="end-date" isRequired subtitle="End time for the minting" title="End Time">
<InputDateTime minDate={new Date()} onChange={(date) => setEndDate(date)} value={endDate} />
</FormControl>
</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(Sg721InstantiatePage, { center: false })