Merge pull request #228 from public-awesome/royalty-registry

Royalty registry support

.env.example

@@ -1,4 +1,4 @@
-APP_VERSION=0.7.9
+APP_VERSION=0.7.10
 
 NEXT_PUBLIC_PINATA_ENDPOINT_URL=https://api.pinata.cloud/pinning/pinFileToIPFS
 NEXT_PUBLIC_SG721_CODE_ID=2595
@@ -39,6 +39,7 @@ NEXT_PUBLIC_OPEN_EDITION_IBC_FRNZ_FACTORY_ADDRESS="stars1vzffawsjhvspstu5lvtzz2x
 NEXT_PUBLIC_OPEN_EDITION_UPDATABLE_IBC_FRNZ_FACTORY_ADDRESS="stars1tc09vlgdg8rqyapcxwm9qdq8naj4gym9px4ntue9cs0kse5rvess0nee3a"
 
 NEXT_PUBLIC_SG721_NAME_ADDRESS="stars1fx74nkqkw2748av8j7ew7r3xt9cgjqduwn8m0ur5lhe49uhlsasszc5fhr"
+NEXT_PUBLIC_ROYALTY_REGISTRY_ADDRESS="stars1crgx0f70fzksa57hq87wtl8f04h0qyk5la0hk0fu8dyhl67ju80qaxzr5z"
 NEXT_PUBLIC_WHITELIST_CODE_ID=2602
 NEXT_PUBLIC_WHITELIST_FLEX_CODE_ID=2603
 NEXT_PUBLIC_BADGE_HUB_CODE_ID=1336

components/LinkTabs.data.ts

@@ -145,3 +145,16 @@ export const splitsLinkTabs: LinkTabProps[] = [
     href: '/contracts/splits/migrate',
   },
 ]
+
+export const royaltyRegistryLinkTabs: LinkTabProps[] = [
+  {
+    title: 'Query',
+    description: `Dispatch queries for your Royalty Registry contract`,
+    href: '/contracts/royaltyRegistry/query',
+  },
+  {
+    title: 'Execute',
+    description: `Execute Royalty Registry contract actions`,
+    href: '/contracts/royaltyRegistry/execute',
+  },
+]

components/Sidebar.tsx

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

components/contracts/royaltyRegistry/ExecuteCombobox.hooks.ts

@@ -0,0 +1,7 @@
+import type { ExecuteListItem } from 'contracts/royaltyRegistry/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/royaltyRegistry/ExecuteCombobox.tsx

@@ -0,0 +1,92 @@
+import { Combobox, Transition } from '@headlessui/react'
+import clsx from 'clsx'
+import { FormControl } from 'components/FormControl'
+import type { ExecuteListItem } from 'contracts/royaltyRegistry/messages/execute'
+import { EXECUTE_LIST } from 'contracts/royaltyRegistry/messages/execute'
+import { matchSorter } from 'match-sorter'
+import { Fragment, useState } from 'react'
+import { FaChevronDown, FaInfoCircle } from 'react-icons/fa'
+
+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>
+  )
+}

contexts/contracts.tsx

@@ -6,6 +6,8 @@ import type { UseBaseMinterContractProps } from 'contracts/baseMinter'
 import { useBaseMinterContract } from 'contracts/baseMinter'
 import { type UseOpenEditionFactoryContractProps, useOpenEditionFactoryContract } from 'contracts/openEditionFactory'
 import { type UseOpenEditionMinterContractProps, useOpenEditionMinterContract } from 'contracts/openEditionMinter'
+import type { UseRoyaltyRegistryContractProps } from 'contracts/royaltyRegistry'
+import { useRoyaltyRegistryContract } from 'contracts/royaltyRegistry'
 import type { UseSG721ContractProps } from 'contracts/sg721'
 import { useSG721Contract } from 'contracts/sg721'
 import type { UseVendingFactoryContractProps } from 'contracts/vendingFactory'
@@ -36,6 +38,7 @@ export interface ContractsStore extends State {
   openEditionFactory: UseOpenEditionFactoryContractProps | null
   badgeHub: UseBadgeHubContractProps | null
   splits: UseSplitsContractProps | null
+  royaltyRegistry: UseRoyaltyRegistryContractProps | null
 }
 
 /**
@@ -52,6 +55,7 @@ export const defaultValues: ContractsStore = {
   openEditionFactory: null,
   badgeHub: null,
   splits: null,
+  royaltyRegistry: null,
 }
 
 /**
@@ -85,6 +89,7 @@ const ContractsSubscription: VFC = () => {
   const openEditionFactory = useOpenEditionFactoryContract()
   const badgeHub = useBadgeHubContract()
   const splits = useSplitsContract()
+  const royaltyRegistry = useRoyaltyRegistryContract()
 
   useEffect(() => {
     useContracts.setState({
@@ -98,8 +103,9 @@ const ContractsSubscription: VFC = () => {
       openEditionFactory,
       badgeHub,
       splits,
+      royaltyRegistry,
     })
-  }, [sg721, vendingMinter, baseMinter, whitelist, vendingFactory, baseFactory, badgeHub, splits])
+  }, [sg721, vendingMinter, baseMinter, whitelist, vendingFactory, baseFactory, badgeHub, splits, royaltyRegistry])
 
   return null
 }

contracts/royaltyRegistry/contract.ts

@@ -0,0 +1,407 @@
+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 RoyaltyRegistryInstance {
+  readonly contractAddress: string
+  //Query
+  config: () => Promise<string>
+  collectionRoyaltyDefault: (collection: string) => Promise<string>
+  collectionRoyaltyProtocol: (collection: string, protocol: string) => Promise<string>
+  // RoyaltyProtocolByCollection: (collection: string, queryOptions: QqueryOptions) => Promise<string>
+  royaltyPayment: (collection: string, protocol?: string) => Promise<string>
+
+  //Execute
+  initializeCollectionRoyalty: (collection: string) => Promise<string>
+  setCollectionRoyaltyDefault: (collection: string, recipient: string, share: number) => Promise<string>
+  updateCollectionRoyaltyDefault: (
+    collection: string,
+    recipient?: string,
+    shareDelta?: number,
+    decrement?: boolean,
+  ) => Promise<string>
+  setCollectionRoyaltyProtocol: (
+    collection: string,
+    protocol: string,
+    recipient: string,
+    share: number,
+  ) => Promise<string>
+  updateCollectionRoyaltyProtocol: (
+    collection: string,
+    protocol?: string,
+    recipient?: string,
+    shareDelta?: number,
+    decrement?: boolean,
+  ) => Promise<string>
+}
+
+export interface RoyaltyRegistryMessages {
+  initializeCollectionRoyalty: (collection: string) => InitializeCollectionRoyaltyMessage
+  setCollectionRoyaltyDefault: (
+    collection: string,
+    recipient: string,
+    share: number,
+  ) => SetCollectionRoyaltyDefaultMessage
+  updateCollectionRoyaltyDefault: (
+    collection: string,
+    recipient?: string,
+    shareDelta?: number,
+    decrement?: boolean,
+  ) => UpdateCollectionRoyaltyDefaultMessage
+  setCollectionRoyaltyProtocol: (
+    collection: string,
+    protocol: string,
+    recipient: string,
+    share: number,
+  ) => SetCollectionRoyaltyProtocolMessage
+  updateCollectionRoyaltyProtocol: (
+    collection: string,
+    protocol?: string,
+    recipient?: string,
+    shareDelta?: number,
+    decrement?: boolean,
+  ) => UpdateCollectionRoyaltyProtocolMessage
+}
+
+export interface InitializeCollectionRoyaltyMessage {
+  sender: string
+  contract: string
+  msg: {
+    initialize_collection_royalty: { collection: string }
+  }
+  funds: Coin[]
+}
+
+export interface SetCollectionRoyaltyDefaultMessage {
+  sender: string
+  contract: string
+  msg: {
+    set_collection_royalty_default: { collection: string; recipient: string; share: number }
+  }
+  funds: Coin[]
+}
+
+export interface UpdateCollectionRoyaltyDefaultMessage {
+  sender: string
+  contract: string
+  msg: {
+    update_collection_royalty_default: {
+      collection: string
+      recipient?: string
+      share_delta?: number
+      decrement?: boolean
+    }
+  }
+  funds: Coin[]
+}
+
+export interface SetCollectionRoyaltyProtocolMessage {
+  sender: string
+  contract: string
+  msg: {
+    set_collection_royalty_protocol: {
+      collection: string
+      protocol: string
+      recipient: string
+      share: number
+    }
+  }
+  funds: Coin[]
+}
+
+export interface UpdateCollectionRoyaltyProtocolMessage {
+  sender: string
+  contract: string
+  msg: {
+    update_collection_royalty_protocol: {
+      collection: string
+      protocol?: string
+      recipient?: string
+      share_delta?: number
+      decrement?: boolean
+    }
+  }
+  funds: Coin[]
+}
+
+export interface RoyaltyRegistryContract {
+  instantiate: (
+    codeId: number,
+    initMsg: Record<string, unknown>,
+    label: string,
+    admin?: string,
+  ) => Promise<InstantiateResponse>
+
+  use: (contractAddress: string) => RoyaltyRegistryInstance
+
+  migrate: (
+    senderAddress: string,
+    contractAddress: string,
+    codeId: number,
+    migrateMsg: Record<string, unknown>,
+  ) => Promise<MigrateResponse>
+
+  messages: (contractAddress: string) => RoyaltyRegistryMessages
+}
+
+export const RoyaltyRegistry = (client: SigningCosmWasmClient, txSigner: string): RoyaltyRegistryContract => {
+  const use = (contractAddress: string): RoyaltyRegistryInstance => {
+    ///QUERY
+    const config = async (): Promise<string> => {
+      return client.queryContractSmart(contractAddress, {
+        config: {},
+      })
+    }
+
+    const collectionRoyaltyDefault = async (collection: string): Promise<string> => {
+      return client.queryContractSmart(contractAddress, {
+        collection_royalty_default: { collection },
+      })
+    }
+
+    const collectionRoyaltyProtocol = async (collection: string, protocol: string): Promise<string> => {
+      return client.queryContractSmart(contractAddress, {
+        collection_royalty_protocol: { collection, protocol },
+      })
+    }
+
+    const royaltyPayment = async (collection: string, protocol?: string): Promise<string> => {
+      return client.queryContractSmart(contractAddress, {
+        royalty_payment: { collection, protocol },
+      })
+    }
+
+    /// EXECUTE
+    const initializeCollectionRoyalty = async (collection: string): Promise<string> => {
+      const res = await client.execute(
+        txSigner,
+        contractAddress,
+        {
+          initialize_collection_royalty: { collection },
+        },
+        'auto',
+      )
+      return res.transactionHash
+    }
+
+    const setCollectionRoyaltyDefault = async (
+      collection: string,
+      recipient: string,
+      share: number,
+    ): Promise<string> => {
+      const res = await client.execute(
+        txSigner,
+        contractAddress,
+        {
+          set_collection_royalty_default: { collection, recipient, share: (share / 100).toString() },
+        },
+        'auto',
+      )
+      return res.transactionHash
+    }
+
+    const updateCollectionRoyaltyDefault = async (
+      collection: string,
+      recipient?: string,
+      shareDelta?: number,
+      decrement?: boolean,
+    ): Promise<string> => {
+      const res = await client.execute(
+        txSigner,
+        contractAddress,
+        {
+          update_collection_royalty_default: {
+            collection,
+            recipient,
+            share_delta: shareDelta ? (shareDelta / 100).toString() : undefined,
+            decrement,
+          },
+        },
+        'auto',
+      )
+      return res.transactionHash
+    }
+
+    const setCollectionRoyaltyProtocol = async (
+      collection: string,
+      protocol: string,
+      recipient: string,
+      share: number,
+    ): Promise<string> => {
+      const res = await client.execute(
+        txSigner,
+        contractAddress,
+        {
+          set_collection_royalty_protocol: { collection, protocol, recipient, share: (share / 100).toString() },
+        },
+        'auto',
+      )
+      return res.transactionHash
+    }
+
+    const updateCollectionRoyaltyProtocol = async (
+      collection: string,
+      protocol?: string,
+      recipient?: string,
+      shareDelta?: number,
+      decrement?: boolean,
+    ): Promise<string> => {
+      const res = await client.execute(
+        txSigner,
+        contractAddress,
+        {
+          update_collection_royalty_protocol: {
+            collection,
+            protocol,
+            recipient,
+            share_delta: shareDelta ? (shareDelta / 100).toString() : undefined,
+            decrement,
+          },
+        },
+        'auto',
+      )
+      return res.transactionHash
+    }
+
+    return {
+      contractAddress,
+      config,
+      collectionRoyaltyDefault,
+      collectionRoyaltyProtocol,
+      royaltyPayment,
+      initializeCollectionRoyalty,
+      setCollectionRoyaltyDefault,
+      updateCollectionRoyaltyDefault,
+      setCollectionRoyaltyProtocol,
+      updateCollectionRoyaltyProtocol,
+    }
+  }
+
+  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 initializeCollectionRoyalty = (collection: string) => {
+      return {
+        sender: txSigner,
+        contract: contractAddress,
+        msg: {
+          initialize_collection_royalty: { collection },
+        },
+        funds: [],
+      }
+    }
+
+    const setCollectionRoyaltyDefault = (collection: string, recipient: string, share: number) => {
+      return {
+        sender: txSigner,
+        contract: contractAddress,
+        msg: {
+          set_collection_royalty_default: { collection, recipient, share: share / 100 },
+        },
+        funds: [],
+      }
+    }
+
+    const updateCollectionRoyaltyDefault = (
+      collection: string,
+      recipient?: string,
+      shareDelta?: number,
+      decrement?: boolean,
+    ) => {
+      return {
+        sender: txSigner,
+        contract: contractAddress,
+        msg: {
+          update_collection_royalty_default: {
+            collection,
+            recipient,
+            share_delta: shareDelta ? shareDelta / 100 : undefined,
+            decrement,
+          },
+        },
+        funds: [],
+      }
+    }
+
+    const setCollectionRoyaltyProtocol = (collection: string, protocol: string, recipient: string, share: number) => {
+      return {
+        sender: txSigner,
+        contract: contractAddress,
+        msg: {
+          set_collection_royalty_protocol: { collection, protocol, recipient, share: share / 100 },
+        },
+        funds: [],
+      }
+    }
+
+    const updateCollectionRoyaltyProtocol = (
+      collection: string,
+      protocol?: string,
+      recipient?: string,
+      shareDelta?: number,
+      decrement?: boolean,
+    ) => {
+      return {
+        sender: txSigner,
+        contract: contractAddress,
+        msg: {
+          update_collection_royalty_protocol: {
+            collection,
+            protocol,
+            recipient,
+            share_delta: shareDelta ? shareDelta / 100 : undefined,
+            decrement,
+          },
+        },
+        funds: [],
+      }
+    }
+
+    return {
+      initializeCollectionRoyalty,
+      setCollectionRoyaltyDefault,
+      updateCollectionRoyaltyDefault,
+      setCollectionRoyaltyProtocol,
+      updateCollectionRoyaltyProtocol,
+    }
+  }
+
+  return { use, instantiate, migrate, messages }
+}

contracts/royaltyRegistry/index.ts

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

contracts/royaltyRegistry/messages/execute.ts

@@ -0,0 +1,144 @@
+import type { RoyaltyRegistryInstance } from '../index'
+import { useRoyaltyRegistryContract } from '../index'
+
+export type ExecuteType = typeof EXECUTE_TYPES[number]
+
+export const EXECUTE_TYPES = [
+  'initialize_collection_royalty',
+  'set_collection_royalty_default',
+  'update_collection_royalty_default',
+  'set_collection_royalty_protocol',
+  'update_collection_royalty_protocol',
+] as const
+
+export interface ExecuteListItem {
+  id: ExecuteType
+  name: string
+  description?: string
+}
+
+export const EXECUTE_LIST: ExecuteListItem[] = [
+  {
+    id: 'initialize_collection_royalty',
+    name: 'Initialize Collection Royalty',
+    description: 'Initialize collection royalty',
+  },
+  {
+    id: 'set_collection_royalty_default',
+    name: 'Set Collection Royalty Default',
+    description: 'Set collection royalty default',
+  },
+  {
+    id: 'update_collection_royalty_default',
+    name: 'Update Collection Royalty Default',
+    description: 'Update collection royalty default',
+  },
+  {
+    id: 'set_collection_royalty_protocol',
+    name: 'Set Collection Royalty Protocol',
+    description: 'Set collection royalty protocol',
+  },
+  {
+    id: 'update_collection_royalty_protocol',
+    name: 'Update Collection Royalty Protocol',
+    description: 'Update collection royalty protocol',
+  },
+]
+
+export interface DispatchExecuteProps {
+  type: ExecuteType
+  [k: string]: unknown
+}
+
+type Select<T extends ExecuteType> = T
+/** @see {@link RoyaltyRegistryInstance} */
+export interface DispatchExecuteArgs {
+  contract: string
+  collection: string
+  protocol: string
+  recipient: string
+  share: number
+  shareDelta: number
+  decrement: boolean
+  messages?: RoyaltyRegistryInstance
+  type: string | 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 'initialize_collection_royalty': {
+      return messages.initializeCollectionRoyalty(args.collection)
+    }
+    case 'set_collection_royalty_default': {
+      return messages.setCollectionRoyaltyDefault(args.collection, args.recipient, args.share)
+    }
+    case 'update_collection_royalty_default': {
+      return messages.updateCollectionRoyaltyDefault(args.collection, args.recipient, args.shareDelta, args.decrement)
+    }
+    case 'set_collection_royalty_protocol': {
+      return messages.setCollectionRoyaltyProtocol(args.collection, args.protocol, args.recipient, args.share)
+    }
+    case 'update_collection_royalty_protocol': {
+      return messages.updateCollectionRoyaltyProtocol(
+        args.collection,
+        args.protocol,
+        args.recipient,
+        args.shareDelta,
+        args.decrement,
+      )
+    }
+    default: {
+      throw new Error('Unknown execution type')
+    }
+  }
+}
+
+export const previewExecutePayload = (args: DispatchExecuteArgs) => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const { messages } = useRoyaltyRegistryContract()
+  const { contract } = args
+  switch (args.type) {
+    case 'initialize_collection_royalty': {
+      return messages(contract)?.initializeCollectionRoyalty(args.collection)
+    }
+    case 'set_collection_royalty_default': {
+      return messages(contract)?.setCollectionRoyaltyDefault(args.collection, args.recipient, args.share)
+    }
+    case 'update_collection_royalty_default': {
+      return messages(contract)?.updateCollectionRoyaltyDefault(
+        args.collection,
+        args.recipient,
+        args.shareDelta,
+        args.decrement,
+      )
+    }
+    case 'set_collection_royalty_protocol': {
+      return messages(contract)?.setCollectionRoyaltyProtocol(
+        args.collection,
+        args.protocol,
+        args.recipient,
+        args.share,
+      )
+    }
+    case 'update_collection_royalty_protocol': {
+      return messages(contract)?.updateCollectionRoyaltyProtocol(
+        args.collection,
+        args.protocol,
+        args.recipient,
+        args.shareDelta,
+        args.decrement,
+      )
+    }
+    default: {
+      return {}
+    }
+  }
+}
+
+export const isEitherType = <T extends ExecuteType>(type: unknown, arr: T[]): type is T => {
+  return arr.some((val) => type === val)
+}

contracts/royaltyRegistry/messages/query.ts

@@ -0,0 +1,64 @@
+import type { RoyaltyRegistryInstance } from '../contract'
+
+export type QueryType = typeof QUERY_TYPES[number]
+
+export const QUERY_TYPES = [
+  'config',
+  'collection_royalty_default',
+  'collection_royalty_protocol',
+  'royalty_payment',
+] as const
+export interface QueryListItem {
+  id: QueryType
+  name: string
+  description?: string
+}
+
+export const QUERY_LIST: QueryListItem[] = [
+  { id: 'config', name: 'Query Config', description: 'View the contract config' },
+  {
+    id: 'collection_royalty_default',
+    name: 'Query Collection Royalty Details',
+    description: 'View the collection royalty details',
+  },
+  {
+    id: 'collection_royalty_protocol',
+    name: 'Query Collection Royalty Protocol',
+    description: 'View the collection royalty protocol',
+  },
+  {
+    id: 'royalty_payment',
+    name: 'Query Royalty Payment',
+    description: 'View the royalty payment',
+  },
+]
+/*
+  //Query
+  config: () => Promise<string>
+  collectionRoyaltyDefault: (collection: string) => Promise<string>
+  collectionRoyaltyProtocol: (collection: string, protocol: string) => Promise<string>
+  // RoyaltyProtocolByCollection: (collection: string, queryOptions: QqueryOptions) => Promise<string>
+  royaltyPayment: (collection: string, protocol?: string) => Promise<string>
+  */
+
+export interface DispatchQueryProps {
+  messages: RoyaltyRegistryInstance | undefined
+  type: QueryType
+  collection: string
+  protocol: string
+}
+
+export const dispatchQuery = (props: DispatchQueryProps) => {
+  const { messages, type, collection, protocol } = props
+  switch (type) {
+    case 'config':
+      return messages?.config()
+    case 'collection_royalty_default':
+      return messages?.collectionRoyaltyDefault(collection)
+    case 'collection_royalty_protocol':
+      return messages?.collectionRoyaltyProtocol(collection, protocol)
+    default: {
+      throw new Error('unknown query type')
+    }
+  }
+}

contracts/royaltyRegistry/useContract.ts

@@ -0,0 +1,99 @@
+/* eslint-disable eslint-comments/disable-enable-pair */
+
+import { useWallet } from 'contexts/wallet'
+import { useCallback, useEffect, useState } from 'react'
+
+import type {
+  InstantiateResponse,
+  MigrateResponse,
+  RoyaltyRegistryContract,
+  RoyaltyRegistryInstance,
+  RoyaltyRegistryMessages,
+} from './contract'
+import { RoyaltyRegistry as initContract } from './contract'
+
+export interface UseRoyaltyRegistryContractProps {
+  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) => RoyaltyRegistryInstance | undefined
+
+  updateContractAddress: (contractAddress: string) => void
+
+  messages: (contractAddress: string) => RoyaltyRegistryMessages | undefined
+}
+
+export function useRoyaltyRegistryContract(): UseRoyaltyRegistryContractProps {
+  const wallet = useWallet()
+
+  const [address, setAddress] = useState<string>('')
+  const [royaltyRegistry, setRoyaltyRegistry] = useState<RoyaltyRegistryContract>()
+
+  useEffect(() => {
+    setAddress(localStorage.getItem('contract_address') || '')
+  }, [])
+
+  useEffect(() => {
+    const royaltyRegistryContract = initContract(wallet.getClient(), wallet.address)
+    setRoyaltyRegistry(royaltyRegistryContract)
+  }, [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 (!royaltyRegistry) {
+          reject(new Error('Contract is not initialized.'))
+          return
+        }
+        royaltyRegistry.instantiate(codeId, initMsg, label, admin).then(resolve).catch(reject)
+      })
+    },
+    [royaltyRegistry],
+  )
+
+  const migrate = useCallback(
+    (contractAddress: string, codeId: number, migrateMsg: Record<string, unknown>): Promise<MigrateResponse> => {
+      return new Promise((resolve, reject) => {
+        if (!royaltyRegistry) {
+          reject(new Error('Contract is not initialized.'))
+          return
+        }
+        console.log(wallet.address, contractAddress, codeId)
+        royaltyRegistry.migrate(wallet.address, contractAddress, codeId, migrateMsg).then(resolve).catch(reject)
+      })
+    },
+    [royaltyRegistry, wallet],
+  )
+
+  const use = useCallback(
+    (customAddress = ''): RoyaltyRegistryInstance | undefined => {
+      return royaltyRegistry?.use(address || customAddress)
+    },
+    [royaltyRegistry, address],
+  )
+
+  const messages = useCallback(
+    (customAddress = ''): RoyaltyRegistryMessages | undefined => {
+      return royaltyRegistry?.messages(address || customAddress)
+    },
+    [royaltyRegistry, address],
+  )
+
+  return {
+    instantiate,
+    migrate,
+    use,
+    updateContractAddress,
+    messages,
+  }
+}

env.d.ts

@@ -46,6 +46,7 @@ declare namespace NodeJS {
     readonly NEXT_PUBLIC_BASE_FACTORY_ADDRESS: string
     readonly NEXT_PUBLIC_BASE_FACTORY_UPDATABLE_ADDRESS: string
     readonly NEXT_PUBLIC_SG721_NAME_ADDRESS: string
+    readonly NEXT_PUBLIC_ROYALTY_REGISTRY_ADDRESS: string
     readonly NEXT_PUBLIC_BASE_MINTER_CODE_ID: string
     readonly NEXT_PUBLIC_BADGE_HUB_CODE_ID: string
     readonly NEXT_PUBLIC_BADGE_HUB_ADDRESS: string

package.json

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

pages/contracts/royaltyRegistry/execute.tsx

@@ -0,0 +1,211 @@
+import clsx from 'clsx'
+import { Button } from 'components/Button'
+import { Conditional } from 'components/Conditional'
+import { ContractPageHeader } from 'components/ContractPageHeader'
+import { ExecuteCombobox } from 'components/contracts/royaltyRegistry/ExecuteCombobox'
+import { useExecuteComboboxState } from 'components/contracts/royaltyRegistry/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 { royaltyRegistryLinkTabs } from 'components/LinkTabs.data'
+import { TransactionHash } from 'components/TransactionHash'
+import { useContracts } from 'contexts/contracts'
+import { useWallet } from 'contexts/wallet'
+import type { DispatchExecuteArgs } from 'contracts/royaltyRegistry/messages/execute'
+import { dispatchExecute, isEitherType, previewExecutePayload } from 'contracts/royaltyRegistry/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 { ROYALTY_REGISTRY_ADDRESS } from 'utils/constants'
+import { withMetadata } from 'utils/layout'
+import { links } from 'utils/links'
+
+const RoyaltyRegistryExecutePage: NextPage = () => {
+  const { royaltyRegistry: 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: 'Royalty Registry Address',
+    subtitle: 'Address of the Royalty Registry contract',
+    defaultValue: ROYALTY_REGISTRY_ADDRESS,
+  })
+  const contractAddress = contractState.value
+
+  const collectionAddressState = useInputState({
+    id: 'collection-address',
+    name: 'collection-address',
+    title: 'Collection Address',
+    subtitle: 'Address of the collection',
+  })
+
+  const protocolAddressState = useInputState({
+    id: 'protocol-address',
+    name: 'protocol-address',
+    title: 'Protocol Address',
+    subtitle: 'Address of the protocol',
+  })
+
+  const recipientAddressState = useInputState({
+    id: 'recipient-address',
+    name: 'recipient-address',
+    title: 'Recipient Address',
+    subtitle: 'Address of the recipient',
+  })
+
+  const shareState = useNumberInputState({
+    id: 'share',
+    name: 'share',
+    title: 'Share',
+    subtitle: 'Share percentage',
+    placeholder: '4%',
+  })
+
+  const shareDeltaState = useNumberInputState({
+    id: 'share-delta',
+    name: 'share-delta',
+    title: 'Share Delta',
+    subtitle: 'The change of share percentage',
+    placeholder: '1%',
+  })
+
+  const [decrement, setDecrement] = useState(false)
+
+  const showRecipientAddress = isEitherType(type, [
+    'set_collection_royalty_default',
+    'set_collection_royalty_protocol',
+    'update_collection_royalty_default',
+    'update_collection_royalty_protocol',
+  ])
+
+  const messages = useMemo(() => contract?.use(contractState.value), [contract, contractState.value])
+  const payload: DispatchExecuteArgs = {
+    contract: contractState.value,
+    messages,
+    type,
+    collection: collectionAddressState.value,
+    protocol: protocolAddressState.value,
+    recipient: recipientAddressState.value,
+    share: shareState.value,
+    shareDelta: shareDeltaState.value,
+    decrement,
+  }
+  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 Royalty Registry Contract" />
+      <ContractPageHeader
+        description="Royalty Registry allows NFT collection owners to define the royalties that should be paid to them."
+        link={links.Documentation}
+        title="Royalty Registry Contract"
+      />
+      <LinkTabs activeIndex={1} data={royaltyRegistryLinkTabs} />
+
+      <form className="grid grid-cols-2 p-4 space-x-8" onSubmit={mutate}>
+        <div className="space-y-8">
+          <AddressInput {...contractState} />
+          <ExecuteCombobox {...comboboxState} />
+          <AddressInput {...collectionAddressState} />
+          <Conditional
+            test={isEitherType(type, ['set_collection_royalty_protocol', 'update_collection_royalty_protocol'])}
+          >
+            <AddressInput {...protocolAddressState} />
+          </Conditional>
+          <Conditional test={showRecipientAddress}>
+            <AddressInput {...recipientAddressState} />
+          </Conditional>
+          <Conditional test={isEitherType(type, ['set_collection_royalty_protocol', 'set_collection_royalty_default'])}>
+            <NumberInput {...shareState} />
+          </Conditional>
+          <Conditional
+            test={isEitherType(type, ['update_collection_royalty_default', 'update_collection_royalty_protocol'])}
+          >
+            <NumberInput {...shareDeltaState} />
+            <div className="flex flex-row space-y-2 w-1/4">
+              <div className={clsx('flex flex-col space-y-2 w-full form-control')}>
+                <label className="justify-start cursor-pointer label">
+                  <div className="flex flex-col">
+                    <span className="mr-4 font-bold">Increment</span>
+                  </div>
+                  <input
+                    checked={decrement}
+                    className={`toggle ${decrement ? `bg-stargaze` : `bg-gray-600`}`}
+                    onClick={() => setDecrement(!decrement)}
+                    type="checkbox"
+                  />
+                </label>
+              </div>
+              <span className="mx-4 font-bold">Decrement</span>
+            </div>
+          </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(RoyaltyRegistryExecutePage, { center: false })

pages/contracts/royaltyRegistry/index.tsx

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

pages/contracts/royaltyRegistry/query.tsx

@@ -0,0 +1,146 @@
+import clsx from 'clsx'
+import { Conditional } from 'components/Conditional'
+import { ContractPageHeader } from 'components/ContractPageHeader'
+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 { royaltyRegistryLinkTabs } from 'components/LinkTabs.data'
+import { useContracts } from 'contexts/contracts'
+import { useWallet } from 'contexts/wallet'
+import type { QueryType } from 'contracts/royaltyRegistry/messages/query'
+import { dispatchQuery, QUERY_LIST } from 'contracts/royaltyRegistry/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 { ROYALTY_REGISTRY_ADDRESS } from 'utils/constants'
+import { withMetadata } from 'utils/layout'
+import { links } from 'utils/links'
+import { resolveAddress } from 'utils/resolveAddress'
+
+const RoyaltyRegistryQueryPage: NextPage = () => {
+  const { royaltyRegistry: contract } = useContracts()
+  const wallet = useWallet()
+
+  const contractState = useInputState({
+    id: 'contract-address',
+    name: 'contract-address',
+    title: 'Royalty Registry Address',
+    subtitle: 'Address of the Royalty Registry contract',
+    defaultValue: ROYALTY_REGISTRY_ADDRESS,
+  })
+  const contractAddress = contractState.value
+
+  const collectionAddressState = useInputState({
+    id: 'collection-address',
+    name: 'collection-address',
+    title: 'Collection Address',
+    subtitle: 'Address of the collection',
+  })
+
+  const protocolAddressState = useInputState({
+    id: 'protocol-address',
+    name: 'protocol-address',
+    title: 'Protocol Address',
+    subtitle: 'Address of the protocol',
+  })
+
+  const collectionAddress = collectionAddressState.value
+  const protocolAddress = protocolAddressState.value
+
+  const [type, setType] = useState<QueryType>('config')
+
+  const { data: response } = useQuery(
+    [contractAddress, type, contract, wallet, collectionAddress, protocolAddress] as const,
+    async ({ queryKey }) => {
+      const [_contractAddress, _type, _contract, _wallet, _collectionAddress, _protocolAddress] = queryKey
+      const messages = contract?.use(contractAddress)
+      const res = await resolveAddress(_collectionAddress, wallet).then(async (resolvedAddress) => {
+        const result = await dispatchQuery({
+          messages,
+          type,
+          collection: resolvedAddress,
+          protocol: _protocolAddress,
+        })
+        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 Royalty Registry Contract" />
+      <ContractPageHeader
+        description="Royalty Registry allows NFT collection owners to define the royalties that should be paid to them."
+        link={links.Documentation}
+        title="Royalty Registry Contract"
+      />
+      <LinkTabs activeIndex={0} data={royaltyRegistryLinkTabs} />
+
+      <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 === 'collection_royalty_default' ||
+              type === 'royalty_payment' ||
+              type === 'collection_royalty_protocol'
+            }
+          >
+            <AddressInput {...collectionAddressState} />
+          </Conditional>
+          <Conditional test={type === 'collection_royalty_protocol' || type === 'royalty_payment'}>
+            <AddressInput {...protocolAddressState} />
+          </Conditional>
+        </div>
+        <JsonPreview content={contractAddress ? { type, response } : null} title="Query Response" />
+      </div>
+    </section>
+  )
+}
+
+export default withMetadata(RoyaltyRegistryQueryPage, { center: false })

utils/constants.ts

@@ -40,6 +40,7 @@ export const OPEN_EDITION_UPDATABLE_IBC_FRNZ_FACTORY_ADDRESS =
   process.env.NEXT_PUBLIC_OPEN_EDITION_UPDATABLE_IBC_FRNZ_FACTORY_ADDRESS
 export const OPEN_EDITION_MINTER_CODE_ID = parseInt(process.env.NEXT_PUBLIC_OPEN_EDITION_MINTER_CODE_ID, 10)
 export const SG721_NAME_ADDRESS = process.env.NEXT_PUBLIC_SG721_NAME_ADDRESS
+export const ROYALTY_REGISTRY_ADDRESS = process.env.NEXT_PUBLIC_ROYALTY_REGISTRY_ADDRESS
 export const BASE_MINTER_CODE_ID = parseInt(process.env.NEXT_PUBLIC_VENDING_MINTER_CODE_ID, 10)
 export const BADGE_HUB_CODE_ID = parseInt(process.env.NEXT_PUBLIC_BADGE_HUB_CODE_ID, 10)
 export const BADGE_HUB_ADDRESS = process.env.NEXT_PUBLIC_BADGE_HUB_ADDRESS