Update queries for whitelist merkle tree

components/collections/creation/WhitelistDetails.tsx

@@ -43,7 +43,7 @@ export interface WhitelistDetailsDataProps {
 
 type WhitelistState = 'none' | 'existing' | 'new'
 
-type WhitelistType = 'standard' | 'flex' | 'merkletree'
+export type WhitelistType = 'standard' | 'flex' | 'merkletree'
 
 export const WhitelistDetails = ({
   onChange,

contracts/whitelistMerkleTree/contract.ts

@@ -162,7 +162,7 @@ export const WhiteListMerkleTree = (client: SigningCosmWasmClient, txSigner: str
 
     const merkleTreeUri = async (): Promise<string> => {
       return client.queryContractSmart(contractAddress, {
-        merkle_tree_uri: {},
+        merkle_tree_u_r_i: {},
       })
     }
 

contracts/whitelistMerkleTree/messages/query.ts

@@ -1,8 +1,8 @@
 import type { WhiteListMerkleTreeInstance } from '../contract'
 
-export type QueryType = typeof QUERY_TYPES[number]
+export type WhitelistMerkleTreeQueryType = typeof WHITELIST_MERKLE_TREE_QUERY_TYPES[number]
 
-export const QUERY_TYPES = [
+export const WHITELIST_MERKLE_TREE_QUERY_TYPES = [
   'has_started',
   'has_ended',
   'is_active',
@@ -14,12 +14,12 @@ export const QUERY_TYPES = [
 ] as const
 
 export interface QueryListItem {
-  id: QueryType
+  id: WhitelistMerkleTreeQueryType
   name: string
   description?: string
 }
 
-export const QUERY_LIST: QueryListItem[] = [
+export const WHITELIST_MERKLE_TREE_QUERY_LIST: QueryListItem[] = [
   { id: 'has_started', name: 'Has Started', description: 'Check if the whitelist minting has started' },
   { id: 'has_ended', name: 'Has Ended', description: 'Check if the whitelist minting has ended' },
   { id: 'is_active', name: 'Is Active', description: 'Check if the whitelist minting is active' },
@@ -32,7 +32,7 @@ export const QUERY_LIST: QueryListItem[] = [
 
 export interface DispatchQueryProps {
   messages: WhiteListMerkleTreeInstance | undefined
-  type: QueryType
+  type: WhitelistMerkleTreeQueryType
   address: string
   startAfter?: string
   limit?: number

pages/contracts/whitelist/query.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable eslint-comments/disable-enable-pair */
+/* eslint-disable no-nested-ternary */
 
 /* eslint-disable no-await-in-loop */
 /* eslint-disable @typescript-eslint/no-unsafe-return */
@@ -8,6 +9,7 @@
 import { toUtf8 } from '@cosmjs/encoding'
 import clsx from 'clsx'
 import { Button } from 'components/Button'
+import type { WhitelistType } from 'components/collections/creation/WhitelistDetails'
 import { Conditional } from 'components/Conditional'
 import { ContractPageHeader } from 'components/ContractPageHeader'
 import { FormControl } from 'components/FormControl'
@@ -19,6 +21,11 @@ import { whitelistLinkTabs } from 'components/LinkTabs.data'
 import { useContracts } from 'contexts/contracts'
 import type { QueryType } from 'contracts/whitelist/messages/query'
 import { dispatchQuery, QUERY_LIST } from 'contracts/whitelist/messages/query'
+import type { WhitelistMerkleTreeQueryType } from 'contracts/whitelistMerkleTree/messages/query'
+import {
+  dispatchQuery as disptachWhitelistMerkleTreeQuery,
+  WHITELIST_MERKLE_TREE_QUERY_LIST,
+} from 'contracts/whitelistMerkleTree/messages/query'
 import type { NextPage } from 'next'
 import { useRouter } from 'next/router'
 import { NextSeo } from 'next-seo'
@@ -33,8 +40,10 @@ import { useWallet } from 'utils/wallet'
 
 const WhitelistQueryPage: NextPage = () => {
   const { whitelist: contract } = useContracts()
+  const { whitelistMerkleTree: contractWhitelistMerkleTree } = useContracts()
   const wallet = useWallet()
   const [exporting, setExporting] = useState(false)
+  const [whitelistType, setWhitelistType] = useState<WhitelistType>('standard')
 
   const contractState = useInputState({
     id: 'contract-address',
@@ -44,6 +53,46 @@ const WhitelistQueryPage: NextPage = () => {
   })
   const contractAddress = contractState.value
 
+  const debouncedWhitelistContractState = useDebounce(contractAddress, 300)
+
+  useEffect(() => {
+    async function getWhitelistContractType() {
+      if (debouncedWhitelistContractState.length > 0) {
+        const client = await wallet.getCosmWasmClient()
+        const data = await toast.promise(
+          client.queryContractRaw(
+            debouncedWhitelistContractState,
+            toUtf8(Buffer.from(Buffer.from('contract_info').toString('hex'), 'hex').toString()),
+          ),
+          {
+            loading: 'Retrieving whitelist type...',
+            error: 'Whitelist type retrieval failed.',
+            success: 'Whitelist type retrieved.',
+          },
+        )
+        const whitelistContract: string = JSON.parse(new TextDecoder().decode(data as Uint8Array)).contract
+        console.log(contract)
+        return whitelistContract
+      }
+    }
+    void getWhitelistContractType()
+      .then((whitelistContract) => {
+        if (whitelistContract?.includes('merkletree')) {
+          setWhitelistType('merkletree')
+        } else if (whitelistContract?.includes('flex')) {
+          setWhitelistType('flex')
+        } else {
+          setWhitelistType('standard')
+        }
+      })
+      .catch((err) => {
+        console.log(err)
+        setWhitelistType('standard')
+        console.log('Unable to retrieve contract type. Defaulting to "standard".')
+      })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [debouncedWhitelistContractState, wallet.isWalletConnected])
+
   const addressState = useInputState({
     id: 'address',
     name: 'address',
@@ -80,22 +129,54 @@ const WhitelistQueryPage: NextPage = () => {
   }, [debouncedLimit])
 
   const [type, setType] = useState<QueryType>('config')
+  const [whitelistMerkleTreeQueryType, setWhitelistMerkleTreeQueryType] =
+    useState<WhitelistMerkleTreeQueryType>('config')
 
   const addressVisible = type === 'has_member'
 
   const { data: response } = useQuery(
-    [contractAddress, type, contract, wallet.address, address, startAfter.value, limit.value] as const,
+    [
+      contractAddress,
+      type,
+      whitelistMerkleTreeQueryType,
+      contract,
+      contractWhitelistMerkleTree,
+      wallet.address,
+      address,
+      startAfter.value,
+      limit.value,
+    ] as const,
     async ({ queryKey }) => {
-      const [_contractAddress, _type, _contract, _wallet, _address, _startAfter, _limit] = queryKey
+      const [
+        _contractAddress,
+        _type,
+        _whitelistMerkleTreeQueryType,
+        _contract,
+        _contractWhitelistMerkleTree,
+        _wallet,
+        _address,
+        _startAfter,
+        _limit,
+      ] = queryKey
       const messages = contract?.use(contractAddress)
+      const whitelistMerkleTreeMessages = contractWhitelistMerkleTree?.use(contractAddress)
+
       const res = await resolveAddress(_address, wallet).then(async (resolvedAddress) => {
-        const result = await dispatchQuery({
+        const result =
-          messages,
+          whitelistType === 'merkletree'
-          type,
+            ? await disptachWhitelistMerkleTreeQuery({
-          address: resolvedAddress,
+                messages: whitelistMerkleTreeMessages,
-          startAfter: _startAfter || undefined,
+                address: resolvedAddress,
-          limit: _limit,
+                type: whitelistMerkleTreeQueryType,
-        })
+                limit: _limit,
+              })
+            : await dispatchQuery({
+                messages,
+                type,
+                address: resolvedAddress,
+                startAfter: _startAfter || undefined,
+                limit: _limit,
+              })
         return result
       })
       return res
@@ -105,7 +186,7 @@ const WhitelistQueryPage: NextPage = () => {
       onError: (error: any) => {
         toast.error(error.message, { style: { maxWidth: 'none' } })
       },
-      enabled: Boolean(contractAddress && contract),
+      enabled: Boolean(contractAddress && (contract || contractWhitelistMerkleTree)),
     },
   )
 
@@ -230,9 +311,13 @@ const WhitelistQueryPage: NextPage = () => {
               defaultValue="config"
               id="contract-query-type"
               name="query-type"
-              onChange={(e) => setType(e.target.value as QueryType)}
+              onChange={(e) =>
+                whitelistType === 'merkletree'
+                  ? setWhitelistMerkleTreeQueryType(e.target.value as WhitelistMerkleTreeQueryType)
+                  : setType(e.target.value as QueryType)
+              }
             >
-              {QUERY_LIST.map(({ id, name }) => (
+              {(whitelistType === 'merkletree' ? WHITELIST_MERKLE_TREE_QUERY_LIST : QUERY_LIST).map(({ id, name }) => (
                 <option key={`query-${id}`} className="mt-2 text-lg bg-[#1A1A1A]" value={id}>
                   {name}
                 </option>
@@ -255,7 +340,16 @@ const WhitelistQueryPage: NextPage = () => {
             </Button>
           </Conditional>
         </div>
-        <JsonPreview content={contractAddress ? { type, response } : null} title="Query Response" />
+        <JsonPreview
+          content={
+            contractAddress
+              ? whitelistType === 'merkletree'
+                ? { type: whitelistMerkleTreeQueryType, response }
+                : { type, response }
+              : null
+          }
+          title="Query Response"
+        />
       </div>
     </section>
   )