Add splits contract dashboard & mint revenue payment address

.env.example

@@ -1,4 +1,4 @@
-APP_VERSION=0.4.8
+APP_VERSION=0.4.9
 
 NEXT_PUBLIC_PINATA_ENDPOINT_URL=https://api.pinata.cloud/pinning/pinFileToIPFS
 NEXT_PUBLIC_SG721_CODE_ID=1702
@@ -12,6 +12,8 @@ NEXT_PUBLIC_BADGE_HUB_CODE_ID=1336
 NEXT_PUBLIC_BADGE_HUB_ADDRESS="stars1dacun0xn7z73qzdcmq27q3xn6xuprg8e2ugj364784al2v27tklqynhuqa"
 NEXT_PUBLIC_BADGE_NFT_CODE_ID=1337
 NEXT_PUBLIC_BADGE_NFT_ADDRESS="stars1vlw4y54dyzt3zg7phj8yey9fg4zj49czknssngwmgrnwymyktztstalg7t"
+NEXT_PUBLIC_SPLITS_CODE_ID=1904
+NEXT_PUBLIC_CW4_GROUP_CODE_ID=1905
 
 
 NEXT_PUBLIC_API_URL=https://nft-api.elgafar-1.stargaze-apis.com

components/LinkTabs.data.ts

@@ -104,3 +104,26 @@ export const badgeHubLinkTabs: LinkTabProps[] = [
     href: '/contracts/badgeHub/migrate',
   },
 ]
+
+export const splitsLinkTabs: LinkTabProps[] = [
+  {
+    title: 'Instantiate',
+    description: `Initialize a new Splits contract`,
+    href: '/contracts/splits/instantiate',
+  },
+  {
+    title: 'Query',
+    description: `Dispatch queries for your Splits contract`,
+    href: '/contracts/splits/query',
+  },
+  {
+    title: 'Execute',
+    description: `Execute Splits contract actions`,
+    href: '/contracts/splits/execute',
+  },
+  {
+    title: 'Migrate',
+    description: `Migrate Splits contract`,
+    href: '/contracts/splits/migrate',
+  },
+]

components/Sidebar.tsx

@@ -190,6 +190,15 @@ export const Sidebar = () => {
                   <Link href="/contracts/badgeHub/">Badge Hub Contract</Link>
                 </li>
               </Conditional>
+              <li
+                className={clsx(
+                  'text-lg font-bold hover:text-white hover:bg-stargaze-80 rounded',
+                  router.asPath.includes('/contracts/splits/') ? 'text-white' : 'text-gray',
+                )}
+                tabIndex={-1}
+              >
+                <Link href="/contracts/splits/">Splits Contract</Link>
+              </li>
             </ul>
           </li>
         </ul>

components/collections/creation/CollectionDetails.tsx

@@ -119,9 +119,9 @@ export const CollectionDetails = ({ onChange, uploadMethod, coverImageUrl, minte
             <TextInput className="mt-2" {...symbolState} isRequired />
           </div>
           <div className={clsx(minterType === 'base' ? 'ml-10' : '')}>
-            <TextInput {...externalLinkState} />
+            <TextInput className="mt-2" {...externalLinkState} />
             <FormControl
-              className={clsx(minterType === 'base' ? 'mt-12' : '')}
+              className={clsx(minterType === 'base' ? 'mt-12' : 'mt-2')}
               htmlId="timestamp"
               subtitle="Trading start time offset will be set as 2 weeks by default."
               title="Trading Start Time (optional)"
@@ -140,6 +140,8 @@ export const CollectionDetails = ({ onChange, uploadMethod, coverImageUrl, minte
             <input
               accept="image/*"
               className={clsx(
+                minterType === 'base' ? 'w-1/2' : 'w-full',
+                'p-[13px] rounded border-2 border-white/20 border-dashed cursor-pointer h-18',
                 'file:py-2 file:px-4 file:mr-4 file:bg-plumbus-light file:rounded file:border-0 cursor-pointer',
                 'before:hover:bg-white/5 before:transition',
               )}
@@ -173,7 +175,7 @@ export const CollectionDetails = ({ onChange, uploadMethod, coverImageUrl, minte
         </FormControl>
         <div className={clsx(minterType === 'base' ? 'flex flex-col -ml-16 space-y-2' : 'flex flex-col space-y-2')}>
           <div>
-            <div className="flex">
+            <div className="flex mt-4">
               <span className="mt-1 text-sm first-letter:capitalize">
                 Does the collection contain explicit content?
               </span>

components/collections/creation/MintingDetails.tsx

@@ -1,10 +1,12 @@
 import { FormControl } from 'components/FormControl'
 import { FormGroup } from 'components/FormGroup'
-import { useNumberInputState } from 'components/forms/FormInput.hooks'
+import { useInputState, useNumberInputState } from 'components/forms/FormInput.hooks'
 import { InputDateTime } from 'components/InputDateTime'
 import React, { useEffect, useState } from 'react'
+import { resolveAddress } from 'utils/resolveAddress'
 
-import { NumberInput } from '../../forms/FormInput'
+import { useWallet } from '../../../contexts/wallet'
+import { NumberInput, TextInput } from '../../forms/FormInput'
 import type { UploadMethod } from './UploadDetails'
 
 interface MintingDetailsProps {
@@ -18,9 +20,12 @@ export interface MintingDetailsDataProps {
   unitPrice: string
   perAddressLimit: number
   startTime: string
+  paymentAddress?: string
 }
 
 export const MintingDetails = ({ onChange, numberOfTokens, uploadMethod }: MintingDetailsProps) => {
+  const wallet = useWallet()
+
   const [timestamp, setTimestamp] = useState<Date | undefined>()
 
   const numberOfTokensState = useNumberInputState({
@@ -47,6 +52,24 @@ export const MintingDetails = ({ onChange, numberOfTokens, uploadMethod }: Minti
     placeholder: '1',
   })
 
+  const paymentAddressState = useInputState({
+    id: 'payment-address',
+    name: 'paymentAddress',
+    title: 'Payment Address (optional)',
+    subtitle: 'Address to receive minting revenues (defaults to current wallet address)',
+    placeholder: 'stars1234567890abcdefghijklmnopqrstuvwxyz...',
+  })
+
+  const resolvePaymentAddress = async () => {
+    await resolveAddress(paymentAddressState.value.trim(), wallet).then((resolvedAddress) => {
+      paymentAddressState.onChange(resolvedAddress)
+    })
+  }
+
+  useEffect(() => {
+    void resolvePaymentAddress()
+  }, [paymentAddressState.value])
+
   useEffect(() => {
     if (numberOfTokens) numberOfTokensState.onChange(numberOfTokens)
     const data: MintingDetailsDataProps = {
@@ -54,10 +77,18 @@ export const MintingDetails = ({ onChange, numberOfTokens, uploadMethod }: Minti
       unitPrice: unitPriceState.value ? (Number(unitPriceState.value) * 1_000_000).toString() : '',
       perAddressLimit: perAddressLimitState.value,
       startTime: timestamp ? (timestamp.getTime() * 1_000_000).toString() : '',
+      paymentAddress: paymentAddressState.value,
     }
     onChange(data)
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [numberOfTokens, numberOfTokensState.value, unitPriceState.value, perAddressLimitState.value, timestamp])
+  }, [
+    numberOfTokens,
+    numberOfTokensState.value,
+    unitPriceState.value,
+    perAddressLimitState.value,
+    timestamp,
+    paymentAddressState.value,
+  ])
 
   return (
     <div>
@@ -74,6 +105,7 @@ export const MintingDetails = ({ onChange, numberOfTokens, uploadMethod }: Minti
           <InputDateTime minDate={new Date()} onChange={(date) => setTimestamp(date)} value={timestamp} />
         </FormControl>
       </FormGroup>
+      <TextInput className="p-4 mt-5" {...paymentAddressState} />
     </div>
   )
 }

components/contracts/splits/ExecuteCombobox.hooks.ts

@@ -0,0 +1,7 @@
+import type { ExecuteListItem } from 'contracts/splits/messages/execute'
+import { useState } from 'react'
+
+export const useExecuteComboboxState = () => {
+  const [value, setValue] = useState<ExecuteListItem | null>(null)
+  return { value, onChange: (item: ExecuteListItem) => setValue(item) }
+}

components/contracts/splits/ExecuteCombobox.tsx

@@ -0,0 +1,93 @@
+import { Combobox, Transition } from '@headlessui/react'
+import clsx from 'clsx'
+import { FormControl } from 'components/FormControl'
+import { matchSorter } from 'match-sorter'
+import { Fragment, useState } from 'react'
+import { FaChevronDown, FaInfoCircle } from 'react-icons/fa'
+
+import type { ExecuteListItem } from '../../../contracts/splits/messages/execute'
+import { EXECUTE_LIST } from '../../../contracts/splits/messages/execute'
+
+export interface ExecuteComboboxProps {
+  value: ExecuteListItem | null
+  onChange: (item: ExecuteListItem) => void
+}
+
+export const ExecuteCombobox = ({ value, onChange }: ExecuteComboboxProps) => {
+  const [search, setSearch] = useState('')
+
+  const filtered =
+    search === '' ? EXECUTE_LIST : matchSorter(EXECUTE_LIST, search, { keys: ['id', 'name', 'description'] })
+
+  return (
+    <Combobox
+      as={FormControl}
+      htmlId="message-type"
+      labelAs={Combobox.Label}
+      onChange={onChange}
+      subtitle="Contract execute message type"
+      title="Message Type"
+      value={value}
+    >
+      <div className="relative">
+        <Combobox.Input
+          className={clsx(
+            'w-full bg-white/10 rounded border-2 border-white/20 form-input',
+            'placeholder:text-white/50',
+            'focus:ring focus:ring-plumbus-20',
+          )}
+          displayValue={(val?: ExecuteListItem) => val?.name ?? ''}
+          id="message-type"
+          onChange={(event) => setSearch(event.target.value)}
+          placeholder="Select message type"
+        />
+
+        <Combobox.Button
+          className={clsx(
+            'flex absolute inset-y-0 right-0 items-center p-4',
+            'opacity-50 hover:opacity-100 active:opacity-100',
+          )}
+        >
+          {({ open }) => <FaChevronDown aria-hidden="true" className={clsx('w-4 h-4', { 'rotate-180': open })} />}
+        </Combobox.Button>
+
+        <Transition afterLeave={() => setSearch('')} as={Fragment}>
+          <Combobox.Options
+            className={clsx(
+              'overflow-auto absolute z-10 mt-2 w-full max-h-[30vh]',
+              'bg-stone-800/80 rounded shadow-lg backdrop-blur-sm',
+              'divide-y divide-stone-500/50',
+            )}
+          >
+            {filtered.length < 1 && (
+              <span className="flex flex-col justify-center items-center p-4 text-sm text-center text-white/50">
+                Message type not found.
+              </span>
+            )}
+            {filtered.map((entry) => (
+              <Combobox.Option
+                key={entry.id}
+                className={({ active }) =>
+                  clsx('flex relative flex-col py-2 px-4 space-y-1 cursor-pointer', { 'bg-stargaze-80': active })
+                }
+                value={entry}
+              >
+                <span className="font-bold">{entry.name}</span>
+                <span className="max-w-md text-sm">{entry.description}</span>
+              </Combobox.Option>
+            ))}
+          </Combobox.Options>
+        </Transition>
+      </div>
+
+      {value && (
+        <div className="flex space-x-2 text-white/50">
+          <div className="mt-1">
+            <FaInfoCircle className="w-3 h-3" />
+          </div>
+          <span className="text-sm">{value.description}</span>
+        </div>
+      )}
+    </Combobox>
+  )
+}

components/forms/MemberAttributes.hooks.ts

@@ -0,0 +1,33 @@
+import { useMemo, useState } from 'react'
+import { uid } from 'utils/random'
+
+import type { Attribute } from './MemberAttributes'
+
+export function useMemberAttributesState() {
+  const [record, setRecord] = useState<Record<string, Attribute>>(() => ({}))
+
+  const entries = useMemo(() => Object.entries(record), [record])
+  const values = useMemo(() => Object.values(record), [record])
+
+  function add(attribute: Attribute = { address: '', weight: 0 }) {
+    setRecord((prev) => ({ ...prev, [uid()]: attribute }))
+  }
+
+  function update(key: string, attribute = record[key]) {
+    setRecord((prev) => ({ ...prev, [key]: attribute }))
+  }
+
+  function remove(key: string) {
+    return setRecord((prev) => {
+      const latest = { ...prev }
+      delete latest[key]
+      return latest
+    })
+  }
+
+  function reset() {
+    setRecord({})
+  }
+
+  return { entries, values, add, update, remove, reset }
+}

components/forms/MemberAttributes.tsx

@@ -0,0 +1,94 @@
+import { FormControl } from 'components/FormControl'
+import { AddressInput, NumberInput } from 'components/forms/FormInput'
+import { useEffect, useId, useMemo } from 'react'
+import { FaMinus, FaPlus } from 'react-icons/fa'
+
+import { useInputState, useNumberInputState } from './FormInput.hooks'
+
+export interface Attribute {
+  address: string
+  weight: number
+}
+
+export interface MemberAttributesProps {
+  title: string
+  subtitle?: string
+  isRequired?: boolean
+  attributes: [string, Attribute][]
+  onAdd: () => void
+  onChange: (key: string, attribute: Attribute) => void
+  onRemove: (key: string) => void
+}
+
+export function MemberAttributes(props: MemberAttributesProps) {
+  const { title, subtitle, isRequired, attributes, onAdd, onChange, onRemove } = props
+
+  return (
+    <FormControl isRequired={isRequired} subtitle={subtitle} title={title}>
+      {attributes.map(([id], i) => (
+        <MemberAttribute
+          key={`ma-${id}`}
+          defaultAttribute={attributes[i][1]}
+          id={id}
+          isLast={i === attributes.length - 1}
+          onAdd={onAdd}
+          onChange={onChange}
+          onRemove={onRemove}
+        />
+      ))}
+    </FormControl>
+  )
+}
+
+export interface MemberAttributeProps {
+  id: string
+  isLast: boolean
+  onAdd: MemberAttributesProps['onAdd']
+  onChange: MemberAttributesProps['onChange']
+  onRemove: MemberAttributesProps['onRemove']
+  defaultAttribute: Attribute
+}
+
+export function MemberAttribute({ id, isLast, onAdd, onChange, onRemove, defaultAttribute }: MemberAttributeProps) {
+  const Icon = useMemo(() => (isLast ? FaPlus : FaMinus), [isLast])
+
+  const htmlId = useId()
+
+  const addressState = useInputState({
+    id: `ma-address-${htmlId}`,
+    name: `ma-address-${htmlId}`,
+    title: `Address`,
+    defaultValue: defaultAttribute.address,
+  })
+
+  const weightState = useNumberInputState({
+    id: `ma-weight-${htmlId}`,
+    name: `ma-weight-${htmlId}`,
+    title: `Weight`,
+    defaultValue: defaultAttribute.weight,
+  })
+
+  useEffect(() => {
+    onChange(id, { address: addressState.value, weight: weightState.value })
+  }, [addressState.value, weightState.value, id])
+
+  return (
+    <div className="grid relative lg:grid-cols-[70%_20%_10%] 2xl:space-x-2">
+      <AddressInput {...addressState} />
+      <NumberInput {...weightState} />
+
+      <div className="flex justify-end items-end pb-2 w-8">
+        <button
+          className="flex justify-center items-center p-2 bg-stargaze-80 hover:bg-plumbus-60 rounded-full"
+          onClick={(e) => {
+            e.preventDefault()
+            isLast ? onAdd() : onRemove(id)
+          }}
+          type="button"
+        >
+          <Icon className="w-3 h-3" />
+        </button>
+      </div>
+    </div>
+  )
+}

contexts/contracts.tsx

@@ -17,6 +17,9 @@ import { Fragment, useEffect } from 'react'
 import type { State } from 'zustand'
 import create from 'zustand'
 
+import type { UseSplitsContractProps } from '../contracts/splits/useContract'
+import { useSplitsContract } from '../contracts/splits/useContract'
+
 /**
  * Contracts store type definitions
  */
@@ -28,6 +31,7 @@ export interface ContractsStore extends State {
   vendingFactory: UseVendingFactoryContractProps | null
   baseFactory: UseBaseFactoryContractProps | null
   badgeHub: UseBadgeHubContractProps | null
+  splits: UseSplitsContractProps | null
 }
 
 /**
@@ -41,6 +45,7 @@ export const defaultValues: ContractsStore = {
   vendingFactory: null,
   baseFactory: null,
   badgeHub: null,
+  splits: null,
 }
 
 /**
@@ -71,6 +76,7 @@ const ContractsSubscription: VFC = () => {
   const vendingFactory = useVendingFactoryContract()
   const baseFactory = useBaseFactoryContract()
   const badgeHub = useBadgeHubContract()
+  const splits = useSplitsContract()
 
   useEffect(() => {
     useContracts.setState({
@@ -81,8 +87,9 @@ const ContractsSubscription: VFC = () => {
       vendingFactory,
       baseFactory,
       badgeHub,
+      splits,
     })
-  }, [sg721, vendingMinter, baseMinter, whitelist, vendingFactory, baseFactory, badgeHub])
+  }, [sg721, vendingMinter, baseMinter, whitelist, vendingFactory, baseFactory, badgeHub, splits])
 
   return null
 }

contracts/splits/contract.ts

@@ -0,0 +1,191 @@
+import type { SigningCosmWasmClient } from '@cosmjs/cosmwasm-stargate'
+import type { Coin } from '@cosmjs/proto-signing'
+import type { logs } from '@cosmjs/stargate'
+
+export interface InstantiateResponse {
+  readonly contractAddress: string
+  readonly transactionHash: string
+}
+
+export interface MigrateResponse {
+  readonly transactionHash: string
+  readonly logs: readonly logs.Log[]
+}
+
+export interface SplitsInstance {
+  readonly contractAddress: string
+  //Query
+  getAdmin: () => Promise<string>
+  getMemberWeight: (member: string) => Promise<string>
+  listMembers: (startAfter?: string, limit?: number) => Promise<string[]>
+  getGroup: () => Promise<string>
+
+  //Execute
+  updateAdmin: (admin: string) => Promise<string>
+  distribute: () => Promise<string>
+}
+
+export interface SplitsMessages {
+  updateAdmin: (admin: string) => UpdateAdminMessage
+  distribute: () => DistributeMessage
+}
+
+export interface UpdateAdminMessage {
+  sender: string
+  contract: string
+  msg: {
+    update_admin: { admin: string }
+  }
+  funds: Coin[]
+}
+
+export interface DistributeMessage {
+  sender: string
+  contract: string
+  msg: { distribute: Record<string, never> }
+  funds: Coin[]
+}
+
+export interface SplitsContract {
+  instantiate: (
+    codeId: number,
+    initMsg: Record<string, unknown>,
+    label: string,
+    admin?: string,
+  ) => Promise<InstantiateResponse>
+
+  use: (contractAddress: string) => SplitsInstance
+
+  migrate: (
+    senderAddress: string,
+    contractAddress: string,
+    codeId: number,
+    migrateMsg: Record<string, unknown>,
+  ) => Promise<MigrateResponse>
+
+  messages: (contractAddress: string) => SplitsMessages
+}
+
+export const Splits = (client: SigningCosmWasmClient, txSigner: string): SplitsContract => {
+  const use = (contractAddress: string): SplitsInstance => {
+    ///QUERY
+    const listMembers = async (startAfter?: string, limit?: number): Promise<string[]> => {
+      return client.queryContractSmart(contractAddress, {
+        list_members: { start_after: startAfter ? startAfter : undefined, limit },
+      })
+    }
+
+    const getMemberWeight = async (address: string): Promise<string> => {
+      return client.queryContractSmart(contractAddress, {
+        member: { address },
+      })
+    }
+
+    const getAdmin = async (): Promise<string> => {
+      return client.queryContractSmart(contractAddress, {
+        admin: {},
+      })
+    }
+
+    const getGroup = async (): Promise<string> => {
+      return client.queryContractSmart(contractAddress, {
+        group: {},
+      })
+    }
+    /// EXECUTE
+    const updateAdmin = async (admin: string): Promise<string> => {
+      const res = await client.execute(
+        txSigner,
+        contractAddress,
+        {
+          update_admin: {
+            admin,
+          },
+        },
+        'auto',
+      )
+      return res.transactionHash
+    }
+
+    const distribute = async (): Promise<string> => {
+      const res = await client.execute(
+        txSigner,
+        contractAddress,
+        {
+          distribute: {},
+        },
+        'auto',
+      )
+      return res.transactionHash
+    }
+    return {
+      contractAddress,
+      updateAdmin,
+      distribute,
+      getMemberWeight,
+      getAdmin,
+      listMembers,
+      getGroup,
+    }
+  }
+
+  const instantiate = async (
+    codeId: number,
+    initMsg: Record<string, unknown>,
+    label: string,
+    admin?: string,
+  ): Promise<InstantiateResponse> => {
+    const result = await client.instantiate(txSigner, codeId, initMsg, label, 'auto', {
+      admin,
+    })
+
+    return {
+      contractAddress: result.contractAddress,
+      transactionHash: result.transactionHash,
+    }
+  }
+
+  const migrate = async (
+    senderAddress: string,
+    contractAddress: string,
+    codeId: number,
+    migrateMsg: Record<string, unknown>,
+  ): Promise<MigrateResponse> => {
+    const result = await client.migrate(senderAddress, contractAddress, codeId, migrateMsg, 'auto')
+    return {
+      transactionHash: result.transactionHash,
+      logs: result.logs,
+    }
+  }
+
+  const messages = (contractAddress: string) => {
+    const updateAdmin = (admin: string) => {
+      return {
+        sender: txSigner,
+        contract: contractAddress,
+        msg: {
+          update_admin: { admin },
+        },
+        funds: [],
+      }
+    }
+
+    const distribute = () => {
+      return {
+        sender: txSigner,
+        contract: contractAddress,
+        msg: {
+          distribute: {},
+        },
+        funds: [],
+      }
+    }
+
+    return {
+      updateAdmin,
+      distribute,
+    }
+  }
+
+  return { use, instantiate, migrate, messages }
+}

contracts/splits/index.ts

@@ -0,0 +1,2 @@
+export * from './contract'
+export * from './useContract'

contracts/splits/messages/execute.ts

@@ -0,0 +1,79 @@
+/* eslint-disable eslint-comments/disable-enable-pair */
+
+import type { SplitsInstance } from '../index'
+import { useSplitsContract } from '../index'
+
+export type ExecuteType = typeof EXECUTE_TYPES[number]
+
+export const EXECUTE_TYPES = ['update_admin', 'distribute'] as const
+
+export interface ExecuteListItem {
+  id: ExecuteType
+  name: string
+  description?: string
+}
+
+export const EXECUTE_LIST: ExecuteListItem[] = [
+  {
+    id: 'update_admin',
+    name: 'Update Admin',
+    description: `Update the splits contract admin`,
+  },
+  {
+    id: 'distribute',
+    name: 'Distribute',
+    description: `Distribute the revenue to the group members`,
+  },
+]
+
+export interface DispatchExecuteProps {
+  type: ExecuteType
+  [k: string]: unknown
+}
+
+type Select<T extends ExecuteType> = T
+
+/** @see {@link SplitsInstance} */
+export type DispatchExecuteArgs = {
+  contract: string
+  messages?: SplitsInstance
+} & ({ type: Select<'update_admin'>; admin: string } | { type: Select<'distribute'> | undefined })
+
+export const dispatchExecute = async (args: DispatchExecuteArgs) => {
+  const { messages } = args
+  if (!messages) {
+    throw new Error('Cannot dispatch execute, messages are not defined')
+  }
+  switch (args.type) {
+    case 'update_admin': {
+      return messages.updateAdmin(args.admin)
+    }
+    case 'distribute': {
+      return messages.distribute()
+    }
+    default: {
+      throw new Error('Unknown execution type')
+    }
+  }
+}
+
+export const previewExecutePayload = (args: DispatchExecuteArgs) => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const { messages } = useSplitsContract()
+  const { contract } = args
+  switch (args.type) {
+    case 'update_admin': {
+      return messages(contract)?.updateAdmin(args.admin)
+    }
+    case 'distribute': {
+      return messages(contract)?.distribute()
+    }
+    default: {
+      return {}
+    }
+  }
+}
+
+export const isEitherType = <T extends ExecuteType>(type: unknown, arr: T[]): type is T => {
+  return arr.some((val) => type === val)
+}

contracts/splits/messages/query.ts

@@ -0,0 +1,43 @@
+import type { SplitsInstance } from '../contract'
+
+export type QueryType = typeof QUERY_TYPES[number]
+
+export const QUERY_TYPES = ['admin', 'group', 'member', 'list_members'] as const
+
+export interface QueryListItem {
+  id: QueryType
+  name: string
+  description?: string
+}
+
+export const QUERY_LIST: QueryListItem[] = [
+  { id: 'list_members', name: 'Query Members', description: 'View the group members' },
+  { id: 'member', name: 'Query Member Weight', description: 'Query the weight of a member in the group' },
+  { id: 'admin', name: 'Query Admin', description: 'View the splits contract admin' },
+  { id: 'group', name: 'Query Group Contract Address', description: 'View the group contract address' },
+]
+
+export interface DispatchQueryProps {
+  messages: SplitsInstance | undefined
+  type: QueryType
+  address: string
+  startAfter?: string
+  limit?: number
+}
+
+export const dispatchQuery = (props: DispatchQueryProps) => {
+  const { messages, type, address, startAfter, limit } = props
+  switch (type) {
+    case 'list_members':
+      return messages?.listMembers(startAfter, limit)
+    case 'admin':
+      return messages?.getAdmin()
+    case 'member':
+      return messages?.getMemberWeight(address)
+    case 'group':
+      return messages?.getGroup()
+    default: {
+      throw new Error('unknown query type')
+    }
+  }
+}

contracts/splits/useContract.ts

@@ -0,0 +1,93 @@
+/* eslint-disable eslint-comments/disable-enable-pair */
+
+import { useWallet } from 'contexts/wallet'
+import { useCallback, useEffect, useState } from 'react'
+
+import type { InstantiateResponse, MigrateResponse, SplitsContract, SplitsInstance, SplitsMessages } from './contract'
+import { Splits as initContract } from './contract'
+
+export interface UseSplitsContractProps {
+  instantiate: (
+    codeId: number,
+    initMsg: Record<string, unknown>,
+    label: string,
+    admin?: string,
+  ) => Promise<InstantiateResponse>
+
+  migrate: (contractAddress: string, codeId: number, migrateMsg: Record<string, unknown>) => Promise<MigrateResponse>
+
+  use: (customAddress?: string) => SplitsInstance | undefined
+
+  updateContractAddress: (contractAddress: string) => void
+
+  messages: (contractAddress: string) => SplitsMessages | undefined
+}
+
+export function useSplitsContract(): UseSplitsContractProps {
+  const wallet = useWallet()
+
+  const [address, setAddress] = useState<string>('')
+  const [splits, setSplits] = useState<SplitsContract>()
+
+  useEffect(() => {
+    setAddress(localStorage.getItem('contract_address') || '')
+  }, [])
+
+  useEffect(() => {
+    const splitsContract = initContract(wallet.getClient(), wallet.address)
+    setSplits(splitsContract)
+  }, [wallet])
+
+  const updateContractAddress = (contractAddress: string) => {
+    setAddress(contractAddress)
+  }
+
+  const instantiate = useCallback(
+    (codeId: number, initMsg: Record<string, unknown>, label: string, admin?: string): Promise<InstantiateResponse> => {
+      return new Promise((resolve, reject) => {
+        if (!splits) {
+          reject(new Error('Contract is not initialized.'))
+          return
+        }
+        splits.instantiate(codeId, initMsg, label, admin).then(resolve).catch(reject)
+      })
+    },
+    [splits],
+  )
+
+  const migrate = useCallback(
+    (contractAddress: string, codeId: number, migrateMsg: Record<string, unknown>): Promise<MigrateResponse> => {
+      return new Promise((resolve, reject) => {
+        if (!splits) {
+          reject(new Error('Contract is not initialized.'))
+          return
+        }
+        console.log(wallet.address, contractAddress, codeId)
+        splits.migrate(wallet.address, contractAddress, codeId, migrateMsg).then(resolve).catch(reject)
+      })
+    },
+    [splits, wallet],
+  )
+
+  const use = useCallback(
+    (customAddress = ''): SplitsInstance | undefined => {
+      return splits?.use(address || customAddress)
+    },
+    [splits, address],
+  )
+
+  const messages = useCallback(
+    (customAddress = ''): SplitsMessages | undefined => {
+      return splits?.messages(address || customAddress)
+    },
+    [splits, address],
+  )
+
+  return {
+    instantiate,
+    migrate,
+    use,
+    updateContractAddress,
+    messages,
+  }
+}

env.d.ts

@@ -25,6 +25,8 @@ declare namespace NodeJS {
     readonly NEXT_PUBLIC_BADGE_HUB_ADDRESS: string
     readonly NEXT_PUBLIC_BADGE_NFT_CODE_ID: string
     readonly NEXT_PUBLIC_BADGE_NFT_ADDRESS: string
+    readonly NEXT_PUBLIC_SPLITS_CODE_ID: string
+    readonly NEXT_PUBLIC_CW4_GROUP_CODE_ID: string
 
     readonly NEXT_PUBLIC_PINATA_ENDPOINT_URL: string
     readonly NEXT_PUBLIC_API_URL: string

package.json

@@ -1,6 +1,6 @@
 {
   "name": "stargaze-studio",
-  "version": "0.4.8",
+  "version": "0.4.9",
   "workspaces": [
     "packages/*"
   ],

pages/collections/create.tsx

@@ -408,6 +408,7 @@ const CollectionCreationPage: NextPage = () => {
           base_token_uri: `${uploadDetails?.uploadMethod === 'new' ? `ipfs://${baseUri}` : `${baseUri}`}`,
           start_time: mintingDetails?.startTime,
           num_tokens: mintingDetails?.numTokens,
+          payment_address: mintingDetails?.paymentAddress ? mintingDetails.paymentAddress.trim() : undefined,
           mint_price: {
             amount: mintingDetails?.unitPrice,
             denom: 'ustars',
@@ -761,6 +762,12 @@ const CollectionCreationPage: NextPage = () => {
       )
     if (mintingDetails.startTime === '') throw new Error('Start time is required')
     if (Number(mintingDetails.startTime) < new Date().getTime() * 1000000) throw new Error('Invalid start time')
+    if (
+      mintingDetails.paymentAddress &&
+      (!isValidAddress(mintingDetails.paymentAddress.trim()) ||
+        !mintingDetails.paymentAddress.trim().startsWith('stars1'))
+    )
+      throw new Error('Invalid payment address')
   }
 
   const checkWhitelistDetails = async () => {
@@ -851,11 +858,19 @@ const CollectionCreationPage: NextPage = () => {
     if (minterType === 'vending' && whitelistDetails?.whitelistType === 'new' && whitelistDetails.memberLimit) {
       const amountNeeded = Math.ceil(Number(whitelistDetails.memberLimit) / 1000) * 100000000 + 3000000000
       if (amountNeeded >= Number(wallet.balance[0].amount))
-        throw new Error('Insufficient wallet balance to instantiate the required contracts.')
+        throw new Error(
+          `Insufficient wallet balance to instantiate the required contracts. Needed amount: ${(
+            amountNeeded / 1000000
+          ).toString()} STARS`,
+        )
     } else {
       const amountNeeded = minterType === 'vending' ? 3000000000 : 1000000000
       if (amountNeeded >= Number(wallet.balance[0].amount))
-        throw new Error('Insufficient wallet balance to instantiate the required contracts.')
+        throw new Error(
+          `Insufficient wallet balance to instantiate the required contracts. Needed amount: ${(
+            amountNeeded / 1000000
+          ).toString()} STARS`,
+        )
     }
   }
   useEffect(() => {

pages/contracts/index.tsx

@@ -58,6 +58,9 @@ const HomePage: NextPage = () => {
             Execute messages and run queries on the Badge Hub contract designed for event organizers.
           </HomeCard>
         </Conditional>
+        <HomeCard className="p-4 -m-4 hover:bg-gray-500/10 rounded" link="/contracts/splits" title="Splits Contract">
+          Execute messages and run queries on the Splits contract designed for revenue distribution.
+        </HomeCard>
       </div>
     </section>
   )

pages/contracts/splits/execute.tsx

@@ -0,0 +1,135 @@
+import { Button } from 'components/Button'
+import { Conditional } from 'components/Conditional'
+import { ContractPageHeader } from 'components/ContractPageHeader'
+import { ExecuteCombobox } from 'components/contracts/splits/ExecuteCombobox'
+import { useExecuteComboboxState } from 'components/contracts/splits/ExecuteCombobox.hooks'
+import { FormControl } from 'components/FormControl'
+import { AddressInput } from 'components/forms/FormInput'
+import { useInputState } from 'components/forms/FormInput.hooks'
+import { JsonPreview } from 'components/JsonPreview'
+import { LinkTabs } from 'components/LinkTabs'
+import { splitsLinkTabs } from 'components/LinkTabs.data'
+import { TransactionHash } from 'components/TransactionHash'
+import { useContracts } from 'contexts/contracts'
+import { useWallet } from 'contexts/wallet'
+import type { DispatchExecuteArgs } from 'contracts/splits/messages/execute'
+import { dispatchExecute, isEitherType, previewExecutePayload } from 'contracts/splits/messages/execute'
+import type { NextPage } from 'next'
+import { useRouter } from 'next/router'
+import { NextSeo } from 'next-seo'
+import type { FormEvent } from 'react'
+import { useEffect, 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'
+
+const SplitsExecutePage: NextPage = () => {
+  const { splits: contract } = useContracts()
+  const wallet = useWallet()
+
+  const [lastTx, setLastTx] = useState('')
+
+  const comboboxState = useExecuteComboboxState()
+  const type = comboboxState.value?.id
+
+  const contractState = useInputState({
+    id: 'contract-address',
+    name: 'contract-address',
+    title: 'Splits Address',
+    subtitle: 'Address of the Splits contract',
+  })
+  const contractAddress = contractState.value
+
+  const adminAddressState = useInputState({
+    id: 'admin-address',
+    name: 'admin-address',
+    title: 'Admin Address',
+    subtitle: 'Address of the new administrator',
+  })
+
+  const showAdminAddress = isEitherType(type, ['update_admin'])
+
+  const messages = useMemo(() => contract?.use(contractState.value), [contract, contractState.value])
+  const payload: DispatchExecuteArgs = {
+    contract: contractState.value,
+    messages,
+    type,
+    admin: adminAddressState.value.trim(),
+  }
+  const { isLoading, mutate } = useMutation(
+    async (event: FormEvent) => {
+      event.preventDefault()
+      if (!type) {
+        throw new Error('Please select message type!')
+      }
+      if (!wallet.initialized) {
+        throw new Error('Please connect your wallet.')
+      }
+      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), { style: { maxWidth: 'none' } })
+      },
+    },
+  )
+
+  const router = useRouter()
+
+  useEffect(() => {
+    if (contractAddress.length > 0) {
+      void router.replace({ query: { contractAddress } })
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [contractAddress])
+  useEffect(() => {
+    const initial = new URL(document.URL).searchParams.get('contractAddress')
+    if (initial && initial.length > 0) contractState.onChange(initial)
+  }, [])
+
+  return (
+    <section className="py-6 px-12 space-y-4">
+      <NextSeo title="Execute Splits Contract" />
+      <ContractPageHeader
+        description="Splits contract distributes funds to a cw4-group based on member weights."
+        link={links.Documentation}
+        title="Splits Contract"
+      />
+      <LinkTabs activeIndex={2} data={splitsLinkTabs} />
+
+      <form className="grid grid-cols-2 p-4 space-x-8" onSubmit={mutate}>
+        <div className="space-y-8">
+          <AddressInput {...contractState} />
+          <ExecuteCombobox {...comboboxState} />
+          <Conditional test={showAdminAddress}>
+            <AddressInput {...adminAddressState} />
+          </Conditional>
+        </div>
+        <div className="space-y-8">
+          <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>
+      </form>
+    </section>
+  )
+}
+
+export default withMetadata(SplitsExecutePage, { center: false })

pages/contracts/splits/index.tsx

@@ -0,0 +1 @@
+export { default } from './instantiate'

pages/contracts/splits/instantiate.tsx

@@ -0,0 +1,237 @@
+import { toBase64, toUtf8 } from '@cosmjs/encoding'
+import { Alert } from 'components/Alert'
+import { Button } from 'components/Button'
+import { Conditional } from 'components/Conditional'
+import { ContractPageHeader } from 'components/ContractPageHeader'
+import { AddressInput } from 'components/forms/FormInput'
+import { JsonPreview } from 'components/JsonPreview'
+import { LinkTabs } from 'components/LinkTabs'
+import { splitsLinkTabs } from 'components/LinkTabs.data'
+import { useContracts } from 'contexts/contracts'
+import { useWallet } from 'contexts/wallet'
+import type { InstantiateResponse } from 'contracts/sg721'
+import type { NextPage } from 'next'
+import { NextSeo } from 'next-seo'
+import { type FormEvent, useEffect, useState } from 'react'
+import { toast } from 'react-hot-toast'
+import { FaAsterisk } from 'react-icons/fa'
+import { useMutation } from 'react-query'
+import { isValidAddress } from 'utils/isValidAddress'
+import { withMetadata } from 'utils/layout'
+import { links } from 'utils/links'
+
+import { useInputState } from '../../../components/forms/FormInput.hooks'
+import type { Attribute } from '../../../components/forms/MemberAttributes'
+import { MemberAttributes } from '../../../components/forms/MemberAttributes'
+import { useMemberAttributesState } from '../../../components/forms/MemberAttributes.hooks'
+import { CW4_GROUP_CODE_ID, SPLITS_CODE_ID } from '../../../utils/constants'
+import { resolveAddress } from '../../../utils/resolveAddress'
+
+export type CW4Method = 'new' | 'existing'
+
+const SplitsInstantiatePage: NextPage = () => {
+  const wallet = useWallet()
+  const { splits: contract } = useContracts()
+  const [members, setMembers] = useState<Attribute[]>([])
+  const [cw4Method, setCw4Method] = useState<CW4Method>('new')
+
+  const cw4GroupAddressState = useInputState({
+    id: 'cw4-group-address',
+    name: 'cw4-group-address',
+    title: 'CW4 Group Address',
+    subtitle: 'Address of the CW4 Group contract',
+    placeholder: 'stars1...',
+  })
+
+  const splitsAdminState = useInputState({
+    id: 'splits-admin',
+    name: 'splits-admin',
+    title: 'Splits Contract Admin',
+    subtitle: 'Address of the Splits Contract administrator',
+    defaultValue: wallet.address,
+  })
+
+  const cw4GroupAdminState = useInputState({
+    id: 'cw4-group-admin',
+    name: 'cw4-group-admin',
+    title: 'CW4 Group Admin',
+    subtitle: 'Address of the CW4 Group administrator',
+    defaultValue: wallet.address,
+  })
+
+  const memberListState = useMemberAttributesState()
+
+  useEffect(() => {
+    memberListState.reset()
+    memberListState.add({
+      address: '',
+      weight: 0,
+    })
+  }, [])
+
+  const { data, isLoading, mutate } = useMutation(
+    async (event: FormEvent): Promise<InstantiateResponse | null> => {
+      event.preventDefault()
+      if (!contract) {
+        throw new Error('Smart contract connection failed')
+      }
+      const msg =
+        cw4Method === 'existing'
+          ? {
+              admin: splitsAdminState.value ? splitsAdminState.value : undefined,
+              group: { cw4_address: cw4GroupAddressState.value },
+            }
+          : {
+              admin: splitsAdminState.value ? splitsAdminState.value : undefined,
+              group: {
+                cw4_instantiate: {
+                  code_id: CW4_GROUP_CODE_ID,
+                  label: 'cw4-group',
+                  msg: toBase64(
+                    toUtf8(
+                      JSON.stringify({
+                        admin: cw4GroupAdminState.value ? cw4GroupAdminState.value : undefined,
+                        members: [
+                          ...new Set(
+                            members
+                              .filter(
+                                (member) =>
+                                  member.address !== '' &&
+                                  member.weight > 0 &&
+                                  isValidAddress(member.address) &&
+                                  member.address.startsWith('stars'),
+                              )
+                              .map((member) => ({ addr: member.address, weight: member.weight })),
+                          ),
+                        ],
+                      }),
+                    ),
+                  ),
+                },
+              },
+            }
+      return toast.promise(contract.instantiate(SPLITS_CODE_ID, msg, 'Stargaze Splits Contract', wallet.address), {
+        loading: 'Instantiating contract...',
+        error: 'Instantiation failed!',
+        success: 'Instantiation success!',
+      })
+    },
+    {
+      onError: (error) => {
+        toast.error(String(error), { style: { maxWidth: 'none' } })
+      },
+    },
+  )
+
+  const resolveMemberAddresses = () => {
+    const tempMembers: Attribute[] = []
+    memberListState.values.map(async (member) => {
+      await resolveAddress(member.address.trim(), wallet).then((resolvedAddress) => {
+        tempMembers.push({ address: resolvedAddress, weight: member.weight })
+      })
+    })
+    setMembers(tempMembers)
+    console.log('Members:', members)
+  }
+
+  useEffect(() => {
+    resolveMemberAddresses()
+  }, [memberListState.values])
+
+  return (
+    <form className="py-6 px-12 space-y-4" onSubmit={mutate}>
+      <NextSeo title="Instantiate Splits Contract" />
+      <ContractPageHeader
+        description="Splits contract distributes funds to a cw4-group based on member weights."
+        link={links.Documentation}
+        title="Splits Contract"
+      />
+      <LinkTabs activeIndex={0} data={splitsLinkTabs} />
+
+      <Conditional test={Boolean(data)}>
+        <Alert type="info">
+          <b>Instantiate success!</b> Here is the transaction result containing the contract address and the transaction
+          hash.
+        </Alert>
+        <JsonPreview content={data} title="Transaction Result" />
+        <br />
+      </Conditional>
+
+      <div className="justify-items-start mb-3 flex-column">
+        <div className="flex">
+          <div className="mt-3 ml-4 font-bold form-check form-check-inline">
+            <input
+              checked={cw4Method === 'new'}
+              className="peer sr-only"
+              id="inlineRadio2"
+              name="inlineRadioOptions2"
+              onClick={() => {
+                setCw4Method('new')
+              }}
+              type="radio"
+              value="New"
+            />
+            <label
+              className="inline-block py-1 px-2 text-gray peer-checked:text-white hover:text-white peer-checked:bg-black peer-checked:border-b-2 hover:border-b-2  peer-checked:border-plumbus hover:border-plumbus cursor-pointer form-check-label"
+              htmlFor="inlineRadio2"
+            >
+              New CW4 Group Contract
+            </label>
+          </div>
+          <div className="mt-3 ml-2 font-bold form-check form-check-inline">
+            <input
+              checked={cw4Method === 'existing'}
+              className="peer sr-only"
+              id="inlineRadio1"
+              name="inlineRadioOptions1"
+              onClick={() => {
+                setCw4Method('existing')
+              }}
+              type="radio"
+              value="Existing"
+            />
+            <label
+              className="inline-block py-1 px-2 text-gray peer-checked:text-white hover:text-white peer-checked:bg-black peer-checked:border-b-2 hover:border-b-2  peer-checked:border-plumbus hover:border-plumbus cursor-pointer form-check-label"
+              htmlFor="inlineRadio1"
+            >
+              Use an existing CW4 Group Contract
+            </label>
+          </div>
+        </div>
+      </div>
+      <div className="grid grid-cols-2 gap-4">
+        <div>
+          <AddressInput className="mt-2 ml-4 w-full" {...splitsAdminState} />
+          <Conditional test={cw4Method === 'new'}>
+            <AddressInput className="mt-2 ml-4 w-full" {...cw4GroupAdminState} />
+          </Conditional>
+          <Conditional test={cw4Method === 'existing'}>
+            <AddressInput className="mt-2 ml-4 w-full" {...cw4GroupAddressState} />
+          </Conditional>
+        </div>
+        <div>
+          <Conditional test={cw4Method === 'new'}>
+            <div className="ml-4 w-full">
+              <MemberAttributes
+                attributes={memberListState.entries}
+                onAdd={memberListState.add}
+                onChange={memberListState.update}
+                onRemove={memberListState.remove}
+                title="Members"
+              />
+            </div>
+          </Conditional>
+        </div>
+      </div>
+
+      <div className="flex items-center p-4">
+        <div className="flex-grow" />
+        <Button isLoading={isLoading} isWide rightIcon={<FaAsterisk />} type="submit">
+          Instantiate Contract
+        </Button>
+      </div>
+    </form>
+  )
+}
+
+export default withMetadata(SplitsInstantiatePage, { center: false })

pages/contracts/splits/migrate.tsx

@@ -0,0 +1,133 @@
+import { Button } from 'components/Button'
+import { ContractPageHeader } from 'components/ContractPageHeader'
+import { useExecuteComboboxState } from 'components/contracts/splits/ExecuteCombobox.hooks'
+import { FormControl } from 'components/FormControl'
+import { AddressInput, NumberInput } from 'components/forms/FormInput'
+import { useInputState, useNumberInputState } from 'components/forms/FormInput.hooks'
+import { JsonPreview } from 'components/JsonPreview'
+import { LinkTabs } from 'components/LinkTabs'
+import { splitsLinkTabs } from 'components/LinkTabs.data'
+import { TransactionHash } from 'components/TransactionHash'
+import { useContracts } from 'contexts/contracts'
+import { useWallet } from 'contexts/wallet'
+import type { MigrateResponse } from 'contracts/splits'
+import type { NextPage } from 'next'
+import { useRouter } from 'next/router'
+import { NextSeo } from 'next-seo'
+import type { FormEvent } from 'react'
+import { useEffect, 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'
+
+const SplitsMigratePage: NextPage = () => {
+  const { splits: contract } = useContracts()
+  const wallet = useWallet()
+
+  const [lastTx, setLastTx] = useState('')
+
+  const comboboxState = useExecuteComboboxState()
+  const type = comboboxState.value?.id
+  const codeIdState = useNumberInputState({
+    id: 'code-id',
+    name: 'code-id',
+    title: 'Code ID',
+    subtitle: 'Code ID of the New Splits contract',
+    placeholder: '1',
+  })
+
+  const contractState = useInputState({
+    id: 'contract-address',
+    name: 'contract-address',
+    title: 'Splits Address',
+    subtitle: 'Address of the Splits contract',
+  })
+  const contractAddress = contractState.value
+
+  const { data, isLoading, mutate } = useMutation(
+    async (event: FormEvent): Promise<MigrateResponse | null> => {
+      event.preventDefault()
+      if (!contract) {
+        throw new Error('Smart contract connection failed')
+      }
+      if (!wallet.initialized) {
+        throw new Error('Please connect your wallet.')
+      }
+
+      const migrateMsg = {}
+
+      return toast.promise(contract.migrate(contractAddress, codeIdState.value, migrateMsg), {
+        error: `Migration failed!`,
+        loading: 'Executing message...',
+        success: (tx) => {
+          if (tx) {
+            setLastTx(tx.transactionHash)
+          }
+          return `Transaction success!`
+        },
+      })
+    },
+    {
+      onError: (error) => {
+        toast.error(String(error), { style: { maxWidth: 'none' } })
+      },
+    },
+  )
+
+  const router = useRouter()
+
+  useEffect(() => {
+    if (contractAddress.length > 0) {
+      void router.replace({ query: { contractAddress } })
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [contractAddress])
+  useEffect(() => {
+    const initial = new URL(document.URL).searchParams.get('contractAddress')
+    if (initial && initial.length > 0) contractState.onChange(initial)
+  }, [])
+
+  return (
+    <section className="py-6 px-12 space-y-4">
+      <NextSeo title="Migrate Splits Contract" />
+      <ContractPageHeader
+        description="Splits contract distributes funds to a cw4-group based on member weights."
+        link={links.Documentation}
+        title="Splits Contract"
+      />
+      <LinkTabs activeIndex={3} data={splitsLinkTabs} />
+
+      <form className="grid grid-cols-2 p-4 space-x-8" onSubmit={mutate}>
+        <div className="space-y-8">
+          <AddressInput {...contractState} />
+          <NumberInput isRequired {...codeIdState} />
+        </div>
+        <div className="space-y-8">
+          <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={{
+                sender: wallet.address,
+                contract: contractAddress,
+                code_id: codeIdState.value,
+                msg: {},
+              }}
+              isCopyable
+            />
+          </FormControl>
+        </div>
+      </form>
+    </section>
+  )
+}
+
+export default withMetadata(SplitsMigratePage, { center: false })

pages/contracts/splits/query.tsx

@@ -0,0 +1,156 @@
+import clsx from 'clsx'
+import { Conditional } from 'components/Conditional'
+import { ContractPageHeader } from 'components/ContractPageHeader'
+import { FormControl } from 'components/FormControl'
+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'
+import { splitsLinkTabs } from 'components/LinkTabs.data'
+import { useContracts } from 'contexts/contracts'
+import { useWallet } from 'contexts/wallet'
+import type { QueryType } from 'contracts/splits/messages/query'
+import { dispatchQuery, QUERY_LIST } from 'contracts/splits/messages/query'
+import type { NextPage } from 'next'
+import { useRouter } from 'next/router'
+import { NextSeo } from 'next-seo'
+import { useEffect, useState } from 'react'
+import { toast } from 'react-hot-toast'
+import { useQuery } from 'react-query'
+import { withMetadata } from 'utils/layout'
+import { links } from 'utils/links'
+import { resolveAddress } from 'utils/resolveAddress'
+
+const SplitsQueryPage: NextPage = () => {
+  const { splits: contract } = useContracts()
+  const wallet = useWallet()
+
+  const contractState = useInputState({
+    id: 'contract-address',
+    name: 'contract-address',
+    title: 'Splits Address',
+    subtitle: 'Address of the Splits contract',
+  })
+  const contractAddress = contractState.value
+
+  const memberAddressState = useInputState({
+    id: 'member-address',
+    name: 'member-address',
+    title: 'Member Address',
+    subtitle: 'Member address to query the weight for',
+  })
+
+  const memberAddress = memberAddressState.value
+
+  const startAfterStringState = useInputState({
+    id: 'start-after-string',
+    name: 'start-after-string',
+    title: 'Start After (optional)',
+    subtitle: 'The member address 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)',
+    defaultValue: 5,
+  })
+
+  const [type, setType] = useState<QueryType>('list_members')
+
+  const { data: response } = useQuery(
+    [
+      contractAddress,
+      type,
+      contract,
+      wallet,
+      memberAddress,
+      startAfterStringState.value,
+      paginationLimitState.value,
+    ] as const,
+    async ({ queryKey }) => {
+      const [_contractAddress, _type, _contract, _wallet, _memberAddress, startAfter, limit] = queryKey
+      const messages = contract?.use(contractAddress)
+      const res = await resolveAddress(_memberAddress, wallet).then(async (resolvedAddress) => {
+        const result = await dispatchQuery({
+          messages,
+          type,
+          address: resolvedAddress,
+          startAfter: startAfter.length > 0 ? startAfter : undefined,
+          limit: limit > 0 ? limit : undefined,
+        })
+        return result
+      })
+      return res
+    },
+    {
+      placeholderData: null,
+      onError: (error: any) => {
+        toast.error(error.message, { style: { maxWidth: 'none' } })
+      },
+      enabled: Boolean(contractAddress && contract && wallet),
+    },
+  )
+
+  const router = useRouter()
+
+  useEffect(() => {
+    if (contractAddress.length > 0) {
+      void router.replace({ query: { contractAddress } })
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [contractAddress])
+  useEffect(() => {
+    const initial = new URL(document.URL).searchParams.get('contractAddress')
+    if (initial && initial.length > 0) contractState.onChange(initial)
+  }, [])
+
+  return (
+    <section className="py-6 px-12 space-y-4">
+      <NextSeo title="Query Splits Contract" />
+      <ContractPageHeader
+        description="Splits contract distributes funds to a cw4-group based on member weights."
+        link={links.Documentation}
+        title="Splits Contract"
+      />
+      <LinkTabs activeIndex={1} data={splitsLinkTabs} />
+
+      <div className="grid grid-cols-2 p-4 space-x-8">
+        <div className="space-y-8">
+          <AddressInput {...contractState} />
+          <FormControl htmlId="contract-query-type" subtitle="Type of query to be dispatched" title="Query Type">
+            <select
+              className={clsx(
+                'bg-white/10 rounded border-2 border-white/20 form-select',
+                'placeholder:text-white/50',
+                'focus:ring focus:ring-plumbus-20',
+              )}
+              defaultValue="config"
+              id="contract-query-type"
+              name="query-type"
+              onChange={(e) => setType(e.target.value as QueryType)}
+            >
+              {QUERY_LIST.map(({ id, name }) => (
+                <option key={`query-${id}`} className="mt-2 text-lg bg-[#1A1A1A]" value={id}>
+                  {name}
+                </option>
+              ))}
+            </select>
+          </FormControl>
+          <Conditional test={type === 'member'}>
+            <AddressInput {...memberAddressState} />
+          </Conditional>
+
+          <Conditional test={type === 'list_members'}>
+            <TextInput {...startAfterStringState} />
+            <NumberInput {...paginationLimitState} />
+          </Conditional>
+        </div>
+        <JsonPreview content={contractAddress ? { type, response } : null} title="Query Response" />
+      </div>
+    </section>
+  )
+}
+
+export default withMetadata(SplitsQueryPage, { center: false })

utils/constants.ts

@@ -9,6 +9,8 @@ export const BADGE_HUB_CODE_ID = parseInt(process.env.NEXT_PUBLIC_BADGE_HUB_CODE
 export const BADGE_HUB_ADDRESS = process.env.NEXT_PUBLIC_BADGE_HUB_ADDRESS
 export const BADGE_NFT_CODE_ID = parseInt(process.env.NEXT_PUBLIC_BADGE_NFT_CODE_ID, 10)
 export const BADGE_NFT_ADDRESS = process.env.NEXT_PUBLIC_BADGE_NFT_ADDRESS
+export const SPLITS_CODE_ID = parseInt(process.env.NEXT_PUBLIC_SPLITS_CODE_ID, 10)
+export const CW4_GROUP_CODE_ID = parseInt(process.env.NEXT_PUBLIC_CW4_GROUP_CODE_ID, 10)
 
 export const PINATA_ENDPOINT_URL = process.env.NEXT_PUBLIC_PINATA_ENDPOINT_URL
 export const NETWORK = process.env.NEXT_PUBLIC_NETWORK