301 lines
12 KiB
TypeScript
301 lines
12 KiB
TypeScript
/* eslint-disable eslint-comments/disable-enable-pair */
|
|
/* eslint-disable no-nested-ternary */
|
|
import { toUtf8 } from '@cosmjs/encoding'
|
|
import { Alert } from 'components/Alert'
|
|
import { Button } from 'components/Button'
|
|
import { Conditional } from 'components/Conditional'
|
|
import { ContractPageHeader } from 'components/ContractPageHeader'
|
|
import { ExecuteCombobox } from 'components/contracts/whitelist/ExecuteCombobox'
|
|
import { useExecuteComboboxState } from 'components/contracts/whitelist/ExecuteCombobox.hooks'
|
|
import { FormControl } from 'components/FormControl'
|
|
import { AddressList } from 'components/forms/AddressList'
|
|
import { useAddressListState } from 'components/forms/AddressList.hooks'
|
|
import { FlexMemberAttributes } from 'components/forms/FlexMemberAttributes'
|
|
import { useFlexMemberAttributesState } from 'components/forms/FlexMemberAttributes.hooks'
|
|
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 { whitelistLinkTabs } from 'components/LinkTabs.data'
|
|
import { TransactionHash } from 'components/TransactionHash'
|
|
import type { WhitelistFlexMember } from 'components/WhitelistFlexUpload'
|
|
import { WhitelistFlexUpload } from 'components/WhitelistFlexUpload'
|
|
import { WhitelistUpload } from 'components/WhitelistUpload'
|
|
import { useContracts } from 'contexts/contracts'
|
|
import { useWallet } from 'contexts/wallet'
|
|
import type { DispatchExecuteArgs } from 'contracts/whitelist/messages/execute'
|
|
import { dispatchExecute, isEitherType, previewExecutePayload } from 'contracts/whitelist/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 { useDebounce } from 'utils/debounce'
|
|
import { isValidAddress } from 'utils/isValidAddress'
|
|
import { withMetadata } from 'utils/layout'
|
|
import { links } from 'utils/links'
|
|
|
|
const WhitelistExecutePage: NextPage = () => {
|
|
const { whitelist: contract } = useContracts()
|
|
const wallet = useWallet()
|
|
|
|
const [lastTx, setLastTx] = useState('')
|
|
const [memberList, setMemberList] = useState<string[]>([])
|
|
const [flexMemberList, setFlexMemberList] = useState<WhitelistFlexMember[]>([])
|
|
const [whitelistType, setWhitelistType] = useState<'standard' | 'flex'>('standard')
|
|
|
|
const comboboxState = useExecuteComboboxState()
|
|
const type = comboboxState.value?.id
|
|
|
|
const [timestamp, setTimestamp] = useState<Date | undefined>()
|
|
|
|
const addressListState = useAddressListState()
|
|
|
|
const flexAddressListState = useFlexMemberAttributesState()
|
|
|
|
const contractState = useInputState({
|
|
id: 'contract-address',
|
|
name: 'contract-address',
|
|
title: 'Whitelist Address',
|
|
subtitle: 'Address of the Whitelist contract',
|
|
})
|
|
const contractAddress = contractState.value
|
|
|
|
const debouncedWhitelistContractState = useDebounce(contractState.value, 300)
|
|
|
|
const limitState = useNumberInputState({
|
|
id: 'limit',
|
|
name: 'limit',
|
|
title: 'Limit',
|
|
subtitle: 'Limit value',
|
|
placeholder: '5',
|
|
})
|
|
|
|
const showLimitState = isEitherType(type, ['update_per_address_limit', 'increase_member_limit'])
|
|
const showTimestamp = isEitherType(type, ['update_start_time', 'update_end_time'])
|
|
const showMemberList = isEitherType(type, ['add_members'])
|
|
const showFlexMemberList = isEitherType(type, ['add_members'])
|
|
const showRemoveMemberList = isEitherType(type, ['remove_members'])
|
|
const showAdminList = isEitherType(type, ['update_admins'])
|
|
|
|
const messages = useMemo(() => contract?.use(contractState.value), [contract, contractState.value])
|
|
const payload: DispatchExecuteArgs = {
|
|
contract: contractState.value,
|
|
messages,
|
|
type,
|
|
limit: limitState.value,
|
|
timestamp: timestamp ? (timestamp.getTime() * 1_000_000).toString() : '',
|
|
members:
|
|
whitelistType === 'standard'
|
|
? [
|
|
...new Set(
|
|
addressListState.values
|
|
.map((a) => a.address.trim())
|
|
.filter((address) => address !== '' && isValidAddress(address.trim()) && address.startsWith('stars'))
|
|
.concat(memberList),
|
|
),
|
|
]
|
|
: type === 'add_members'
|
|
? [
|
|
...new Set(
|
|
flexAddressListState.values
|
|
.concat(flexMemberList)
|
|
.filter((obj, index, self) => index === self.findIndex((t) => t.address.trim() === obj.address.trim()))
|
|
.filter(
|
|
(member) =>
|
|
member.address !== '' &&
|
|
isValidAddress(member.address.trim()) &&
|
|
member.address.startsWith('stars'),
|
|
)
|
|
.map((member) => {
|
|
return {
|
|
address: member.address.trim(),
|
|
mint_count: Math.round(member.mint_count),
|
|
}
|
|
}),
|
|
),
|
|
]
|
|
: [
|
|
...new Set(
|
|
addressListState.values
|
|
.map((a) => a.address.trim())
|
|
.filter((address) => address !== '' && isValidAddress(address.trim()) && address.startsWith('stars'))
|
|
.concat(memberList),
|
|
),
|
|
],
|
|
admins: [
|
|
...new Set(
|
|
addressListState.values
|
|
.map((a) => a.address.trim())
|
|
.filter((address) => address !== '' && isValidAddress(address.trim()) && address.startsWith('stars')),
|
|
),
|
|
] || [wallet.address],
|
|
}
|
|
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)
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
flexAddressListState.reset()
|
|
flexAddressListState.add({
|
|
address: '',
|
|
mint_count: 0,
|
|
})
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
async function getWhitelistContractType() {
|
|
if (wallet.client && debouncedWhitelistContractState.length > 0) {
|
|
const client = wallet.client
|
|
const data = await toast.promise(
|
|
client.queryContractRaw(
|
|
debouncedWhitelistContractState,
|
|
toUtf8(Buffer.from(Buffer.from('contract_info').toString('hex'), 'hex').toString()),
|
|
),
|
|
{
|
|
loading: 'Retrieving Whitelist type...',
|
|
error: 'Whitelist type retrieval failed.',
|
|
success: 'Whitelist type retrieved.',
|
|
},
|
|
)
|
|
const contractType: string = JSON.parse(new TextDecoder().decode(data as Uint8Array)).contract
|
|
console.log(contractType)
|
|
return contractType
|
|
}
|
|
}
|
|
void getWhitelistContractType()
|
|
.then((contractType) => {
|
|
if (contractType?.includes('flex')) {
|
|
setWhitelistType('flex')
|
|
} else {
|
|
setWhitelistType('standard')
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
console.log(err)
|
|
setWhitelistType('standard')
|
|
console.log('Unable to retrieve contract type. Defaulting to "standard".')
|
|
})
|
|
}, [debouncedWhitelistContractState, wallet.client])
|
|
|
|
return (
|
|
<section className="py-6 px-12 space-y-4">
|
|
<NextSeo title="Execute Whitelist Contract" />
|
|
<ContractPageHeader
|
|
description="Whitelist contract manages the whitelisted addresses for the collection."
|
|
link={links.Documentation}
|
|
title="Whitelist Contract"
|
|
/>
|
|
<LinkTabs activeIndex={2} data={whitelistLinkTabs} />
|
|
|
|
<form className="grid grid-cols-2 p-4 space-x-8" onSubmit={mutate}>
|
|
<div className="space-y-8">
|
|
<AddressInput {...contractState} />
|
|
<ExecuteCombobox {...comboboxState} />
|
|
<Conditional test={showLimitState}>
|
|
<NumberInput {...limitState} />
|
|
</Conditional>
|
|
<Conditional test={showTimestamp}>
|
|
<FormControl
|
|
htmlId="timestamp"
|
|
isRequired
|
|
subtitle={`${type === 'update_start_time' ? 'Start' : 'End'} time for the minting`}
|
|
title={`${type === 'update_start_time' ? 'Start' : 'End'} Time`}
|
|
>
|
|
<InputDateTime minDate={new Date()} onChange={(date) => setTimestamp(date)} value={timestamp} />
|
|
</FormControl>
|
|
</Conditional>
|
|
<Conditional test={(whitelistType === 'standard' && showMemberList) || showAdminList || showRemoveMemberList}>
|
|
<AddressList
|
|
entries={addressListState.entries}
|
|
isRequired
|
|
onAdd={addressListState.add}
|
|
onChange={addressListState.update}
|
|
onRemove={addressListState.remove}
|
|
subtitle={type === 'update_admins' ? 'Enter the admin addresses' : 'Enter the member addresses'}
|
|
title="Addresses"
|
|
/>
|
|
<Conditional test={whitelistType === 'standard' && showMemberList}>
|
|
<Alert className="mt-8" type="info">
|
|
You may optionally choose a text file of additional member addresses.
|
|
</Alert>
|
|
<WhitelistUpload onChange={setMemberList} />
|
|
</Conditional>
|
|
</Conditional>
|
|
|
|
<Conditional test={whitelistType === 'flex' && showFlexMemberList}>
|
|
<FlexMemberAttributes
|
|
attributes={flexAddressListState.entries}
|
|
onAdd={flexAddressListState.add}
|
|
onChange={flexAddressListState.update}
|
|
onRemove={flexAddressListState.remove}
|
|
subtitle="Enter the member addresses and corresponding mint counts"
|
|
title="Members"
|
|
/>
|
|
<Conditional test={whitelistType === 'flex' && showFlexMemberList}>
|
|
<Alert className="mt-8" type="info">
|
|
You may optionally choose a .csv file of additional member addresses and mint counts.
|
|
</Alert>
|
|
<WhitelistFlexUpload onChange={setFlexMemberList} />
|
|
</Conditional>
|
|
</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(WhitelistExecutePage, { center: false })
|