Display badge creation fee estimate

components/badges/creation/BadgeDetails.tsx

@@ -3,7 +3,9 @@
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 
+import { toUtf8 } from '@cosmjs/encoding'
 import clsx from 'clsx'
+import { Conditional } from 'components/Conditional'
 import { FormControl } from 'components/FormControl'
 import { useInputState, useNumberInputState } from 'components/forms/FormInput.hooks'
 import { useMetadataAttributesState } from 'components/forms/MetadataAttributes.hooks'
@@ -13,6 +15,7 @@ import type { Trait } from 'contracts/badgeHub'
 import type { ChangeEvent } from 'react'
 import { useEffect, useRef, useState } from 'react'
 import { toast } from 'react-hot-toast'
+import { BADGE_HUB_ADDRESS } from 'utils/constants'
 
 import { AddressInput, NumberInput, TextInput } from '../../forms/FormInput'
 import { MetadataAttributes } from '../../forms/MetadataAttributes'
@@ -22,6 +25,7 @@ interface BadgeDetailsProps {
   onChange: (data: BadgeDetailsDataProps) => void
   uploadMethod: UploadMethod | undefined
   mintRule: MintRule
+  metadataSize: number
 }
 
 export interface BadgeDetailsDataProps {
@@ -39,11 +43,12 @@ export interface BadgeDetailsDataProps {
   youtube_url?: string
 }
 
-export const BadgeDetails = ({ onChange }: BadgeDetailsProps) => {
+export const BadgeDetails = ({ metadataSize, onChange }: BadgeDetailsProps) => {
   const wallet = useWallet()
   const [timestamp, setTimestamp] = useState<Date | undefined>(undefined)
   const [transferrable, setTransferrable] = useState<boolean>(false)
   const [metadataFile, setMetadataFile] = useState<File>()
+  const [metadataFeeRate, setMetadataFeeRate] = useState<number>(0)
 
   const metadataFileRef = useRef<HTMLInputElement | null>(null)
 
@@ -259,6 +264,26 @@ export const BadgeDetails = ({ onChange }: BadgeDetailsProps) => {
     youtubeUrlState.value,
   ])
 
+  useEffect(() => {
+    const retrieveFeeRate = async () => {
+      try {
+        if (wallet.client) {
+          const feeRateRaw = await wallet.client.queryContractRaw(
+            BADGE_HUB_ADDRESS,
+            toUtf8(Buffer.from(Buffer.from('fee_rate').toString('hex'), 'hex').toString()),
+          )
+          console.log('Fee Rate Raw: ', feeRateRaw)
+          const feeRate = JSON.parse(new TextDecoder().decode(feeRateRaw as Uint8Array))
+          setMetadataFeeRate(Number(feeRate.metadata))
+        }
+      } catch (error) {
+        toast.error('Error retrieving metadata fee rate.')
+        console.log('Error retrieving fee rate: ', error)
+      }
+    }
+    void retrieveFeeRate()
+  }, [wallet.client])
+
   return (
     <div>
       <div className={clsx('grid grid-cols-2 ml-4 max-w-5xl')}>
@@ -272,16 +297,24 @@ export const BadgeDetails = ({ onChange }: BadgeDetailsProps) => {
           <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">
+          <div className="grid grid-cols-2">
-            <label className="justify-start cursor-pointer label">
+            <div className="mt-2 w-1/3 form-control">
-              <span className="mr-4 font-bold">Transferrable</span>
+              <label className="justify-start cursor-pointer label">
-              <input
+                <span className="mr-4 font-bold">Transferrable</span>
-                checked={transferrable}
+                <input
-                className={`toggle ${transferrable ? `bg-stargaze` : `bg-gray-600`}`}
+                  checked={transferrable}
-                onClick={() => setTransferrable(!transferrable)}
+                  className={`toggle ${transferrable ? `bg-stargaze` : `bg-gray-600`}`}
-                type="checkbox"
+                  onClick={() => setTransferrable(!transferrable)}
-              />
+                  type="checkbox"
-            </label>
+                />
+              </label>
+            </div>
+            <Conditional test={managerState.value !== ''}>
+              <div className="grid grid-cols-2 ml-12 w-full">
+                <div className="mt-4 font-bold">Fee Estimate:</div>
+                <span className="mt-4">{(metadataSize * Number(metadataFeeRate)) / 1000000} stars</span>
+              </div>
+            </Conditional>
           </div>
         </div>
         <div className={clsx('ml-10')}>

pages/badges/create.tsx

@@ -23,12 +23,14 @@ import { useInputState } from 'components/forms/FormInput.hooks'
 import { Tooltip } from 'components/Tooltip'
 import { useContracts } from 'contexts/contracts'
 import { useWallet } from 'contexts/wallet'
+import type { Badge } from 'contracts/badgeHub'
 import type { DispatchExecuteArgs as BadgeHubDispatchExecuteArgs } from 'contracts/badgeHub/messages/execute'
 import { dispatchExecute as badgeHubDispatchExecute } from 'contracts/badgeHub/messages/execute'
 import * as crypto from 'crypto'
 import { toPng } from 'html-to-image'
 import type { NextPage } from 'next'
 import { NextSeo } from 'next-seo'
+import sizeof from 'object-sizeof'
 import { QRCodeSVG } from 'qrcode.react'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { toast } from 'react-hot-toast'
@@ -60,6 +62,7 @@ const BadgeCreationPage: NextPage = () => {
   const [readyToCreateBadge, setReadyToCreateBadge] = useState(false)
   const [mintRule, setMintRule] = useState<MintRule>('by_key')
   const [resolvedMinterAddress, setResolvedMinterAddress] = useState<string>('')
+  const [tempBadge, setTempBadge] = useState<Badge>()
 
   const [badgeId, setBadgeId] = useState<string | null>(null)
   const [imageUrl, setImageUrl] = useState<string | null>(null)
@@ -139,6 +142,37 @@ const BadgeCreationPage: NextPage = () => {
     void resolveMinterAddress()
   }, [designatedMinterState.value])
 
+  useEffect(() => {
+    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:
+        mintRule === 'by_key'
+          ? {
+              by_key: keyState.value,
+            }
+          : mintRule === 'by_minter'
+          ? {
+              by_minter: resolvedMinterAddress,
+            }
+          : 'by_keys',
+      expiry: badgeDetails?.expiry || undefined,
+      max_supply: badgeDetails?.max_supply || undefined,
+    }
+    setTempBadge(badge)
+  }, [badgeDetails, keyState.value, mintRule, resolvedMinterAddress, imageUrl])
+
   const createNewBadge = async () => {
     try {
       if (!wallet.initialized) throw new Error('Wallet not connected')
@@ -672,6 +706,11 @@ const BadgeCreationPage: NextPage = () => {
 
         <div className="flex justify-between py-3 px-8 rounded border-2 border-white/20 grid-col-2">
           <BadgeDetails
+            metadataSize={
+              tempBadge?.metadata.image === undefined
+                ? Number(sizeof(tempBadge)) + Number(sizeof(tempBadge?.metadata.attributes)) + 150
+                : Number(sizeof(tempBadge)) + Number(sizeof(tempBadge.metadata.attributes))
+            }
             mintRule={mintRule}
             onChange={setBadgeDetails}
             uploadMethod={imageUploadDetails?.uploadMethod ? imageUploadDetails.uploadMethod : 'new'}