Single collection actions page

components/collections/actions/Action.tsx

@@ -0,0 +1,195 @@
+import { Button } from 'components/Button'
+import type { DispatchExecuteArgs } from 'components/collections/actions/actions'
+import { dispatchExecute, isEitherType, previewExecutePayload } from 'components/collections/actions/actions'
+import { ActionsCombobox } from 'components/collections/actions/Combobox'
+import { useActionsComboboxState } from 'components/collections/actions/Combobox.hooks'
+import { Conditional } from 'components/Conditional'
+import { FormControl } from 'components/FormControl'
+import { FormGroup } from 'components/FormGroup'
+import { AddressInput, NumberInput } from 'components/forms/FormInput'
+import { useInputState, useNumberInputState } from 'components/forms/FormInput.hooks'
+import { InputDateTime } from 'components/InputDateTime'
+import { JsonPreview } from 'components/JsonPreview'
+import { TransactionHash } from 'components/TransactionHash'
+import { WhitelistUpload } from 'components/WhitelistUpload'
+import { useContracts } from 'contexts/contracts'
+import { useWallet } from 'contexts/wallet'
+import type { NextPage } from 'next'
+import type { FormEvent } from 'react'
+import { useMemo, useState } from 'react'
+import { toast } from 'react-hot-toast'
+import { FaArrowRight } from 'react-icons/fa'
+import { useMutation } from 'react-query'
+
+import { TextInput } from '../../forms/FormInput'
+
+export const CollectionActions: NextPage = () => {
+  const { minter: minterContract, sg721: sg721Contract } = useContracts()
+  const wallet = useWallet()
+  const [lastTx, setLastTx] = useState('')
+
+  const [timestamp, setTimestamp] = useState<Date | undefined>(undefined)
+  const [airdropArray, setAirdropArray] = useState<string[]>([])
+
+  const actionComboboxState = useActionsComboboxState()
+  const type = actionComboboxState.value?.id
+
+  const sg721ContractState = useInputState({
+    id: 'sg721-contract-address',
+    name: 'sg721-contract-address',
+    title: 'Sg721 Address',
+    subtitle: 'Address of the Sg721 contract',
+  })
+
+  const minterContractState = useInputState({
+    id: 'minter-contract-address',
+    name: 'minter-contract-address',
+    title: 'Minter Address',
+    subtitle: 'Address of the Minter contract',
+  })
+
+  const limitState = useNumberInputState({
+    id: 'per-address-limi',
+    name: 'perAddressLimit',
+    title: 'Per Address Limit',
+    subtitle: 'Enter the per address limit',
+  })
+
+  const tokenIdState = useNumberInputState({
+    id: 'token-id',
+    name: 'tokenId',
+    title: 'Token ID',
+    subtitle: 'Enter the token ID',
+  })
+
+  const batchNumberState = useNumberInputState({
+    id: 'batch-number',
+    name: 'batchNumber',
+    title: 'Number of Tokens',
+    subtitle: 'Enter the number of tokens to mint',
+  })
+
+  const tokenIdListState = useInputState({
+    id: 'token-id-list',
+    name: 'tokenIdList',
+    title: 'List of token IDs',
+    subtitle:
+      'Specify individual token IDs separated by commas (e.g., 2, 4, 8) or a range of IDs separated by a colon (e.g., 8:13)',
+  })
+
+  const recipientState = useInputState({
+    id: 'recipient-address',
+    name: 'recipient',
+    title: 'Recipient Address',
+    subtitle: 'Address of the recipient',
+  })
+
+  const whitelistState = useInputState({
+    id: 'whitelist-address',
+    name: 'whitelistAddress',
+    title: 'Whitelist Address',
+    subtitle: 'Address of the whitelist contract',
+  })
+
+  const showWhitelistField = type === 'set_whitelist'
+  const showDateField = type === 'update_start_time'
+  const showLimitField = type === 'update_per_address_limit'
+  const showTokenIdField = isEitherType(type, ['transfer', 'mint_for', 'burn'])
+  const showNumberOfTokensField = type === 'batch_mint'
+  const showTokenIdListField = isEitherType(type, ['batch_burn', 'batch_transfer'])
+  const showRecipientField = isEitherType(type, ['transfer', 'mint_to', 'mint_for', 'batch_mint', 'batch_transfer'])
+  const showAirdropFileField = type === 'airdrop'
+
+  const minterMessages = useMemo(
+    () => minterContract?.use(minterContractState.value),
+    [minterContract, minterContractState.value],
+  )
+  const sg721Messages = useMemo(
+    () => sg721Contract?.use(sg721ContractState.value),
+    [sg721Contract, sg721ContractState.value],
+  )
+
+  const payload: DispatchExecuteArgs = {
+    whitelist: whitelistState.value,
+    startTime: timestamp ? (timestamp.getTime() * 1_000_000).toString() : '',
+    limit: limitState.value,
+    minterContract: minterContractState.value,
+    sg721Contract: sg721ContractState.value,
+    tokenId: tokenIdState.value,
+    tokenIds: tokenIdListState.value,
+    batchNumber: batchNumberState.value,
+    minterMessages,
+    sg721Messages,
+    recipient: recipientState.value,
+    recipients: airdropArray,
+    txSigner: wallet.address,
+    type,
+  }
+  const { isLoading, mutate } = useMutation(
+    async (event: FormEvent) => {
+      event.preventDefault()
+      if (!type) {
+        throw new Error('Please select an action!')
+      }
+      if (minterContractState.value === '' && sg721ContractState.value === '') {
+        throw new Error('Please enter minter and sg721 contract addresses!')
+      }
+      const txHash = await toast.promise(dispatchExecute(payload), {
+        error: `${type.charAt(0).toUpperCase() + type.slice(1)} execute failed!`,
+        loading: 'Executing message...',
+        success: (tx) => `Transaction ${tx} success!`,
+      })
+      if (txHash) {
+        setLastTx(txHash)
+      }
+    },
+    {
+      onError: (error) => {
+        toast.error(String(error))
+      },
+    },
+  )
+
+  const airdropFileOnChange = (data: string[]) => {
+    setAirdropArray(data)
+  }
+
+  return (
+    <form onSubmit={mutate}>
+      <div className="grid grid-cols-2 mt-4">
+        <div className="mr-2">
+          <ActionsCombobox {...actionComboboxState} />
+          {showRecipientField && <AddressInput {...recipientState} />}
+          {showWhitelistField && <AddressInput {...whitelistState} />}
+          {showLimitField && <NumberInput {...limitState} />}
+          {showTokenIdField && <NumberInput {...tokenIdState} />}
+          {showTokenIdListField && <TextInput {...tokenIdListState} />}
+          {showNumberOfTokensField && <NumberInput {...batchNumberState} />}
+          {showAirdropFileField && (
+            <FormGroup subtitle="TXT file that contains the airdrop addresses" title="Airdrop File">
+              <WhitelistUpload onChange={airdropFileOnChange} />
+            </FormGroup>
+          )}
+          <Conditional test={showDateField}>
+            <FormControl htmlId="start-date" subtitle="Start time for the minting" title="Start Time">
+              <InputDateTime minDate={new Date()} onChange={(date) => setTimestamp(date)} value={timestamp} />
+            </FormControl>
+          </Conditional>
+        </div>
+        <div>
+          <div className="relative">
+            <Button className="absolute top-0 right-0" isLoading={isLoading} rightIcon={<FaArrowRight />} type="submit">
+              Execute
+            </Button>
+            <FormControl subtitle="View execution transaction hash" title="Transaction Hash">
+              <TransactionHash hash={lastTx} />
+            </FormControl>
+          </div>
+          <FormControl subtitle="View current message to be sent" title="Payload Preview">
+            <JsonPreview content={previewExecutePayload(payload)} isCopyable />
+          </FormControl>
+        </div>
+      </div>
+    </form>
+  )
+}

components/collections/actions/Combobox.tsx

@@ -26,7 +26,7 @@ export const ActionsCombobox = ({ value, onChange }: ActionsComboboxProps) => {
       labelAs={Combobox.Label}
       onChange={onChange}
       subtitle="Collection actions"
-      title="Action"
+      title=""
       value={value}
     >
       <div className="relative">

components/collections/queries/Combobox.tsx

@@ -25,7 +25,7 @@ export const QueryCombobox = ({ value, onChange }: QueryComboboxProps) => {
       labelAs={Combobox.Label}
       onChange={onChange}
       subtitle="Collection queries"
-      title="Query"
+      title=""
       value={value}
     >
       <div className="relative">

components/collections/queries/Queries.tsx

@@ -0,0 +1,99 @@
+import { QueryCombobox } from 'components/collections/queries/Combobox'
+import { useQueryComboboxState } from 'components/collections/queries/Combobox.hooks'
+import { dispatchQuery } from 'components/collections/queries/query'
+import { FormControl } from 'components/FormControl'
+import { AddressInput, TextInput } from 'components/forms/FormInput'
+import { useInputState } from 'components/forms/FormInput.hooks'
+import { JsonPreview } from 'components/JsonPreview'
+import { useContracts } from 'contexts/contracts'
+import type { NextPage } from 'next'
+import { useMemo } from 'react'
+import { toast } from 'react-hot-toast'
+import { useQuery } from 'react-query'
+
+export const CollectionQueries: NextPage = () => {
+  const { minter: minterContract, sg721: sg721Contract } = useContracts()
+
+  const comboboxState = useQueryComboboxState()
+  const type = comboboxState.value?.id
+
+  const sg721ContractState = useInputState({
+    id: 'sg721-contract-address',
+    name: 'sg721-contract-address',
+    title: 'Sg721 Address',
+    subtitle: 'Address of the Sg721 contract',
+  })
+  const sg721ContractAddress = sg721ContractState.value
+
+  const minterContractState = useInputState({
+    id: 'minter-contract-address',
+    name: 'minter-contract-address',
+    title: 'Minter Address',
+    subtitle: 'Address of the Minter contract',
+  })
+  const minterContractAddress = minterContractState.value
+
+  const tokenIdState = useInputState({
+    id: 'token-id',
+    name: 'tokenId',
+    title: 'Token ID',
+    subtitle: 'Enter the token ID',
+    placeholder: '1',
+  })
+  const tokenId = tokenIdState.value
+
+  const addressState = useInputState({
+    id: 'address',
+    name: 'address',
+    title: 'User Address',
+    subtitle: 'Address of the user',
+  })
+  const address = addressState.value
+
+  const showTokenIdField = type === 'token_info'
+  const showAddressField = type === 'tokens_minted_to_user'
+
+  const minterMessages = useMemo(
+    () => minterContract?.use(minterContractAddress),
+    [minterContract, minterContractAddress],
+  )
+  const sg721Messages = useMemo(() => sg721Contract?.use(sg721ContractAddress), [sg721Contract, sg721ContractAddress])
+
+  const { data: response } = useQuery(
+    [sg721Messages, minterMessages, type, tokenId, address] as const,
+    async ({ queryKey }) => {
+      const [_sg721Messages, _minterMessages, _type, _tokenId, _address] = queryKey
+      const result = await dispatchQuery({
+        tokenId: _tokenId,
+        minterMessages: _minterMessages,
+        sg721Messages: _sg721Messages,
+        address: _address,
+        type: _type,
+      })
+      return result
+    },
+    {
+      placeholderData: null,
+      onError: (error: any) => {
+        toast.error(error.message)
+      },
+      enabled: Boolean(sg721ContractAddress && minterContractAddress && type),
+      retry: false,
+    },
+  )
+
+  return (
+    <div className="grid grid-cols-2 mt-4">
+      <div className="mr-2 space-y-8">
+        <QueryCombobox {...comboboxState} />
+        {showAddressField && <AddressInput {...addressState} />}
+        {showTokenIdField && <TextInput {...tokenIdState} />}
+      </div>
+      <div className="space-y-8">
+        <FormControl title="Query Response">
+          <JsonPreview content={response || {}} isCopyable />
+        </FormControl>
+      </div>
+    </div>
+  )
+}

pages/collections/actions.tsx

@@ -1,42 +1,21 @@
-import { Button } from 'components/Button'
+import { CollectionActions } from 'components/collections/actions/Action'
-import type { DispatchExecuteArgs } from 'components/collections/actions/actions'
+import { CollectionQueries } from 'components/collections/queries/Queries'
-import { dispatchExecute, isEitherType, previewExecutePayload } from 'components/collections/actions/actions'
-import { ActionsCombobox } from 'components/collections/actions/Combobox'
-import { useActionsComboboxState } from 'components/collections/actions/Combobox.hooks'
-import { Conditional } from 'components/Conditional'
 import { ContractPageHeader } from 'components/ContractPageHeader'
-import { FormControl } from 'components/FormControl'
+import { AddressInput } from 'components/forms/FormInput'
-import { FormGroup } from 'components/FormGroup'
+import { useInputState } from 'components/forms/FormInput.hooks'
-import { AddressInput, NumberInput } from 'components/forms/FormInput'
-import { useInputState, useNumberInputState } from 'components/forms/FormInput.hooks'
-import { InputDateTime } from 'components/InputDateTime'
-import { JsonPreview } from 'components/JsonPreview'
-import { TransactionHash } from 'components/TransactionHash'
-import { WhitelistUpload } from 'components/WhitelistUpload'
 import { useContracts } from 'contexts/contracts'
 import { useWallet } from 'contexts/wallet'
 import type { NextPage } from 'next'
 import { NextSeo } from 'next-seo'
-import type { FormEvent } from 'react'
+import { useState } from 'react'
-import { useMemo, useState } from 'react'
-import { toast } from 'react-hot-toast'
-import { FaArrowRight } from 'react-icons/fa'
-import { useMutation } from 'react-query'
 import { withMetadata } from 'utils/layout'
 import { links } from 'utils/links'
 
-import { TextInput } from '../../components/forms/FormInput'
-
 const CollectionActionsPage: NextPage = () => {
   const { minter: minterContract, sg721: sg721Contract } = useContracts()
   const wallet = useWallet()
-  const [lastTx, setLastTx] = useState('')
 
-  const [timestamp, setTimestamp] = useState<Date | undefined>(undefined)
+  const [action, setAction] = useState<boolean>(true)
-  const [airdropArray, setAirdropArray] = useState<string[]>([])
-
-  const comboboxState = useActionsComboboxState()
-  const type = comboboxState.value?.id
 
   const sg721ContractState = useInputState({
     id: 'sg721-contract-address',
@@ -52,111 +31,6 @@ const CollectionActionsPage: NextPage = () => {
     subtitle: 'Address of the Minter contract',
   })
 
-  const limitState = useNumberInputState({
-    id: 'per-address-limi',
-    name: 'perAddressLimit',
-    title: 'Per Address Limit',
-    subtitle: 'Enter the per address limit',
-  })
-
-  const tokenIdState = useNumberInputState({
-    id: 'token-id',
-    name: 'tokenId',
-    title: 'Token ID',
-    subtitle: 'Enter the token ID',
-  })
-
-  const batchNumberState = useNumberInputState({
-    id: 'batch-number',
-    name: 'batchNumber',
-    title: 'Number of Tokens',
-    subtitle: 'Enter the number of tokens to mint',
-  })
-
-  const tokenIdListState = useInputState({
-    id: 'token-id-list',
-    name: 'tokenIdList',
-    title: 'List of token IDs',
-    subtitle:
-      'Specify individual token IDs separated by commas (e.g., 2, 4, 8) or a range of IDs separated by a colon (e.g., 8:13)',
-  })
-
-  const recipientState = useInputState({
-    id: 'recipient-address',
-    name: 'recipient',
-    title: 'Recipient Address',
-    subtitle: 'Address of the recipient',
-  })
-
-  const whitelistState = useInputState({
-    id: 'whitelist-address',
-    name: 'whitelistAddress',
-    title: 'Whitelist Address',
-    subtitle: 'Address of the whitelist contract',
-  })
-
-  const showWhitelistField = type === 'set_whitelist'
-  const showDateField = type === 'update_start_time'
-  const showLimitField = type === 'update_per_address_limit'
-  const showTokenIdField = isEitherType(type, ['transfer', 'mint_for', 'burn'])
-  const showNumberOfTokensField = type === 'batch_mint'
-  const showTokenIdListField = isEitherType(type, ['batch_burn', 'batch_transfer'])
-  const showRecipientField = isEitherType(type, ['transfer', 'mint_to', 'mint_for', 'batch_mint', 'batch_transfer'])
-  const showAirdropFileField = type === 'airdrop'
-
-  const minterMessages = useMemo(
-    () => minterContract?.use(minterContractState.value),
-    [minterContract, minterContractState.value],
-  )
-  const sg721Messages = useMemo(
-    () => sg721Contract?.use(sg721ContractState.value),
-    [sg721Contract, sg721ContractState.value],
-  )
-  const payload: DispatchExecuteArgs = {
-    whitelist: whitelistState.value,
-    startTime: timestamp ? (timestamp.getTime() * 1_000_000).toString() : '',
-    limit: limitState.value,
-    minterContract: minterContractState.value,
-    sg721Contract: sg721ContractState.value,
-    tokenId: tokenIdState.value,
-    tokenIds: tokenIdListState.value,
-    batchNumber: batchNumberState.value,
-    minterMessages,
-    sg721Messages,
-    recipient: recipientState.value,
-    recipients: airdropArray,
-    txSigner: wallet.address,
-    type,
-  }
-  const { isLoading, mutate } = useMutation(
-    async (event: FormEvent) => {
-      event.preventDefault()
-      if (!type) {
-        throw new Error('Please select an action!')
-      }
-      if (minterContractState.value === '' && sg721ContractState.value === '') {
-        throw new Error('Please enter minter and sg721 contract addresses!')
-      }
-      const txHash = await toast.promise(dispatchExecute(payload), {
-        error: `${type.charAt(0).toUpperCase() + type.slice(1)} execute failed!`,
-        loading: 'Executing message...',
-        success: (tx) => `Transaction ${tx} success!`,
-      })
-      if (txHash) {
-        setLastTx(txHash)
-      }
-    },
-    {
-      onError: (error) => {
-        toast.error(String(error))
-      },
-    },
-  )
-
-  const airdropFileOnChange = (data: string[]) => {
-    setAirdropArray(data)
-  }
-
   return (
     <section className="py-6 px-12 space-y-4">
       <NextSeo title="Collection Actions" />
@@ -166,40 +40,55 @@ const CollectionActionsPage: NextPage = () => {
         title="Collection Actions"
       />
 
-      <form className="grid grid-cols-2 p-4 space-x-8" onSubmit={mutate}>
+      <form className="p-4">
-        <div className="space-y-8">
+        <div className="grid grid-cols-2">
-          <AddressInput {...sg721ContractState} />
+          <AddressInput {...sg721ContractState} className="mr-2" />
           <AddressInput {...minterContractState} />
-          <ActionsCombobox {...comboboxState} />
-          {showRecipientField && <AddressInput {...recipientState} />}
-          {showWhitelistField && <AddressInput {...whitelistState} />}
-          {showLimitField && <NumberInput {...limitState} />}
-          {showTokenIdField && <NumberInput {...tokenIdState} />}
-          {showTokenIdListField && <TextInput {...tokenIdListState} />}
-          {showNumberOfTokensField && <NumberInput {...batchNumberState} />}
-          {showAirdropFileField && (
-            <FormGroup subtitle="TXT file that contains the airdrop addresses" title="Airdrop File">
-              <WhitelistUpload onChange={airdropFileOnChange} />
-            </FormGroup>
-          )}
-          <Conditional test={showDateField}>
-            <FormControl htmlId="start-date" subtitle="Start time for the minting" title="Start Time">
-              <InputDateTime minDate={new Date()} onChange={(date) => setTimestamp(date)} value={timestamp} />
-            </FormControl>
-          </Conditional>
         </div>
-        <div className="space-y-8">
+        <div className="mt-4">
-          <div className="relative">
+          <div className="mr-2">
-            <Button className="absolute top-0 right-0" isLoading={isLoading} rightIcon={<FaArrowRight />} type="submit">
+            <div className="flex justify-items-start font-bold">
-              Execute
+              <div className="form-check form-check-inline">
-            </Button>
+                <input
-            <FormControl subtitle="View execution transaction hash" title="Transaction Hash">
+                  checked={action}
-              <TransactionHash hash={lastTx} />
+                  className="peer sr-only"
-            </FormControl>
+                  id="inlineRadio3"
+                  name="inlineRadioOptions3"
+                  onClick={() => {
+                    setAction(true)
+                  }}
+                  type="radio"
+                  value="true"
+                />
+                <label
+                  className="inline-block py-1 px-2 text-gray peer-checked:text-white hover:text-white peer-checked:bg-black hover:rounded-sm peer-checked:border-b-2 hover:border-b-2 peer-checked:border-plumbus hover:border-plumbus cursor-pointer form-check-label"
+                  htmlFor="inlineRadio3"
+                >
+                  Actions
+                </label>
+              </div>
+              <div className="ml-2 form-check form-check-inline">
+                <input
+                  checked={!action}
+                  className="peer sr-only"
+                  id="inlineRadio4"
+                  name="inlineRadioOptions4"
+                  onClick={() => {
+                    setAction(false)
+                  }}
+                  type="radio"
+                  value="false"
+                />
+                <label
+                  className="inline-block py-1 px-2 text-gray peer-checked:text-white hover:text-white peer-checked:bg-black hover:rounded-sm peer-checked:border-b-2 hover:border-b-2 peer-checked:border-plumbus hover:border-plumbus cursor-pointer form-check-label"
+                  htmlFor="inlineRadio4"
+                >
+                  Queries
+                </label>
+              </div>
+            </div>
+            <div>{(action && <CollectionActions />) || <CollectionQueries />}</div>
           </div>
-          <FormControl subtitle="View current message to be sent" title="Payload Preview">
-            <JsonPreview content={previewExecutePayload(payload)} isCopyable />
-          </FormControl>
         </div>
       </form>
     </section>