354 lines
13 KiB
TypeScript
354 lines
13 KiB
TypeScript
/* eslint-disable eslint-comments/disable-enable-pair */
|
|
/* eslint-disable no-nested-ternary */
|
|
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 { AddressList } from 'components/forms/AddressList'
|
|
import { useAddressListState } from 'components/forms/AddressList.hooks'
|
|
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 { type WhitelistFlexMember, WhitelistFlexUpload } from 'components/WhitelistFlexUpload'
|
|
import { WhitelistUpload } from 'components/WhitelistUpload'
|
|
import { vendingMinterList } from 'config/minter'
|
|
import type { TokenInfo } from 'config/token'
|
|
import { stars, tokensList } from 'config/token'
|
|
import { useContracts } from 'contexts/contracts'
|
|
import { useGlobalSettings } from 'contexts/globalSettings'
|
|
import type { InstantiateResponse } from 'contracts/sg721'
|
|
import type { NextPage } from 'next'
|
|
import { NextSeo } from 'next-seo'
|
|
import { type FormEvent, useEffect, useState } from 'react'
|
|
import { toast } from 'react-hot-toast'
|
|
import { FaAsterisk } from 'react-icons/fa'
|
|
import { useMutation } from 'react-query'
|
|
import { isValidAddress } from 'utils/isValidAddress'
|
|
import { withMetadata } from 'utils/layout'
|
|
import { links } from 'utils/links'
|
|
import { useWallet } from 'utils/wallet'
|
|
|
|
import { WHITELIST_CODE_ID, WHITELIST_FLEX_CODE_ID } from '../../../utils/constants'
|
|
|
|
const WhitelistInstantiatePage: NextPage = () => {
|
|
const wallet = useWallet()
|
|
const { whitelist: contract } = useContracts()
|
|
const { timezone } = useGlobalSettings()
|
|
|
|
const [startDate, setStartDate] = useState<Date | undefined>(undefined)
|
|
const [endDate, setEndDate] = useState<Date | undefined>(undefined)
|
|
const [adminsMutable, setAdminsMutable] = useState<boolean>(true)
|
|
const [whitelistType, setWhitelistType] = useState<'standard' | 'flex'>('standard')
|
|
|
|
const [whitelistStandardArray, setWhitelistStandardArray] = useState<string[]>([])
|
|
const [whitelistFlexArray, setWhitelistFlexArray] = useState<WhitelistFlexMember[]>([])
|
|
|
|
const [selectedMintToken, setSelectedMintToken] = useState<TokenInfo | undefined>(stars)
|
|
|
|
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 whaleCapState = useNumberInputState({
|
|
id: 'whale-cap',
|
|
name: 'whaleCap',
|
|
title: 'Whale Cap (optional)',
|
|
subtitle: 'Maximum number of tokens a single address can mint',
|
|
})
|
|
|
|
const addressListState = useAddressListState()
|
|
|
|
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 standardMsg = {
|
|
members: whitelistStandardArray,
|
|
start_time: (startDate.getTime() * 1_000_000).toString(),
|
|
end_time: (endDate.getTime() * 1_000_000).toString(),
|
|
mint_price: coin(String(Number(unitPriceState.value) * 1000000), selectedMintToken?.denom || 'ustars'),
|
|
per_address_limit: perAddressLimitState.value,
|
|
member_limit: memberLimitState.value,
|
|
admins: [
|
|
...new Set(
|
|
addressListState.values
|
|
.map((a) => a.address.trim())
|
|
.filter((address) => address !== '' && isValidAddress(address.trim()) && address.startsWith('stars')),
|
|
),
|
|
] || [wallet.address],
|
|
admins_mutable: adminsMutable,
|
|
}
|
|
|
|
const flexMsg = {
|
|
members: whitelistFlexArray,
|
|
start_time: (startDate.getTime() * 1_000_000).toString(),
|
|
end_time: (endDate.getTime() * 1_000_000).toString(),
|
|
mint_price: coin(String(Number(unitPriceState.value) * 1000000), selectedMintToken?.denom || 'ustars'),
|
|
whale_cap: whaleCapState.value || undefined,
|
|
member_limit: memberLimitState.value,
|
|
admins: [
|
|
...new Set(
|
|
addressListState.values
|
|
.map((a) => a.address.trim())
|
|
.filter((address) => address !== '' && isValidAddress(address.trim()) && address.startsWith('stars')),
|
|
),
|
|
] || [wallet.address],
|
|
admins_mutable: adminsMutable,
|
|
}
|
|
|
|
return toast.promise(
|
|
contract.instantiate(
|
|
whitelistType === 'standard' ? WHITELIST_CODE_ID : WHITELIST_FLEX_CODE_ID,
|
|
whitelistType === 'standard' ? standardMsg : flexMsg,
|
|
whitelistType === 'standard' ? 'Stargaze Whitelist Contract' : 'Stargaze Whitelist Flex Contract',
|
|
wallet.address,
|
|
),
|
|
{
|
|
loading: 'Instantiating contract...',
|
|
error: 'Instantiation failed!',
|
|
success: 'Instantiation success!',
|
|
},
|
|
)
|
|
},
|
|
{
|
|
onError: (error) => {
|
|
toast.error(String(error), { style: { maxWidth: 'none' } })
|
|
},
|
|
},
|
|
)
|
|
|
|
const whitelistFileOnChange = (whitelistData: string[]) => {
|
|
setWhitelistStandardArray(whitelistData)
|
|
}
|
|
|
|
const whitelistFlexFileOnChange = (whitelistData: WhitelistFlexMember[]) => {
|
|
setWhitelistFlexArray(whitelistData)
|
|
}
|
|
|
|
useEffect(() => {
|
|
setWhitelistStandardArray([])
|
|
setWhitelistFlexArray([])
|
|
}, [whitelistType])
|
|
|
|
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} />
|
|
|
|
<div className="flex justify-between mb-5 ml-6 max-w-[300px] text-lg font-bold">
|
|
<div className="form-check form-check-inline">
|
|
<input
|
|
checked={whitelistType === 'standard'}
|
|
className="peer sr-only"
|
|
id="inlineRadio1"
|
|
name="inlineRadioOptions3"
|
|
onClick={() => {
|
|
setWhitelistType('standard')
|
|
}}
|
|
type="radio"
|
|
value="nft-storage"
|
|
/>
|
|
<label
|
|
className="inline-block py-1 px-2 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="inlineRadio1"
|
|
>
|
|
Standard Whitelist
|
|
</label>
|
|
</div>
|
|
|
|
<div className="form-check form-check-inline">
|
|
<input
|
|
checked={whitelistType === 'flex'}
|
|
className="peer sr-only"
|
|
id="inlineRadio2"
|
|
name="inlineRadioOptions2"
|
|
onClick={() => {
|
|
setWhitelistType('flex')
|
|
}}
|
|
type="radio"
|
|
value="flex"
|
|
/>
|
|
<label
|
|
className="inline-block py-1 px-2 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="inlineRadio2"
|
|
>
|
|
Whitelist Flex
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<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>
|
|
|
|
<div className="mt-2 ml-3 w-1/3 form-control">
|
|
<label className="justify-start cursor-pointer label">
|
|
<span className="mr-4 font-bold">Mutable Administrator Addresses</span>
|
|
<input
|
|
checked={adminsMutable}
|
|
className={`toggle ${adminsMutable ? `bg-stargaze` : `bg-gray-600`}`}
|
|
onClick={() => setAdminsMutable(!adminsMutable)}
|
|
type="checkbox"
|
|
/>
|
|
</label>
|
|
</div>
|
|
<div className="my-4 ml-4 w-1/2">
|
|
<AddressList
|
|
entries={addressListState.entries}
|
|
isRequired
|
|
onAdd={addressListState.add}
|
|
onChange={addressListState.update}
|
|
onRemove={addressListState.remove}
|
|
subtitle="The list of administrator addresses"
|
|
title="Administrator Addresses"
|
|
/>
|
|
</div>
|
|
|
|
<FormGroup subtitle="Your whitelisted addresses" title="Whitelist File">
|
|
<Conditional test={whitelistType === 'standard'}>
|
|
<WhitelistUpload onChange={whitelistFileOnChange} />
|
|
<Conditional test={whitelistStandardArray.length > 0}>
|
|
<JsonPreview content={whitelistStandardArray} initialState={false} title="File Contents" />
|
|
</Conditional>
|
|
</Conditional>
|
|
<Conditional test={whitelistType === 'flex'}>
|
|
<WhitelistFlexUpload onChange={whitelistFlexFileOnChange} />
|
|
<Conditional test={whitelistFlexArray.length > 0}>
|
|
<JsonPreview content={whitelistFlexArray} initialState={false} title="File Contents" />
|
|
</Conditional>
|
|
</Conditional>
|
|
</FormGroup>
|
|
|
|
<FormGroup subtitle="Information about your minting settings" title="Minting Details">
|
|
<div className="flex flex-row items-center">
|
|
<NumberInput {...unitPriceState} isRequired />
|
|
<select
|
|
className="py-[9px] px-4 mt-14 ml-2 placeholder:text-white/50 bg-white/10 rounded border-2 border-white/20 focus:ring focus:ring-plumbus-20"
|
|
onChange={(e) => setSelectedMintToken(tokensList.find((t) => t.displayName === e.target.value))}
|
|
value={selectedMintToken?.displayName}
|
|
>
|
|
{vendingMinterList
|
|
.filter((minter) => minter.factoryAddress !== undefined && minter.updatable === false)
|
|
.map((minter) => (
|
|
<option key={minter.id} className="bg-black" value={minter.supportedToken.displayName}>
|
|
{minter.supportedToken.displayName}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
<NumberInput isRequired {...memberLimitState} />
|
|
<Conditional test={whitelistType === 'standard'}>
|
|
<NumberInput isRequired {...perAddressLimitState} />
|
|
</Conditional>
|
|
<Conditional test={whitelistType === 'flex'}>
|
|
<NumberInput {...whaleCapState} />
|
|
</Conditional>
|
|
<FormControl
|
|
htmlId="start-date"
|
|
isRequired
|
|
subtitle={`Start time for minting ${timezone === 'Local' ? '(local)' : '(UTC)'}`}
|
|
title="Start Time"
|
|
>
|
|
<InputDateTime
|
|
minDate={
|
|
timezone === 'Local' ? new Date() : new Date(Date.now() + new Date().getTimezoneOffset() * 60 * 1000)
|
|
}
|
|
onChange={(date) =>
|
|
setStartDate(
|
|
timezone === 'Local' ? date : new Date(date.getTime() - new Date().getTimezoneOffset() * 60 * 1000),
|
|
)
|
|
}
|
|
value={
|
|
timezone === 'Local'
|
|
? startDate
|
|
: startDate
|
|
? new Date(startDate.getTime() + new Date().getTimezoneOffset() * 60 * 1000)
|
|
: undefined
|
|
}
|
|
/>
|
|
</FormControl>
|
|
<FormControl
|
|
htmlId="end-date"
|
|
isRequired
|
|
subtitle={`End time for minting ${timezone === 'Local' ? '(local)' : '(UTC)'}`}
|
|
title="End Time"
|
|
>
|
|
<InputDateTime
|
|
minDate={
|
|
timezone === 'Local' ? new Date() : new Date(Date.now() + new Date().getTimezoneOffset() * 60 * 1000)
|
|
}
|
|
onChange={(date) =>
|
|
setEndDate(
|
|
timezone === 'Local' ? date : new Date(date.getTime() - new Date().getTimezoneOffset() * 60 * 1000),
|
|
)
|
|
}
|
|
value={
|
|
timezone === 'Local'
|
|
? endDate
|
|
: endDate
|
|
? new Date(endDate.getTime() + new Date().getTimezoneOffset() * 60 * 1000)
|
|
: undefined
|
|
}
|
|
/>
|
|
</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(WhitelistInstantiatePage, { center: false })
|