Using contract addresses together

components/collections/actions/Action.tsx

@@ -12,19 +12,30 @@ 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 { MinterInstance } from 'contracts/minter'
+import type { SG721Instance } from 'contracts/sg721'
 import type { FormEvent } from 'react'
-import { useMemo, useState } from 'react'
+import { 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()
+interface CollectionActionsProps {
+  minterContractAddress: string
+  sg721ContractAddress: string
+  sg721Messages: SG721Instance | undefined
+  minterMessages: MinterInstance | undefined
+}
+
+export const CollectionActions = ({
+  sg721ContractAddress,
+  sg721Messages,
+  minterContractAddress,
+  minterMessages,
+}: CollectionActionsProps) => {
   const wallet = useWallet()
   const [lastTx, setLastTx] = useState('')
 
@@ -34,20 +45,6 @@ export const CollectionActions: NextPage = () => {
   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',
@@ -100,21 +97,12 @@ export const CollectionActions: NextPage = () => {
   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,
+    minterContract: minterContractAddress,
+    sg721Contract: sg721ContractAddress,
     tokenId: tokenIdState.value,
     tokenIds: tokenIdListState.value,
     batchNumber: batchNumberState.value,
@@ -131,7 +119,7 @@ export const CollectionActions: NextPage = () => {
       if (!type) {
         throw new Error('Please select an action!')
       }
-      if (minterContractState.value === '' && sg721ContractState.value === '') {
+      if (minterContractAddress === '' && sg721ContractAddress === '') {
         throw new Error('Please enter minter and sg721 contract addresses!')
       }
       const txHash = await toast.promise(dispatchExecute(payload), {

components/collections/queries/Queries.tsx

@@ -5,34 +5,26 @@ 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 type { MinterInstance } from 'contracts/minter'
+import type { SG721Instance } from 'contracts/sg721'
 import { toast } from 'react-hot-toast'
 import { useQuery } from 'react-query'
 
-export const CollectionQueries: NextPage = () => {
-  const { minter: minterContract, sg721: sg721Contract } = useContracts()
-
+interface CollectionQueriesProps {
+  minterContractAddress: string
+  sg721ContractAddress: string
+  sg721Messages: SG721Instance | undefined
+  minterMessages: MinterInstance | undefined
+}
+export const CollectionQueries = ({
+  sg721ContractAddress,
+  sg721Messages,
+  minterContractAddress,
+  minterMessages,
+}: CollectionQueriesProps) => {
   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',
@@ -53,12 +45,6 @@ export const CollectionQueries: NextPage = () => {
   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 }) => {

pages/collections/actions.tsx

@@ -7,7 +7,7 @@ import { useContracts } from 'contexts/contracts'
 import { useWallet } from 'contexts/wallet'
 import type { NextPage } from 'next'
 import { NextSeo } from 'next-seo'
-import { useState } from 'react'
+import { useMemo, useState } from 'react'
 import { withMetadata } from 'utils/layout'
 import { links } from 'utils/links'
 
@@ -15,7 +15,7 @@ const CollectionActionsPage: NextPage = () => {
   const { minter: minterContract, sg721: sg721Contract } = useContracts()
   const wallet = useWallet()
 
-  const [action, setAction] = useState<boolean>(true)
+  const [action, setAction] = useState<boolean>(false)
 
   const sg721ContractState = useInputState({
     id: 'sg721-contract-address',
@@ -31,6 +31,15 @@ const CollectionActionsPage: NextPage = () => {
     subtitle: 'Address of the Minter contract',
   })
 
+  const minterMessages = useMemo(
+    () => minterContract?.use(minterContractState.value),
+    [minterContract, minterContractState.value],
+  )
+  const sg721Messages = useMemo(
+    () => sg721Contract?.use(sg721ContractState.value),
+    [sg721Contract, sg721ContractState.value],
+  )
+
   return (
     <section className="py-6 px-12 space-y-4">
       <NextSeo title="Collection Actions" />
@@ -87,7 +96,23 @@ const CollectionActionsPage: NextPage = () => {
                 </label>
               </div>
             </div>
-            <div>{(action && <CollectionActions />) || <CollectionQueries />}</div>
+            <div>
+              {(action && (
+                <CollectionActions
+                  minterContractAddress={minterContractState.value}
+                  minterMessages={minterMessages}
+                  sg721ContractAddress={sg721ContractState.value}
+                  sg721Messages={sg721Messages}
+                />
+              )) || (
+                <CollectionQueries
+                  minterContractAddress={minterContractState.value}
+                  minterMessages={minterMessages}
+                  sg721ContractAddress={sg721ContractState.value}
+                  sg721Messages={sg721Messages}
+                />
+              )}
+            </div>
           </div>
         </div>
       </form>