Update Badge Hub dashboard > Query

contracts/badgeHub/contract.ts

@@ -63,7 +63,7 @@ export interface BadgeHubInstance {
   getBadge: (id: number) => Promise<any>
   getBadges: (start_after?: number, limit?: number) => Promise<any>
   getKey: (id: number, pubkey: string) => Promise<any>
-  getKeys: (id: number, start_after?: number, limit?: number) => Promise<any>
+  getKeys: (id: number, start_after?: string, limit?: number) => Promise<any>
 
   //Execute
   createBadge: (senderAddress: string, badge: Badge) => Promise<string>
@@ -249,14 +249,14 @@ export const badgeHub = (client: SigningCosmWasmClient, txSigner: string): Badge
       return res
     }
 
-    const getKey = async (id: number, key: string): Promise<any> => {
+    const getKey = async (id: number, pubkey: string): Promise<any> => {
       const res = await client.queryContractSmart(contractAddress, {
-        key: { id, key },
+        key: { id, pubkey },
       })
       return res
     }
 
-    const getKeys = async (id: number, start_after?: number, limit?: number): Promise<any> => {
+    const getKeys = async (id: number, start_after?: string, limit?: number): Promise<any> => {
       const res = await client.queryContractSmart(contractAddress, {
         keys: { id, start_after, limit },
       })

contracts/badgeHub/messages/query.ts

@@ -13,9 +13,9 @@ export interface QueryListItem {
 export const QUERY_LIST: QueryListItem[] = [
   { id: 'config', name: 'Config', description: 'View current config' },
   { id: 'getBadge', name: 'Query Badge', description: 'Query a badge by ID' },
-  { id: 'getBadges', name: 'Query a list of Badges', description: 'Query the list of badges' },
-  { id: 'getKey', name: 'Query Key', description: 'Query a key by ID' },
-  { id: 'getKeys', name: 'Query a list of Keys', description: 'Query the list of keys' },
+  { id: 'getBadges', name: 'Query Badges', description: 'Query a list of badges' },
+  { id: 'getKey', name: 'Query Key', description: 'Query a key by ID to see if it's whitelisted' },
+  { id: 'getKeys', name: 'Query Keys', description: 'Query the list of whitelisted keys' },
 ]
 
 export interface DispatchQueryProps {
@@ -23,10 +23,13 @@ export interface DispatchQueryProps {
   pubkey: string
   messages: BadgeHubInstance | undefined
   type: QueryType
+  startAfterNumber: number
+  startAfterString: string
+  limit: number
 }
 
 export const dispatchQuery = (props: DispatchQueryProps) => {
-  const { id, pubkey, messages, type } = props
+  const { id, pubkey, messages, type, startAfterNumber, startAfterString, limit } = props
   switch (type) {
     case 'config': {
       return messages?.getConfig()
@@ -35,13 +38,13 @@ export const dispatchQuery = (props: DispatchQueryProps) => {
       return messages?.getBadge(id)
     }
     case 'getBadges': {
-      return messages?.getBadges()
+      return messages?.getBadges(startAfterNumber, limit)
     }
     case 'getKey': {
       return messages?.getKey(id, pubkey)
     }
     case 'getKeys': {
-      return messages?.getKeys(id)
+      return messages?.getKeys(id, startAfterString, limit)
     }
     default: {
       throw new Error('unknown query type')

pages/contracts/badgeHub/query.tsx

@@ -2,7 +2,7 @@ import clsx from 'clsx'
 import { Conditional } from 'components/Conditional'
 import { ContractPageHeader } from 'components/ContractPageHeader'
 import { FormControl } from 'components/FormControl'
-import { AddressInput, NumberInput } from 'components/forms/FormInput'
+import { AddressInput, NumberInput, TextInput } from 'components/forms/FormInput'
 import { useInputState, useNumberInputState } from 'components/forms/FormInput.hooks'
 import { JsonPreview } from 'components/JsonPreview'
 import { LinkTabs } from 'components/LinkTabs'
@@ -20,6 +20,8 @@ import { useQuery } from 'react-query'
 import { withMetadata } from 'utils/layout'
 import { links } from 'utils/links'
 
+import { BADGE_HUB_ADDRESS } from '../../../utils/constants'
+
 const BadgeHubQueryPage: NextPage = () => {
   const { badgeHub: contract } = useContracts()
   const wallet = useWallet()
@@ -29,6 +31,7 @@ const BadgeHubQueryPage: NextPage = () => {
     name: 'contract-address',
     title: 'Badge Hub Address',
     subtitle: 'Address of the Badge Hub contract',
+    defaultValue: BADGE_HUB_ADDRESS,
   })
   const contractAddress = contractState.value
 
@@ -42,22 +45,57 @@ const BadgeHubQueryPage: NextPage = () => {
   const pubkeyState = useInputState({
     id: 'pubkey',
     name: 'pubkey',
-    title: 'Pubkey',
-    subtitle: 'The public key for the badge',
+    title: 'Public Key',
+    subtitle: 'The public key to check whether it can be used to mint a badge',
+  })
+
+  const startAfterNumberState = useNumberInputState({
+    id: 'start-after-number',
+    name: 'start-after-number',
+    title: 'Start After (optional)',
+    subtitle: 'The id to start the pagination after',
+  })
+
+  const startAfterStringState = useInputState({
+    id: 'start-after-string',
+    name: 'start-after-string',
+    title: 'Start After (optional)',
+    subtitle: 'The public key to start the pagination after',
+  })
+
+  const paginationLimitState = useNumberInputState({
+    id: 'pagination-limit',
+    name: 'pagination-limit',
+    title: 'Pagination Limit (optional)',
+    subtitle: 'The number of items to return (max: 30)',
   })
 
   const [type, setType] = useState<QueryType>('config')
 
   const { data: response } = useQuery(
-    [contractAddress, type, contract, wallet, idState.value, pubkeyState.value] as const,
+    [
+      contractAddress,
+      type,
+      contract,
+      wallet,
+      idState.value,
+      pubkeyState.value,
+      startAfterNumberState.value,
+      startAfterStringState.value,
+      paginationLimitState.value,
+    ] as const,
     async ({ queryKey }) => {
-      const [_contractAddress, _type, _contract, _wallet, id, pubkey] = queryKey
+      const [_contractAddress, _type, _contract, _wallet, id, pubkey, startAfterNumber, startAfterString, limit] =
+        queryKey
       const messages = contract?.use(_contractAddress)
       const result = await dispatchQuery({
         id,
         pubkey,
         messages,
         type,
+        startAfterNumber,
+        startAfterString,
+        limit,
       })
       return result
     },
@@ -114,9 +152,21 @@ const BadgeHubQueryPage: NextPage = () => {
               ))}
             </select>
           </FormControl>
-          <Conditional test={type === 'getBadge'}>
+          <Conditional test={type === 'getBadge' || type === 'getKey'}>
             <NumberInput {...idState} />
           </Conditional>
+          <Conditional test={type === 'getKey'}>
+            <TextInput {...pubkeyState} />
+          </Conditional>
+          <Conditional test={type === 'getBadges'}>
+            <NumberInput {...startAfterNumberState} />
+          </Conditional>
+          <Conditional test={type === 'getBadges' || type === 'getKeys'}>
+            <NumberInput {...paginationLimitState} />
+          </Conditional>
+          <Conditional test={type === 'getKeys'}>
+            <TextInput {...startAfterStringState} />
+          </Conditional>
         </div>
         <JsonPreview content={contractAddress ? { type, response } : null} title="Query Response" />
       </div>