Badge Details > Badge creation payload
This commit is contained in:
Serkan Reis
parent
a3c5a23095
commit
8c3556cf9c
@ -5,7 +5,6 @@
|
||||
|
||||
import clsx from 'clsx'
|
||||
import { FormControl } from 'components/FormControl'
|
||||
import { FormGroup } from 'components/FormGroup'
|
||||
import { useInputState, useNumberInputState } from 'components/forms/FormInput.hooks'
|
||||
import { useMetadataAttributesState } from 'components/forms/MetadataAttributes.hooks'
|
||||
import { InputDateTime } from 'components/InputDateTime'
|
||||
@ -20,7 +19,7 @@ import type { MintRule, UploadMethod } from './ImageUploadDetails'
|
||||
|
||||
interface BadgeDetailsProps {
|
||||
onChange: (data: BadgeDetailsDataProps) => void
|
||||
uploadMethod: UploadMethod
|
||||
uploadMethod: UploadMethod | undefined
|
||||
mintRule: MintRule
|
||||
}
|
||||
|
||||
@ -30,7 +29,7 @@ export interface BadgeDetailsDataProps {
|
||||
description?: string
|
||||
attributes?: Trait[]
|
||||
expiry?: number
|
||||
transferrable?: boolean
|
||||
transferrable: boolean
|
||||
max_supply?: number
|
||||
image_data?: string
|
||||
external_url?: string
|
||||
@ -39,7 +38,7 @@ export interface BadgeDetailsDataProps {
|
||||
youtube_url?: string
|
||||
}
|
||||
|
||||
export const BadgeDetails = ({ onChange, uploadMethod, mintRule }: BadgeDetailsProps) => {
|
||||
export const BadgeDetails = ({ onChange }: BadgeDetailsProps) => {
|
||||
const wallet = useWallet()
|
||||
const [timestamp, setTimestamp] = useState<Date | undefined>(undefined)
|
||||
const [transferrable, setTransferrable] = useState<boolean>(false)
|
||||
@ -49,7 +48,7 @@ export const BadgeDetails = ({ onChange, uploadMethod, mintRule }: BadgeDetailsP
|
||||
name: 'manager',
|
||||
title: 'Manager',
|
||||
subtitle: 'Badge Hub Manager',
|
||||
defaultValue: wallet.address,
|
||||
defaultValue: wallet.address ? wallet.address : '',
|
||||
})
|
||||
|
||||
const nameState = useInputState({
|
||||
@ -127,6 +126,7 @@ export const BadgeDetails = ({ onChange, uploadMethod, mintRule }: BadgeDetailsP
|
||||
: undefined,
|
||||
expiry: timestamp ? timestamp.getTime() * 1000000 : undefined,
|
||||
max_supply: maxSupplyState.value || undefined,
|
||||
transferrable,
|
||||
image_data: imageDataState.value || undefined,
|
||||
external_url: externalUrlState.value || undefined,
|
||||
background_color: backgroundColorState.value || undefined,
|
||||
@ -154,44 +154,51 @@ export const BadgeDetails = ({ onChange, uploadMethod, mintRule }: BadgeDetailsP
|
||||
youtubeUrlState.value,
|
||||
])
|
||||
|
||||
useEffect(() => {
|
||||
if (attributesState.values.length === 0)
|
||||
attributesState.add({
|
||||
trait_type: '',
|
||||
value: '',
|
||||
})
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div>
|
||||
<FormGroup subtitle="Information about your collection" title="Collection Details">
|
||||
<div className={clsx('grid grid-cols-2 -ml-16 max-w-5xl')}>
|
||||
<div className={clsx('ml-0')}>
|
||||
<AddressInput {...managerState} isRequired />
|
||||
<TextInput {...nameState} />
|
||||
<TextInput className="mt-2" {...descriptionState} />
|
||||
<NumberInput className="mt-2" {...maxSupplyState} />
|
||||
<div>
|
||||
<MetadataAttributes
|
||||
attributes={attributesState.entries}
|
||||
onAdd={attributesState.add}
|
||||
onChange={attributesState.update}
|
||||
onRemove={attributesState.remove}
|
||||
title="Traits"
|
||||
<div className={clsx('grid grid-cols-2 ml-4 max-w-5xl')}>
|
||||
<div className={clsx('mt-2')}>
|
||||
<AddressInput {...managerState} isRequired />
|
||||
<TextInput className="mt-2" {...nameState} />
|
||||
<TextInput className="mt-2" {...descriptionState} />
|
||||
<NumberInput className="mt-2" {...maxSupplyState} />
|
||||
<TextInput className="mt-2" {...externalUrlState} />
|
||||
<FormControl className="mt-2" htmlId="expiry-date" subtitle="Badge minting expiry date" title="Expiry Date">
|
||||
<InputDateTime minDate={new Date()} onChange={(date) => setTimestamp(date)} value={timestamp} />
|
||||
</FormControl>
|
||||
<div className="mt-2 form-control">
|
||||
<label className="justify-start cursor-pointer label">
|
||||
<span className="mr-4 font-bold">Transferrable</span>
|
||||
<input
|
||||
checked={transferrable}
|
||||
className={`toggle ${transferrable ? `bg-stargaze` : `bg-gray-600`}`}
|
||||
onClick={() => setTransferrable(!transferrable)}
|
||||
type="checkbox"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className={clsx('ml-10')}>
|
||||
<TextInput {...externalUrlState} />
|
||||
<FormControl htmlId="expiry-date" subtitle="Badge minting expiry date" title="Expiry Date">
|
||||
<InputDateTime minDate={new Date()} onChange={(date) => setTimestamp(date)} value={timestamp} />
|
||||
</FormControl>
|
||||
<div className="mt-2 form-control">
|
||||
<label className="justify-start cursor-pointer label">
|
||||
<span className="mr-4 font-bold">Transferrable</span>
|
||||
<input
|
||||
checked={transferrable}
|
||||
className={`toggle ${transferrable ? `bg-stargaze` : `bg-gray-600`}`}
|
||||
onClick={() => setTransferrable(!transferrable)}
|
||||
type="checkbox"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</FormGroup>
|
||||
<div className={clsx('ml-10')}>
|
||||
<div>
|
||||
<MetadataAttributes
|
||||
attributes={attributesState.entries}
|
||||
onAdd={attributesState.add}
|
||||
onChange={attributesState.update}
|
||||
onRemove={attributesState.remove}
|
||||
title="Traits"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -2,11 +2,14 @@
|
||||
/* eslint-disable @typescript-eslint/no-unsafe-argument */
|
||||
/* eslint-disable @typescript-eslint/no-unsafe-member-access */
|
||||
|
||||
import { coin } from '@cosmjs/proto-signing'
|
||||
//import { coin } from '@cosmjs/proto-signing'
|
||||
import clsx from 'clsx'
|
||||
import { Alert } from 'components/Alert'
|
||||
import { Anchor } from 'components/Anchor'
|
||||
import { ImageUploadDetails, ImageUploadDetailsDataProps } from 'components/badges/creation/ImageUploadDetails'
|
||||
import type { BadgeDetailsDataProps } from 'components/badges/creation/BadgeDetails'
|
||||
import { BadgeDetails } from 'components/badges/creation/BadgeDetails'
|
||||
import type { ImageUploadDetailsDataProps, MintRule } from 'components/badges/creation/ImageUploadDetails'
|
||||
import { ImageUploadDetails } from 'components/badges/creation/ImageUploadDetails'
|
||||
import { Button } from 'components/Button'
|
||||
import { Conditional } from 'components/Conditional'
|
||||
import { LoadingModal } from 'components/LoadingModal'
|
||||
@ -24,11 +27,8 @@ import { BADGE_HUB_ADDRESS, BLOCK_EXPLORER_URL, NETWORK, STARGAZE_URL } from 'ut
|
||||
import { withMetadata } from 'utils/layout'
|
||||
import { links } from 'utils/links'
|
||||
|
||||
import type { MintRule } from 'components/badges/creation/ImageUploadDetails'
|
||||
import type { UploadMethod } from '../../components/badges/creation/ImageUploadDetails'
|
||||
import { ConfirmationModal } from '../../components/ConfirmationModal'
|
||||
// import { ConfirmationModal } from '../../components/ConfirmationModal'
|
||||
// import { badgeHub } from '../../contracts/badgeHub/contract'
|
||||
// import { getAssetType } from '../../utils/getAssetType'
|
||||
// import { isValidAddress } from '../../utils/isValidAddress'
|
||||
|
||||
const BadgeCreationPage: NextPage = () => {
|
||||
@ -39,7 +39,7 @@ const BadgeCreationPage: NextPage = () => {
|
||||
const badgeHubMessages = useMemo(() => badgeHubContract?.use(BADGE_HUB_ADDRESS), [badgeHubContract, wallet.address])
|
||||
|
||||
const [imageUploadDetails, setImageUploadDetails] = useState<ImageUploadDetailsDataProps | null>(null)
|
||||
// const [collectionDetails, setCollectionDetails] = useState<CollectionDetailsDataProps | null>(null)
|
||||
const [badgeDetails, setBadgeDetails] = useState<BadgeDetailsDataProps | null>(null)
|
||||
// const [baseMinterDetails, setBaseMinterDetails] = useState<BaseMinterDetailsDataProps | null>(null)
|
||||
|
||||
const [uploading, setUploading] = useState(false)
|
||||
@ -58,7 +58,7 @@ const BadgeCreationPage: NextPage = () => {
|
||||
try {
|
||||
setReadyToCreateBadge(false)
|
||||
checkImageUploadDetails()
|
||||
//checkMetadataDetails()
|
||||
// checkMetadataDetails()
|
||||
setReadyToCreateBadge(true)
|
||||
} catch (error: any) {
|
||||
toast.error(error.message, { style: { maxWidth: 'none' } })
|
||||
@ -98,53 +98,42 @@ const BadgeCreationPage: NextPage = () => {
|
||||
}
|
||||
}
|
||||
|
||||
const createNewBadge = async (baseUri: string, coverImageUri: string, whitelist?: string) => {
|
||||
const createNewBadge = async () => {
|
||||
if (!wallet.initialized) throw new Error('Wallet not connected')
|
||||
if (!badgeHubContract) throw new Error('Contract not found')
|
||||
|
||||
// const msg = {
|
||||
// create_minter: {
|
||||
// init_msg: {
|
||||
// base_token_uri: `${uploadDetails?.uploadMethod === 'new' ? `ipfs://${baseUri}` : `${baseUri}`}`,
|
||||
// start_time: mintingDetails?.startTime,
|
||||
// num_tokens: mintingDetails?.numTokens,
|
||||
// mint_price: {
|
||||
// amount: mintingDetails?.unitPrice,
|
||||
// denom: 'ustars',
|
||||
// },
|
||||
// per_address_limit: mintingDetails?.perAddressLimit,
|
||||
// whitelist,
|
||||
// },
|
||||
// collection_params: {
|
||||
// code_id: SG721_CODE_ID,
|
||||
// name: collectionDetails?.name,
|
||||
// symbol: collectionDetails?.symbol,
|
||||
// info: {
|
||||
// creator: wallet.address,
|
||||
// description: collectionDetails?.description,
|
||||
// image: `${
|
||||
// uploadDetails?.uploadMethod === 'new'
|
||||
// ? `ipfs://${coverImageUri}/${collectionDetails?.imageFile[0].name as string}`
|
||||
// : `${coverImageUri}`
|
||||
// }`,
|
||||
// external_link: collectionDetails?.externalLink,
|
||||
// explicit_content: collectionDetails?.explicit,
|
||||
// royalty_info: royaltyInfo,
|
||||
// start_trading_time: collectionDetails?.startTradingTime || null,
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// }
|
||||
await handleImageUrl()
|
||||
|
||||
const badge = {
|
||||
manager: badgeDetails?.manager as string,
|
||||
metadata: {
|
||||
name: badgeDetails?.name || undefined,
|
||||
description: badgeDetails?.description || undefined,
|
||||
image: imageUrl || undefined,
|
||||
image_data: badgeDetails?.image_data || undefined,
|
||||
external_url: badgeDetails?.external_url || undefined,
|
||||
attributes: badgeDetails?.attributes || undefined,
|
||||
background_color: badgeDetails?.background_color || undefined,
|
||||
animation_url: badgeDetails?.animation_url || undefined,
|
||||
youtube_url: badgeDetails?.youtube_url || undefined,
|
||||
},
|
||||
transferrable: badgeDetails?.transferrable as boolean,
|
||||
rule: {
|
||||
by_key: '024d529b81a16c1310cbf9d26f2b8c57e9e03179ba68fdcd1824ae1dc5cb3cb02c',
|
||||
},
|
||||
expiry: badgeDetails?.expiry || undefined,
|
||||
max_supply: badgeDetails?.max_supply || undefined,
|
||||
}
|
||||
|
||||
const msg = {}
|
||||
const payload: BadgeHubDispatchExecuteArgs = {
|
||||
contract: BADGE_HUB_ADDRESS,
|
||||
messages: badgeHubMessages,
|
||||
txSigner: wallet.address,
|
||||
msg,
|
||||
funds: [coin('3000000000', 'ustars')],
|
||||
badge,
|
||||
type: 'create_badge',
|
||||
}
|
||||
const data = await badgeHubDispatchExecute(payload)
|
||||
console.log(data)
|
||||
// setTransactionHash(data.transactionHash)
|
||||
// setBadgeId(data.id)
|
||||
}
|
||||
@ -364,23 +353,22 @@ const BadgeCreationPage: NextPage = () => {
|
||||
<ImageUploadDetails mintRule={mintRule} onChange={setImageUploadDetails} />
|
||||
|
||||
<div className="flex justify-between py-3 px-8 rounded border-2 border-white/20 grid-col-2">
|
||||
<MetadataDetails
|
||||
coverImageUrl={coverImageUrl as string}
|
||||
minterType={minterType}
|
||||
onChange={setCollectionDetails}
|
||||
uploadMethod={uploadDetails?.uploadMethod as UploadMethod}
|
||||
<BadgeDetails
|
||||
mintRule={mintRule}
|
||||
onChange={setBadgeDetails}
|
||||
uploadMethod={imageUploadDetails?.uploadMethod ? imageUploadDetails.uploadMethod : 'new'}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Conditional test={readyToCreateBadge}>
|
||||
{/* <Conditional test={readyToCreateBadge}>
|
||||
<ConfirmationModal confirm={createNewBadge} />
|
||||
</Conditional>
|
||||
</Conditional> */}
|
||||
|
||||
<div className="flex justify-end w-full">
|
||||
<Button
|
||||
className="relative justify-center p-2 mb-6 max-h-12 text-white bg-plumbus hover:bg-plumbus-light border-0"
|
||||
isLoading={creatingBadge}
|
||||
onClick={performBadgeCreationChecks}
|
||||
onClick={() => console.log('create badge')}
|
||||
variant="solid"
|
||||
>
|
||||
Create Badge
|
||||
|
||||
Loading…
Reference in New Issue
Block a user