114 lines
3.7 KiB
TypeScript
114 lines
3.7 KiB
TypeScript
import { Alert } from 'components/Alert'
|
|
import { Button } from 'components/Button'
|
|
import { Conditional } from 'components/Conditional'
|
|
import { ContractPageHeader } from 'components/ContractPageHeader'
|
|
import { FormGroup } from 'components/FormGroup'
|
|
import { TextInput } from 'components/forms/FormInput'
|
|
import { useInputState } from 'components/forms/FormInput.hooks'
|
|
import { JsonPreview } from 'components/JsonPreview'
|
|
import { LinkTabs } from 'components/LinkTabs'
|
|
import { cw721BaseLinkTabs } from 'components/LinkTabs.data'
|
|
import { useContracts } from 'contexts/contracts'
|
|
import { useWallet } from 'contexts/wallet'
|
|
import type { InstantiateResponse } from 'contracts/cw721/base'
|
|
import type { NextPage } from 'next'
|
|
import { NextSeo } from 'next-seo'
|
|
import type { FormEvent } from 'react'
|
|
import { toast } from 'react-hot-toast'
|
|
import { FaAsterisk } from 'react-icons/fa'
|
|
import { useMutation } from 'react-query'
|
|
import { CW721_BASE_CODE_ID } from 'utils/constants'
|
|
import { withMetadata } from 'utils/layout'
|
|
import { links } from 'utils/links'
|
|
|
|
const CW721BaseInstantiatePage: NextPage = () => {
|
|
const wallet = useWallet()
|
|
const contract = useContracts().cw721Base
|
|
|
|
const nameState = useInputState({
|
|
id: 'name',
|
|
name: 'name',
|
|
title: 'Name',
|
|
placeholder: 'My Awesome CW721 Contract',
|
|
})
|
|
|
|
const symbolState = useInputState({
|
|
id: 'symbol',
|
|
name: 'symbol',
|
|
title: 'Symbol',
|
|
placeholder: 'AWSM',
|
|
})
|
|
|
|
const minterState = useInputState({
|
|
id: 'minter-address',
|
|
name: 'minterAddress',
|
|
title: 'Minter Address',
|
|
placeholder: 'stars1234567890abcdefghijklmnopqrstuvwxyz...',
|
|
})
|
|
|
|
const { data, isLoading, mutate } = useMutation(
|
|
async (event: FormEvent): Promise<InstantiateResponse | null> => {
|
|
event.preventDefault()
|
|
if (!contract) {
|
|
throw new Error('Smart contract connection failed')
|
|
}
|
|
const msg = {
|
|
name: nameState.value,
|
|
symbol: symbolState.value,
|
|
minter: minterState.value,
|
|
}
|
|
return toast.promise(
|
|
contract.instantiate(CW721_BASE_CODE_ID, msg, 'StargazeTools CW721 Base Contract', wallet.address),
|
|
{
|
|
loading: 'Instantiating contract...',
|
|
error: 'Instantiation failed!',
|
|
success: 'Instantiation success!',
|
|
},
|
|
)
|
|
},
|
|
{
|
|
onError: (error) => {
|
|
toast.error(String(error))
|
|
},
|
|
},
|
|
)
|
|
|
|
const txHash = data?.transactionHash
|
|
|
|
return (
|
|
<form className="py-6 px-12 space-y-4" onSubmit={mutate}>
|
|
<NextSeo title="Instantiate CW721 Base Contract" />
|
|
<ContractPageHeader
|
|
description="CW721 Base is a specification for non fungible tokens based on CosmWasm."
|
|
link={links['Docs CW721 Base']}
|
|
title="CW721 Base Contract"
|
|
/>
|
|
<LinkTabs activeIndex={0} data={cw721BaseLinkTabs} />
|
|
|
|
<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="Basic information about your new contract" title="Contract Details">
|
|
<TextInput isRequired {...nameState} />
|
|
<TextInput isRequired {...symbolState} />
|
|
<TextInput isRequired {...minterState} />
|
|
</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(CW721BaseInstantiatePage, { center: false })
|