Mint Rule: By Keys summary with downloadable key pairs
This commit is contained in:
Serkan Reis
parent
cc31179516
commit
68c3d44d01
@ -17,8 +17,8 @@ import type { ImageUploadDetailsDataProps, MintRule } from 'components/badges/cr
|
||||
import { ImageUploadDetails } from 'components/badges/creation/ImageUploadDetails'
|
||||
import { Button } from 'components/Button'
|
||||
import { Conditional } from 'components/Conditional'
|
||||
import { NumberInput, TextInput } from 'components/forms/FormInput'
|
||||
import { useInputState, useNumberInputState } from 'components/forms/FormInput.hooks'
|
||||
import { TextInput } from 'components/forms/FormInput'
|
||||
import { useInputState } from 'components/forms/FormInput.hooks'
|
||||
import { Tooltip } from 'components/Tooltip'
|
||||
import { useContracts } from 'contexts/contracts'
|
||||
import { useWallet } from 'contexts/wallet'
|
||||
@ -63,6 +63,7 @@ const BadgeCreationPage: NextPage = () => {
|
||||
const [createdBadgeKey, setCreatedBadgeKey] = useState<string | undefined>(undefined)
|
||||
const [transactionHash, setTransactionHash] = useState<string | null>(null)
|
||||
const [keyPairs, setKeyPairs] = useState<{ publicKey: string; privateKey: string }[]>([])
|
||||
const [numberOfKeys, setNumberOfKeys] = useState(1)
|
||||
const qrRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
const keyState = useInputState({
|
||||
@ -72,14 +73,6 @@ const BadgeCreationPage: NextPage = () => {
|
||||
subtitle: 'Part of the key pair to be utilized for post-creation access control',
|
||||
})
|
||||
|
||||
const numberOfKeysState = useNumberInputState({
|
||||
id: 'numberOfKeys',
|
||||
name: 'numberOfKeys',
|
||||
title: 'Number of Keys',
|
||||
subtitle: 'The number of key pairs to be generated for post-creation access control',
|
||||
defaultValue: 1,
|
||||
})
|
||||
|
||||
const designatedMinterState = useInputState({
|
||||
id: 'designatedMinter',
|
||||
name: 'designatedMinter',
|
||||
@ -177,14 +170,18 @@ const BadgeCreationPage: NextPage = () => {
|
||||
type: 'create_badge',
|
||||
}
|
||||
if (mintRule !== 'by_keys') {
|
||||
setBadgeId(null)
|
||||
setIsAddingKeysComplete(false)
|
||||
const data = await badgeHubDispatchExecute(payload)
|
||||
console.log(data)
|
||||
setCreatingBadge(false)
|
||||
setTransactionHash(data.split(':')[0])
|
||||
setBadgeId(data.split(':')[1])
|
||||
} else {
|
||||
setBadgeId(null)
|
||||
setIsAddingKeysComplete(false)
|
||||
setKeyPairs([])
|
||||
const generatedKeyPairs = generateKeyPairs(numberOfKeysState.value)
|
||||
const generatedKeyPairs = generateKeyPairs(numberOfKeys)
|
||||
setKeyPairs(generatedKeyPairs)
|
||||
await badgeHubDispatchExecute(payload)
|
||||
.then(async (data) => {
|
||||
@ -282,7 +279,15 @@ const BadgeCreationPage: NextPage = () => {
|
||||
})
|
||||
}
|
||||
|
||||
// copy claim url to clipboard
|
||||
const handleDownloadKeys = () => {
|
||||
const element = document.createElement('a')
|
||||
const file = new Blob([JSON.stringify(keyPairs)], { type: 'text/plain' })
|
||||
element.href = URL.createObjectURL(file)
|
||||
element.download = `badge-${badgeId as string}-keys.json`
|
||||
document.body.appendChild(element)
|
||||
element.click()
|
||||
}
|
||||
|
||||
const copyClaimURL = async () => {
|
||||
const baseURL = NETWORK === 'testnet' ? 'https://badges.publicawesome.dev' : 'https://badges.stargaze.zone'
|
||||
const claimURL = `${baseURL}/?id=${badgeId as string}&key=${createdBadgeKey as string}`
|
||||
@ -428,6 +433,65 @@ const BadgeCreationPage: NextPage = () => {
|
||||
</div>
|
||||
</Alert>
|
||||
</Conditional>
|
||||
|
||||
<Conditional test={mintRule === 'by_keys'}>
|
||||
<Alert className="mt-5" type="info">
|
||||
<div className="ml-4 text-lg">
|
||||
Badge ID:{` ${badgeId as string}`}
|
||||
<br />
|
||||
Transaction Hash: {' '}
|
||||
<Conditional test={NETWORK === 'testnet'}>
|
||||
<Anchor
|
||||
className="text-stargaze hover:underline"
|
||||
external
|
||||
href={`${BLOCK_EXPLORER_URL}/tx/${transactionHash as string}`}
|
||||
>
|
||||
{transactionHash}
|
||||
</Anchor>
|
||||
</Conditional>
|
||||
<Conditional test={NETWORK === 'mainnet'}>
|
||||
<Anchor
|
||||
className="text-stargaze hover:underline"
|
||||
external
|
||||
href={`${BLOCK_EXPLORER_URL}/txs/${transactionHash as string}`}
|
||||
>
|
||||
{transactionHash}
|
||||
</Anchor>
|
||||
</Conditional>
|
||||
<br />
|
||||
<div className="text-base">
|
||||
<div className="flex-row pt-4 mt-4 border-t-2">
|
||||
<span>
|
||||
You may click{' '}
|
||||
<Anchor
|
||||
className="text-stargaze hover:underline"
|
||||
external
|
||||
href={`/badges/actions/?badgeHubContractAddress=${BADGE_HUB_ADDRESS}&badgeId=${
|
||||
badgeId as string
|
||||
}`}
|
||||
>
|
||||
here
|
||||
</Anchor>{' '}
|
||||
and select Actions {'>'} Add Keys to add (additional) whitelisted keys or select Actions {'>'}{' '}
|
||||
Mint by Keys to use one of the keys to mint a badge.
|
||||
</span>
|
||||
<br />
|
||||
<Conditional test={isAddingKeysComplete}>
|
||||
<div className="pt-2 mt-4 border-t-2">
|
||||
<span className="mt-2">
|
||||
Make sure to download the whitelisted keys added during badge creation.
|
||||
</span>
|
||||
<Button className="mt-2" onClick={() => handleDownloadKeys()}>
|
||||
Download Keys
|
||||
</Button>
|
||||
</div>
|
||||
</Conditional>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Alert>
|
||||
</Conditional>
|
||||
|
||||
<Conditional test={mintRule === 'by_minter'}>
|
||||
<Alert className="mt-5" type="info">
|
||||
<div className="ml-4 text-lg">
|
||||
@ -499,6 +563,7 @@ const BadgeCreationPage: NextPage = () => {
|
||||
onClick={() => {
|
||||
setMintRule('by_key')
|
||||
setReadyToCreateBadge(false)
|
||||
setBadgeId(null)
|
||||
}}
|
||||
type="button"
|
||||
>
|
||||
@ -521,6 +586,7 @@ const BadgeCreationPage: NextPage = () => {
|
||||
onClick={() => {
|
||||
setMintRule('by_keys')
|
||||
setReadyToCreateBadge(false)
|
||||
setBadgeId(null)
|
||||
}}
|
||||
type="button"
|
||||
>
|
||||
@ -543,6 +609,7 @@ const BadgeCreationPage: NextPage = () => {
|
||||
onClick={() => {
|
||||
setMintRule('by_minter')
|
||||
setReadyToCreateBadge(false)
|
||||
setBadgeId(null)
|
||||
}}
|
||||
type="button"
|
||||
>
|
||||
@ -568,7 +635,21 @@ const BadgeCreationPage: NextPage = () => {
|
||||
|
||||
<Conditional test={mintRule === 'by_keys'}>
|
||||
<div className="flex flex-row justify-start py-3 px-8 mb-3 w-full rounded border-2 border-white/20">
|
||||
<NumberInput className="ml-4 w-full max-w-2xl" {...numberOfKeysState} required />
|
||||
<div className="grid grid-cols-2 gap-24">
|
||||
<div className="flex flex-col ml-4">
|
||||
<span className="font-bold">Number of Keys</span>
|
||||
<span className="text-sm text-white/80">
|
||||
The number of key pairs to be whitelisted for post-creation access control
|
||||
</span>
|
||||
</div>
|
||||
<input
|
||||
className="p-2 ml-1 w-1/4 max-w-2xl bg-white/10 rounded border-2 border-white/20"
|
||||
onChange={(e) => setNumberOfKeys(Number(e.target.value))}
|
||||
required
|
||||
type="number"
|
||||
value={numberOfKeys}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Conditional>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user