Update Mint Rule: By Minter badge creation summary

This commit is contained in:
Serkan Reis 2023-02-27 18:33:57 +03:00
parent 57e16dfa8b
commit d30760e642

View File

@ -149,7 +149,7 @@ const BadgeCreationPage: NextPage = () => {
} }
: mintRule === 'by_minter' : mintRule === 'by_minter'
? { ? {
by_minter: designatedMinterState.value, by_minter: designatedMinterState.value.trim(),
} }
: { : {
by_keys: [keyState.value], by_keys: [keyState.value],
@ -284,52 +284,106 @@ const BadgeCreationPage: NextPage = () => {
</div> </div>
<div className="mx-10" ref={scrollRef}> <div className="mx-10" ref={scrollRef}>
<Conditional test={badgeId !== null}> <Conditional test={badgeId !== null}>
<Alert className="mt-5" type="info"> <Conditional test={mintRule === 'by_key'}>
<div className="flex flex-row"> <Alert className="mt-5" type="info">
<div> <div className="flex flex-row">
<div className="w-[384px] h-[384px]" ref={qrRef}> <div>
<QRCodeSVG <div className="w-[384px] h-[384px]" ref={qrRef}>
className="mx-auto" <QRCodeSVG
level="H" className="mx-auto"
size={384} level="H"
value={`${ size={384}
NETWORK === 'testnet' ? 'https://badges.publicawesome.dev' : 'https://badges.stargaze.zone' value={`${
}/?id=${badgeId as string}&key=${createdBadgeKey as string}`} NETWORK === 'testnet' ? 'https://badges.publicawesome.dev' : 'https://badges.stargaze.zone'
/> }/?id=${badgeId as string}&key=${createdBadgeKey as string}`}
/>
</div>
<div className="grid grid-cols-2 gap-2 mt-2 w-[384px]">
<Button
className="items-center w-full text-sm text-center rounded"
leftIcon={<FaSave />}
onClick={() => void handleDownloadQr()}
>
Download QR Code
</Button>
<Button
className="w-full text-sm text-center rounded"
isWide
leftIcon={<FaCopy />}
onClick={() => void copyClaimURL()}
variant="solid"
>
Copy Claim URL
</Button>
</div>
</div> </div>
<div className="grid grid-cols-2 gap-2 mt-2 w-[384px]"> <div className="ml-4 text-lg">
<Button Badge ID:{` ${badgeId as string}`}
className="items-center w-full text-sm text-center rounded" <br />
leftIcon={<FaSave />} Private Key:
onClick={() => void handleDownloadQr()} <Tooltip label="Click to copy the private key">
> <button
Download QR Code className="group flex space-x-2 font-mono text-base text-white/50 hover:underline"
</Button> onClick={() => void copy(createdBadgeKey as string)}
<Button type="button"
className="w-full text-sm text-center rounded" >
isWide <span>{truncateMiddle(createdBadgeKey ? createdBadgeKey : '', 32)}</span>
leftIcon={<FaCopy />} <FaCopy className="opacity-50 group-hover:opacity-100" />
onClick={() => void copyClaimURL()} </button>
variant="solid" </Tooltip>
> <br />
Copy Claim URL Transaction Hash: {' '}
</Button> <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={`${
NETWORK === 'testnet' ? 'https://badges.publicawesome.dev' : 'https://badges.stargaze.zone'
}/?id=${badgeId as string}&key=${createdBadgeKey as string}`}
>
here
</Anchor>{' '}
or scan the QR code to claim a badge.
</span>
</div>
<br />
<span className="mt-4">
You may download the QR code or copy the claim URL to share with others.
</span>
</div>
<br />
</div> </div>
</div> </div>
</Alert>
</Conditional>
<Conditional test={mintRule === 'by_minter'}>
<Alert className="mt-5" type="info">
<div className="ml-4 text-lg"> <div className="ml-4 text-lg">
Badge ID:{` ${badgeId as string}`} Badge ID:{` ${badgeId as string}`}
<br /> <br />
Private Key: Designated Minter Address: {` ${designatedMinterState.value}`}
<Tooltip label="Click to copy the private key">
<button
className="group flex space-x-2 font-mono text-base text-white/50 hover:underline"
onClick={() => void copy(createdBadgeKey as string)}
type="button"
>
<span>{truncateMiddle(createdBadgeKey ? createdBadgeKey : '', 32)}</span>
<FaCopy className="opacity-50 group-hover:opacity-100" />
</button>
</Tooltip>
<br /> <br />
Transaction Hash: {' '} Transaction Hash: {' '}
<Conditional test={NETWORK === 'testnet'}> <Conditional test={NETWORK === 'testnet'}>
@ -358,22 +412,19 @@ const BadgeCreationPage: NextPage = () => {
<Anchor <Anchor
className="text-stargaze hover:underline" className="text-stargaze hover:underline"
external external
href={`${ href={`/badges/actions/?badgeHubContractAddress=${BADGE_HUB_ADDRESS}&badgeId=${
NETWORK === 'testnet' ? 'https://badges.publicawesome.dev' : 'https://badges.stargaze.zone' badgeId as string
}/?id=${badgeId as string}&key=${createdBadgeKey as string}`} }`}
> >
here here
</Anchor>{' '} </Anchor>{' '}
or scan the QR code to claim a badge. and select Actions {'>'} Mint By Minter to mint a badge.
</span> </span>
</div> </div>
<br />
<span className="mt-4">You may download the QR code or copy the claim URL to share with others.</span>
</div> </div>
<br />
</div> </div>
</div> </Alert>
</Alert> </Conditional>
</Conditional> </Conditional>
</div> </div>