Fix factory validation on init issue

Provide sample .csv files for airdrops

.env.example

@@ -1,8 +1,10 @@
-APP_VERSION=0.7.3
+APP_VERSION=0.8.7
 
 NEXT_PUBLIC_PINATA_ENDPOINT_URL=https://api.pinata.cloud/pinning/pinFileToIPFS
 NEXT_PUBLIC_SG721_CODE_ID=2595
 NEXT_PUBLIC_SG721_UPDATABLE_CODE_ID=2596
+NEXT_PUBLIC_STRDST_SG721_CODE_ID=2595
+NEXT_PUBLIC_BASE_FACTORY_SG721_CODE_ID=2595
 NEXT_PUBLIC_OPEN_EDITION_SG721_CODE_ID=2595
 NEXT_PUBLIC_OPEN_EDITION_SG721_UPDATABLE_CODE_ID=2596
 NEXT_PUBLIC_VENDING_MINTER_CODE_ID=2600
@@ -11,8 +13,10 @@ NEXT_PUBLIC_BASE_MINTER_CODE_ID=2598
 NEXT_PUBLIC_OPEN_EDITION_MINTER_CODE_ID=2579
 
 NEXT_PUBLIC_VENDING_FACTORY_ADDRESS="stars18h7ugh8eaug7wr0w4yjw0ls5s937z35pnkg935ucsek2y9xl3gaqqk4jtx"
+NEXT_PUBLIC_FEATURED_VENDING_FACTORY_ADDRESS="stars14pd96yk3t6gq9l6uyrkg0n5dr09n8rt5y9v3at8x4wl4lrkxhlzq4trqmh"
 NEXT_PUBLIC_VENDING_FACTORY_UPDATABLE_ADDRESS="stars1h65nms9gwg4vdktyqj84tu50gwlm34e0eczl5w2ezllxuzfxy9esa9qlt0"
 NEXT_PUBLIC_VENDING_FACTORY_FLEX_ADDRESS="stars1hvu2ghqkcnvhtj2fc6wuazxt4dqcftslp2rwkkkcxy269a35a9pq60ug2q"
+NEXT_PUBLIC_FEATURED_VENDING_FACTORY_FLEX_ADDRESS="stars1udlmmnmmnnqamh36hy6d7azn3ycv23yymkmg6558ntalvyt2pz7s8lhgcd"
 NEXT_PUBLIC_VENDING_FACTORY_UPDATABLE_FLEX_ADDRESS=
 
 # NEXT_PUBLIC_VENDING_IBC_ATOM_FACTORY_ADDRESS=
@@ -25,22 +29,66 @@ NEXT_PUBLIC_VENDING_FACTORY_UPDATABLE_FLEX_ADDRESS=
 # NEXT_PUBLIC_VENDING_IBC_USDC_FACTORY_FLEX_ADDRESS=
 # NEXT_PUBLIC_VENDING_IBC_USDC_UPDATABLE_FACTORY_FLEX_ADDRESS=
 
+# NEXT_PUBLIC_VENDING_IBC_USK_FACTORY_ADDRESS=
+# NEXT_PUBLIC_VENDING_IBC_USK_UPDATABLE_FACTORY_ADDRESS=
+# NEXT_PUBLIC_VENDING_IBC_USK_FACTORY_FLEX_ADDRESS=
+# NEXT_PUBLIC_VENDING_IBC_USK_UPDATABLE_FACTORY_FLEX_ADDRESS=
+
+NEXT_PUBLIC_VENDING_NATIVE_STARDUST_FACTORY_ADDRESS="stars1mxwf2hjcjvqnlw0v3j7m0u34975qesp325wzrgz0ht7vr8ys2zmsenjutf"
+NEXT_PUBLIC_VENDING_NATIVE_STARDUST_UPDATABLE_FACTORY_ADDRESS="stars18gjczf88jd4z3a3megwj9g5c9famu654csxfnnq59mkqeszuzy4ssdgr46"
+NEXT_PUBLIC_VENDING_NATIVE_STRDST_FLEX_FACTORY_ADDRESS="stars1eluqmr6x78ehl4plrln6khxc0qrspfhc7rt3whmr59escpve0r4swcacjh"
+
+# NEXT_PUBLIC_VENDING_NATIVE_BRNCH_FACTORY_ADDRESS=""
+# NEXT_PUBLIC_VENDING_NATIVE_BRNCH_UPDATABLE_FACTORY_ADDRESS=""
+# NEXT_PUBLIC_VENDING_NATIVE_BRNCH_FLEX_FACTORY_ADDRESS=""
+
 NEXT_PUBLIC_BASE_FACTORY_ADDRESS="stars1a45hcxty3spnmm2f0papl8v4dk5ew29s4syhn4efte8u5haex99qlkrtnx"
 NEXT_PUBLIC_BASE_FACTORY_UPDATABLE_ADDRESS="stars100xegx2syry4tclkmejjwxk4nfqahvcqhm9qxut5wxuzhj5d9qfsh5nmym"
 
 NEXT_PUBLIC_OPEN_EDITION_FACTORY_ADDRESS="stars1sqweqcxlf2f7qhf27gn5naqusk5q52fkzewmy63c4sglvle3s7ls6k828e"
 NEXT_PUBLIC_OPEN_EDITION_UPDATABLE_FACTORY_ADDRESS="stars1fk5dkzcylam8mcpqrn8y9spauvc3d4navtaqurcc49dc3p9f8d3qdkvymx"
 
+NEXT_PUBLIC_VENDING_IBC_KUJI_FACTORY_ADDRESS="stars1yyje87e0h9mqg34kp3x75yesa78ve4glc3dstdrn6nscw3zjfanqkj95f0"
+NEXT_PUBLIC_VENDING_IBC_KUJI_FACTORY_FLEX_ADDRESS="stars1jralxqalpw9nf3kdc0s222z3mk343wry60cjaze9xadgfn2te4usf92e9r"
+
+NEXT_PUBLIC_VENDING_IBC_HUAHUA_FACTORY_ADDRESS="stars16luw6rxgr6as9s7eu5auvnk5tnzszjrs34etsw9fmk25yqjfq09qq9gzl4"
+NEXT_PUBLIC_VENDING_IBC_HUAHUA_FACTORY_FLEX_ADDRESS="stars1d97h6nfgwqr8eynzdcrsm3p0n6rduvkrcqdjhm5z7heavtgnqg4sgy2yew"
+
+NEXT_PUBLIC_VENDING_IBC_CRBRUS_FACTORY_ADDRESS="stars1z0upxsyxhrvygrsd2t69majd6wl8qw4h8ff2fp27z3nn93m73pwsu4hpdh"
+NEXT_PUBLIC_VENDING_IBC_CRBRUS_FACTORY_FLEX_ADDRESS="stars1halhp674yxwgn3p4gpkl8790h07vkm0vjm4vj7y8ql499e3zydzqurt5m3"
+
 # NEXT_PUBLIC_OPEN_EDITION_IBC_ATOM_FACTORY_ADDRESS=
 # NEXT_PUBLIC_OPEN_EDITION_UPDATABLE_IBC_ATOM_FACTORY_ADDRESS=
 # NEXT_PUBLIC_OPEN_EDITION_IBC_USDC_FACTORY_ADDRESS=
 # NEXT_PUBLIC_OPEN_EDITION_UPDATABLE_IBC_USDC_FACTORY_ADDRESS=
-# NEXT_PUBLIC_OPEN_EDITION_IBC_FRNZ_FACTORY_ADDRESS=
-# NEXT_PUBLIC_OPEN_EDITION_UPDATABLE_IBC_FRNZ_FACTORY_ADDRESS=
+NEXT_PUBLIC_OPEN_EDITION_IBC_FRNZ_FACTORY_ADDRESS="stars1vzffawsjhvspstu5lvtzz2x5n7zh07hnw09c9dfxcj78un05rcms5n3q3e"
+NEXT_PUBLIC_OPEN_EDITION_UPDATABLE_IBC_FRNZ_FACTORY_ADDRESS="stars1tc09vlgdg8rqyapcxwm9qdq8naj4gym9px4ntue9cs0kse5rvess0nee3a"
+
+NEXT_PUBLIC_OPEN_EDITION_NATIVE_STRDST_FACTORY_ADDRESS="stars10sw8fvwtetndy3ctpcvee8yq7t6qp49m5yahm5gf8qz3qt3hzvcq5c2m0s"
+NEXT_PUBLIC_OPEN_EDITION_NATIVE_BRNCH_FACTORY_ADDRESS="stars1uxdqnu9ysd9q8kd43c52ufy9azfxyuvyt5nnyk4p2gtag30zre3q0cg30z"
+
+NEXT_PUBLIC_OPEN_EDITION_IBC_USK_FACTORY_ADDRESS="stars1vxf9u6a4d5ty00k59zthv7mnpzlrfhqnf4ds0y0eake7lepuamnqymyf3t"
+NEXT_PUBLIC_OPEN_EDITION_UPDATABLE_IBC_USK_FACTORY_ADDRESS="stars1njhkyyv0l8dmq528w67t8dxyg5a3h0hvusk6pfvpm52pspd9gq9s3zmdez"
+
+NEXT_PUBLIC_OPEN_EDITION_IBC_KUJI_FACTORY_ADDRESS="stars1yjvfy6fpm4nxl0afm6e8lnx96e6v49e3fxsymsdxxtu0pdeshrxq702zaz"
+
+NEXT_PUBLIC_OPEN_EDITION_IBC_HUAHUA_FACTORY_ADDRESS="stars1grxlqatna07y8f3tzu2l9lmt82uj8gzzshxnz2ruwn6yljpyucnq059rmn"
+
+# NEXT_PUBLIC_OPEN_EDITION_IBC_CRBRUS_FACTORY_ADDRESS=""
+
+NEXT_PUBLIC_OPEN_EDITION_IBC_USDC_FACTORY_ADDRESS="stars1tjzlz2e8pkucgytkjct5drt7x0dysnepqv3nmvxn0fzk2hfv73zsneevyt"
+
+NEXT_PUBLIC_OPEN_EDITION_IBC_NBTC_FACTORY_ADDRESS="stars1cd4gykxfq4nc4yx8uzn8yr3ggu86r57chhxme4y7q2jag53cw75qgs96u8"
+NEXT_PUBLIC_OPEN_EDITION_UPDATABLE_IBC_NBTC_FACTORY_ADDRESS="stars1d57xe77mvcg5q337umf4qz49vumfn6w3wss0t7u8ra6s3cyvezsqyaeejn"
+
+NEXT_PUBLIC_VENDING_IBC_NBTC_FACTORY_ADDRESS="stars1e6t6lp052er2gu3rwjnf434vgh59ydkfg8dm589fxlx593afqmuqh75a0s"
+NEXT_PUBLIC_VENDING_IBC_NBTC_UPDATABLE_FACTORY_ADDRESS="stars1k6ee8qgwvumguqnqqrvsnwluwk0rp994nkcgdemk0tj3ecc5kk8su2tcr4"
 
 NEXT_PUBLIC_SG721_NAME_ADDRESS="stars1fx74nkqkw2748av8j7ew7r3xt9cgjqduwn8m0ur5lhe49uhlsasszc5fhr"
-NEXT_PUBLIC_WHITELIST_CODE_ID=2602
-NEXT_PUBLIC_WHITELIST_FLEX_CODE_ID=2603
+NEXT_PUBLIC_ROYALTY_REGISTRY_ADDRESS="stars1crgx0f70fzksa57hq87wtl8f04h0qyk5la0hk0fu8dyhl67ju80qaxzr5z"
+NEXT_PUBLIC_INFINITY_SWAP_PROTOCOL_ADDRESS="stars136yp6fl9h66m0cwv8weu4w4aawveuz40992ty0atj5ecjd8z0thqv9xpy5"
+NEXT_PUBLIC_WHITELIST_CODE_ID=3131
+NEXT_PUBLIC_WHITELIST_FLEX_CODE_ID=3130
 NEXT_PUBLIC_BADGE_HUB_CODE_ID=1336
 NEXT_PUBLIC_BADGE_HUB_ADDRESS="stars1dacun0xn7z73qzdcmq27q3xn6xuprg8e2ugj364784al2v27tklqynhuqa"
 NEXT_PUBLIC_BADGE_NFT_CODE_ID=1337
@@ -55,3 +103,6 @@ NEXT_PUBLIC_STARGAZE_WEBSITE_URL=https://testnet.publicawesome.dev
 NEXT_PUBLIC_BADGES_URL=https://badges.publicawesome.dev
 NEXT_PUBLIC_WEBSITE_URL=https://
 NEXT_PUBLIC_SYNC_COLLECTIONS_API_URL="https://..."
+
+NEXT_PUBLIC_MEILISEARCH_HOST="https://search.publicawesome.dev"
+NEXT_PUBLIC_MEILISEARCH_API_KEY= "..."

components/AirdropUpload.tsx

@@ -1,6 +1,5 @@
 import { toUtf8 } from '@cosmjs/encoding'
 import clsx from 'clsx'
-import { useWallet } from 'contexts/wallet'
 import React, { useState } from 'react'
 import { toast } from 'react-hot-toast'
 import { SG721_NAME_ADDRESS } from 'utils/constants'
@@ -8,6 +7,7 @@ import { csvToArray } from 'utils/csvToArray'
 import type { AirdropAllocation } from 'utils/isValidAccountsFile'
 import { isValidAccountsFile } from 'utils/isValidAccountsFile'
 import { isValidAddress } from 'utils/isValidAddress'
+import { useWallet } from 'utils/wallet'
 
 interface AirdropUploadProps {
   onChange: (data: AirdropAllocation[]) => void
@@ -22,8 +22,10 @@ export const AirdropUpload = ({ onChange }: AirdropUploadProps) => {
     await new Promise((resolve) => {
       let i = 0
       allocationData.map(async (data) => {
-        if (!wallet.client) throw new Error('Wallet not connected')
-        await wallet.client
+        if (!wallet.isWalletConnected) throw new Error('Wallet not connected')
+        await (
+          await wallet.getCosmWasmClient()
+        )
           .queryContractRaw(
             SG721_NAME_ADDRESS,
             toUtf8(

components/AssetsPreview.tsx

@@ -83,6 +83,17 @@ export const AssetsPreview = ({ assetFilesArray, updateMetadataFileIndex }: Asse
               <span className="flex self-center ">{assetSource.name}</span>
             </div>
           )}
+          {getAssetType(assetSource.name) === 'document' && (
+            <div className="flex absolute flex-col items-center mt-4 ml-2">
+              <img
+                key={`document-${index}`}
+                alt="document_icon"
+                className={clsx('mb-2 ml-1 w-6 h-6 thumbnail')}
+                src="/pdf.png"
+              />
+              <span className="flex self-center ">{assetSource.name}</span>
+            </div>
+          )}
           {getAssetType(assetSource.name) === 'video' &&
             videoPreviewElements.filter((videoPreviewElement) => videoPreviewElement.key === assetSource.name)}
 

components/BadgeAirdropListUpload.tsx

@@ -5,8 +5,8 @@ import { toUtf8 } from '@cosmjs/encoding'
 import clsx from 'clsx'
 import React, { useState } from 'react'
 import { toast } from 'react-hot-toast'
+import { useWallet } from 'utils/wallet'
 
-import { useWallet } from '../contexts/wallet'
 import { SG721_NAME_ADDRESS } from '../utils/constants'
 import { isValidAddress } from '../utils/isValidAddress'
 
@@ -22,8 +22,10 @@ export const BadgeAirdropListUpload = ({ onChange }: BadgeAirdropListUploadProps
     await new Promise((resolve) => {
       let i = 0
       names.map(async (name) => {
-        if (!wallet.client) throw new Error('Wallet not connected')
-        await wallet.client
+        if (!wallet.isWalletConnected) throw new Error('Wallet not connected')
+        await (
+          await wallet.getCosmWasmClient()
+        )
           .queryContractRaw(
             SG721_NAME_ADDRESS,
             toUtf8(

components/BadgeConfirmationModal.tsx

@@ -12,7 +12,7 @@ export const BadgeConfirmationModal = (props: BadgeConfirmationModalProps) => {
       <input className="modal-toggle" defaultChecked id="my-modal-2" type="checkbox" />
       <label className="cursor-pointer modal" htmlFor="my-modal-2">
         <label
-          className="absolute top-[25%] bottom-5 left-1/3 max-w-[600px] max-h-[400px] border-2 no-scrollbar modal-box"
+          className="absolute top-[23%] bottom-5 left-1/3 max-w-[600px] max-h-[410px] border-2 no-scrollbar modal-box"
           htmlFor="temp"
         >
           {/* <Alert type="warning"></Alert> */}
@@ -23,7 +23,9 @@ export const BadgeConfirmationModal = (props: BadgeConfirmationModalProps) => {
               submit, post, promote, or display on or through the Service. You represent and warrant that such contain
               material subject to copyright, trademark, publicity rights, or other intellectual property rights, unless
               you have necessary permission or are otherwise legally entitled to post the material and to grant Stargaze
-              Parties the license described above, and that the content does not violate any laws.
+              Parties the license described above, and that the content does not violate any laws. Stargaze.zone
+              reserves the right to exercise its discretion in concealing user-generated content, should such content be
+              determined to have a detrimental impact on the brand.
             </div>
             <br />
             <div className="flex flex-row pb-4">

components/CollectionsTable.tsx

@@ -0,0 +1,57 @@
+/* eslint-disable eslint-comments/disable-enable-pair */
+/* eslint-disable @typescript-eslint/no-unnecessary-condition */
+
+/* eslint-disable jsx-a11y/img-redundant-alt */
+import { truncateAddress } from 'utils/wallet'
+
+export interface ClickableCollection {
+  contractAddress: string
+  name: string
+  media: string
+  onClick: () => void
+}
+
+export function CollectionsTable({ collections }: { collections: ClickableCollection[] }) {
+  return (
+    <table className="w-full divide-y divide-zinc-800 table-fixed">
+      <thead>
+        <tr>
+          <th className="py-3.5 pr-3 pl-4 text-sm text-left sm:pl-0 text-infinity-blue" scope="col">
+            Name
+          </th>
+          <th className="py-3.5 px-3 text-sm text-left text-infinity-blue" scope="col">
+            Address
+          </th>
+        </tr>
+      </thead>
+      <tbody className=" bg-black">
+        {collections
+          ? collections?.map((collection) => (
+              <tr
+                key={collection.contractAddress}
+                className="hover:bg-zinc-900 cursor-pointer"
+                onClick={collection.onClick}
+              >
+                <td className="py-2 pr-3 pl-4 whitespace-nowrap sm:pl-0">
+                  <div className="flex items-center">
+                    <div className="shrink-0 w-11 h-11">
+                      <img alt="Collection Image" src={collection.media} />
+                    </div>
+                    <div className="ml-4 font-medium text-white truncate">{collection.name}</div>
+                  </div>
+                </td>
+
+                <td className="py-5 px-3 text-zinc-400 whitespace-nowrap">
+                  <div className="text-left text-white">
+                    {collection.contractAddress?.startsWith('stars')
+                      ? truncateAddress(collection.contractAddress)
+                      : collection.contractAddress}
+                  </div>
+                </td>
+              </tr>
+            ))
+          : null}
+      </tbody>
+    </table>
+  )
+}

components/ConfirmationModal.tsx

@@ -12,7 +12,7 @@ export const ConfirmationModal = (props: ConfirmationModalProps) => {
       <input className="modal-toggle" defaultChecked id="my-modal-2" type="checkbox" />
       <label className="cursor-pointer modal" htmlFor="my-modal-2">
         <label
-          className="absolute top-[25%] bottom-5 left-1/3 max-w-[600px] max-h-[400px] border-2 no-scrollbar modal-box"
+          className="absolute top-[23%] bottom-5 left-1/3 max-w-[600px] max-h-[440px] border-2 no-scrollbar modal-box"
           htmlFor="temp"
         >
           {/* <Alert type="warning"></Alert> */}
@@ -23,7 +23,9 @@ export const ConfirmationModal = (props: ConfirmationModalProps) => {
               submit, post, promote, or display on or through the Service. You represent and warrant that such contain
               material subject to copyright, trademark, publicity rights, or other intellectual property rights, unless
               you have necessary permission or are otherwise legally entitled to post the material and to grant Stargaze
-              Parties the license described above, and that the content does not violate any laws.
+              Parties the license described above, and that the content does not violate any laws. Stargaze.zone
+              reserves the right to exercise its discretion in concealing user-generated content, should such content be
+              determined to have a detrimental impact on the brand.
             </div>
             <br />
             <div className="flex flex-row pb-4">

components/FaviconsMetaTags.jsx

@@ -8,7 +8,7 @@ export function FaviconsMetaTags() {
       <link href="/assets/manifest.webmanifest" rel="manifest" />
       <meta content="yes" name="mobile-web-app-capable" />
       <meta content="#F0827D" name="theme-color" />
-      <meta content="StargazeStudio" name="application-name" />
+      <meta content="Stargaze Studio" name="application-name" />
       <link href="/assets/apple-touch-icon-57x57.png" rel="apple-touch-icon" sizes="57x57" />
       <link href="/assets/apple-touch-icon-60x60.png" rel="apple-touch-icon" sizes="60x60" />
       <link href="/assets/apple-touch-icon-72x72.png" rel="apple-touch-icon" sizes="72x72" />
@@ -22,7 +22,7 @@ export function FaviconsMetaTags() {
       <link href="/assets/apple-touch-icon-1024x1024.png" rel="apple-touch-icon" sizes="1024x1024" />
       <meta content="yes" name="apple-mobile-web-app-capable" />
       <meta content="black-translucent" name="apple-mobile-web-app-status-bar-style" />
-      <meta content="StargazeStudio" name="apple-mobile-web-app-title" />
+      <meta content="Stargaze Studio" name="apple-mobile-web-app-title" />
       <link
         href="/assets/apple-touch-startup-image-640x1136.png"
         media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"

components/Fieldset.tsx

@@ -0,0 +1,79 @@
+/* eslint-disable eslint-comments/disable-enable-pair */
+/* eslint-disable no-implicit-coercion */
+/* eslint-disable import/no-default-export */
+/* eslint-disable tsdoc/syntax */
+import type { ReactNode } from 'react'
+
+export interface FieldsetBaseType {
+  /**
+   * The input's required id, used to link the label and input, as well as the error message.
+   */
+  id: string
+  /**
+   * Error message to show input validation.
+   */
+  error?: string
+  /**
+   * Success message to show input validation.
+   */
+  success?: string
+  /**
+   * Label to describe the input.
+   */
+  label?: string | ReactNode
+  /**
+   * Hint to show optional fields or a hint to the user of what to enter in the input.
+   */
+  hint?: string
+}
+
+type FieldsetType = FieldsetBaseType & {
+  children: ReactNode
+}
+
+/**
+ * @name Fieldset
+ * @description A fieldset component, used to share markup for labels, hints, and errors for Input components.
+ *
+ * @example
+ * <Fieldset error={error} hint={hint} id={id} label={label}>
+ *   <input id={id} {...props} />
+ * </Fieldset>
+ */
+export default function Fieldset({ label, hint, id, children, error, success }: FieldsetType) {
+  return (
+    <div>
+      {!!label && (
+        <div className="flex justify-between mb-1">
+          <label className="block w-full text-sm font-medium text-zinc-700 dark:text-zinc-300" htmlFor={id}>
+            {label}
+          </label>
+
+          {typeof hint === 'string' && (
+            <span className="text-sm text-zinc-500 dark:text-zinc-400" id={`${id}-optional`}>
+              {hint}
+            </span>
+          )}
+        </div>
+      )}
+
+      {children}
+
+      {error && (
+        <div className="mt-2">
+          <p className="text-sm text-zinc-600" id={`${id}-error`}>
+            {error}
+          </p>
+        </div>
+      )}
+
+      {success && (
+        <div className="mt-2">
+          <p className="text-sm text-zinc-500" id={`${id}-success`}>
+            {success}
+          </p>
+        </div>
+      )}
+    </div>
+  )
+}

components/Input.tsx

@@ -0,0 +1,173 @@
+/* eslint-disable eslint-comments/disable-enable-pair */
+/* eslint-disable import/no-default-export */
+/* eslint-disable @typescript-eslint/restrict-template-expressions */
+/* eslint-disable jsx-a11y/autocomplete-valid */
+/* eslint-disable tsdoc/syntax */
+import type { PropsOf } from '@headlessui/react/dist/types'
+import type { ReactNode } from 'react'
+import { forwardRef } from 'react'
+import { classNames } from 'utils/css'
+
+import type { FieldsetBaseType } from './Fieldset'
+import Fieldset from './Fieldset'
+import type { TrailingSelectProps } from './TrailingSelect'
+import TrailingSelect from './TrailingSelect'
+
+/**
+ * Shared styles for all input components.
+ */
+export const inputClassNames = {
+  base: [
+    'block w-full rounded-lg bg-white shadow-sm dark:bg-zinc-900 sm:text-sm',
+    'text-white placeholder:text-zinc-500 focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-primary-500 focus:ring-0 focus:ring-offset-0',
+  ],
+  valid: 'border-zinc-300 focus:border-zinc-300 dark:border-zinc-800 dark:focus:border-zinc-800',
+  invalid: '!text-red-500 !border-red-500 focus:!border-red-500',
+  success: 'text-green border-green focus:border-green',
+}
+
+type InputProps = Omit<PropsOf<'input'> & FieldsetBaseType, 'className'> & {
+  directory?: 'true'
+  mozdirectory?: 'true'
+  webkitdirectory?: 'true'
+  leadingAddon?: string
+  trailingAddon?: string
+  trailingAddonIcon?: ReactNode
+  trailingSelectProps?: TrailingSelectProps
+  autoCompleteOff?: boolean
+  preventAutoCapitalizeFirstLetter?: boolean
+  className?: string
+  icon?: JSX.Element
+}
+
+/**
+ * @name Input
+ * @description A standard input component, defaults to the text type.
+ *
+ * @example
+ * // Standard input
+ * <Input id="first-name" name="first-name" />
+ *
+ * @example
+ * // Input component with label, placeholder and type email
+ * <Input id="email" name="email" type="email" autoComplete="email" label="Email" placeholder="name@email.com" />
+ *
+ * @example
+ * // Input component with label and leading and trailing addons
+ * <Input
+ *   id="input-label-leading-trailing"
+ *   label="Bid"
+ *   placeholder="0.00"
+ *   leadingAddon="$"
+ *   trailingAddon="USD"
+ * />
+ *
+ * @example
+ * // Input component with label and trailing select
+ * const [trailingSelectValue, trailingSelectValueSet] = useState('USD');
+ *
+ * <Input
+ *   id="input-label-trailing-select"
+ *   label="Bid"
+ *   placeholder="0.00"
+ *   trailingSelectProps={{
+ *     id: 'currency',
+ *     label: 'Currency',
+ *     value: trailingSelectValue,
+ *     onChange: (event) => trailingSelectValueSet(event.target.value),
+ *     options: ['USD', 'CAD', 'EUR'],
+ *   }}
+ * />
+ */
+const Input = forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      error,
+      success,
+      hint,
+      label,
+      leadingAddon,
+      trailingAddon,
+      trailingAddonIcon,
+      trailingSelectProps,
+      id,
+      className,
+      type = 'text',
+      autoCompleteOff = false,
+      preventAutoCapitalizeFirstLetter,
+      icon,
+      ...rest
+    },
+    ref,
+  ) => {
+    const cachedClassNames = classNames(
+      ...inputClassNames.base,
+      className,
+      error ? inputClassNames.invalid : inputClassNames.valid,
+      success ? inputClassNames.success : inputClassNames.valid,
+      leadingAddon && 'pl-7',
+      trailingAddon && 'pr-12',
+      trailingSelectProps && 'pr-16',
+      icon && 'pl-10',
+    )
+
+    const describedBy = [
+      ...(error ? [`${id}-error`] : []),
+      ...(success ? [`${id}-success`] : []),
+      ...(typeof hint === 'string' ? [`${id}-optional`] : []),
+      ...(typeof trailingAddon === 'string' ? [`${id}-addon`] : []),
+    ].join(' ')
+
+    return (
+      <Fieldset error={error} hint={hint} id={id} label={label} success={success}>
+        <div className="relative rounded-md shadow-sm">
+          {leadingAddon && (
+            <div className="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+              <span className="text-zinc-500 dark:text-zinc-400 sm:text-sm">{leadingAddon}</span>
+            </div>
+          )}
+
+          {icon && (
+            <div className="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+              <span className="pr-10 text-zinc-500 dark:text-zinc-400 sm:text-sm">{icon}</span>
+            </div>
+          )}
+
+          <input
+            aria-describedby={describedBy}
+            aria-invalid={error ? 'true' : undefined}
+            autoCapitalize={`${preventAutoCapitalizeFirstLetter ?? 'off'}`}
+            autoComplete={`${autoCompleteOff ? 'off' : 'on'}`}
+            className={cachedClassNames}
+            id={id}
+            ref={ref}
+            type={type}
+            {...rest}
+          />
+
+          {!trailingAddon && trailingSelectProps && <TrailingSelect {...trailingSelectProps} />}
+
+          {trailingAddon && (
+            <div className="flex absolute inset-y-0 right-0 items-center pr-3 pointer-events-none">
+              <span className="text-zinc-500 dark:text-zinc-400 sm:text-sm" id={`${id}-addon`}>
+                {trailingAddon}
+              </span>
+            </div>
+          )}
+
+          {trailingAddonIcon && (
+            <div className="flex absolute inset-y-0 right-0 items-center pr-3 pointer-events-none">
+              <span className="text-zinc-500 dark:text-zinc-400 sm:text-sm" id={`${id}-addonicon`}>
+                {trailingAddonIcon}
+              </span>
+            </div>
+          )}
+        </div>
+      </Fieldset>
+    )
+  },
+)
+
+Input.displayName = 'Input'
+
+export default Input

components/JsonPreview.tsx

@@ -66,7 +66,7 @@ export const JsonPreview = ({
       </div>
       {show && (
         <div className="overflow-auto p-2 font-mono text-sm">
-          <pre>{JSON.stringify(content, null, 2).trim()}</pre>
+          <pre>{content ? JSON.stringify(content, null, 2).trim() : '{}'}</pre>
         </div>
       )}
     </div>

components/Layout.tsx

@@ -47,9 +47,9 @@ export const Layout = ({ children, metadata = {} }: LayoutProps) => {
         <FaDesktop size={48} />
         <h1 className="text-2xl font-bold">Unsupported Viewport</h1>
         <p>
-          StargazeStudio is best viewed on the big screen.
+          Stargaze Studio is best viewed on the big screen.
           <br />
-          Please open StargazeStudio on your tablet or desktop browser.
+          Please open Stargaze Studio on your tablet or desktop browser.
         </p>
       </div>
     </div>

components/LinkTab.tsx

@@ -1,5 +1,6 @@
 import clsx from 'clsx'
 import { Anchor } from 'components/Anchor'
+import { useRouter } from 'next/router'
 
 export interface LinkTabProps {
   title: string
@@ -11,6 +12,10 @@ export interface LinkTabProps {
 export const LinkTab = (props: LinkTabProps) => {
   const { title, description, href, isActive } = props
 
+  // get contract address from the router
+  const router = useRouter()
+  const { contractAddress } = router.query
+
   return (
     <Anchor
       className={clsx(
@@ -19,7 +24,7 @@ export const LinkTab = (props: LinkTabProps) => {
         isActive ? 'border-plumbus' : 'border-transparent',
         isActive ? 'bg-plumbus/5 hover:bg-plumbus/10' : 'hover:bg-white/5',
       )}
-      href={href}
+      href={href + (contractAddress ? `?contractAddress=${contractAddress as string}` : '')}
     >
       <h4 className="font-bold">{title}</h4>
       <span className="text-sm text-white/80 line-clamp-2">{description}</span>

components/LinkTabs.data.ts

@@ -145,3 +145,42 @@ 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',
+  },
+]
+
+export const authzLinkTabs: LinkTabProps[] = [
+  {
+    title: 'Grant',
+    description: `Grant authorizations to a given address`,
+    href: '/authz/grant',
+  },
+  {
+    title: 'Revoke',
+    description: `Revoke already granted authorizations`,
+    href: '/authz/revoke',
+  },
+]
+
+export const snapshotLinkTabs: LinkTabProps[] = [
+  {
+    title: 'Collection Holders',
+    description: `Take a snapshot of collection holders`,
+    href: '/snapshots/holders',
+  },
+  {
+    title: 'Chain Snapshots',
+    description: `Export a list of users fulfilling a given condition`,
+    href: '/snapshots/chain',
+  },
+]

components/MetadataFormGroup.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable eslint-comments/disable-enable-pair */
 /* eslint-disable jsx-a11y/media-has-caption */
+import clsx from 'clsx'
 import type { ReactNode } from 'react'
 import { useEffect, useMemo, useState } from 'react'
 import { getAssetType } from 'utils/getAssetType'
@@ -41,6 +42,16 @@ export const MetadataFormGroup = (props: MetadataFormGroupProps) => {
     [relatedAsset],
   )
 
+  const documentPreview = useMemo(
+    () => (
+      <div className="flex flex-col items-center mt-4 ml-2">
+        <img key="document-key" alt="document_icon" className={clsx('mb-2 ml-2 w-24 h-24 thumbnail')} src="/pdf.png" />
+        <span className="flex self-center ">{relatedAsset?.name}</span>
+      </div>
+    ),
+    [relatedAsset],
+  )
+
   useEffect(() => {
     if (getAssetType(relatedAsset?.name as string) !== 'html') return
     const reader = new FileReader()
@@ -60,9 +71,14 @@ export const MetadataFormGroup = (props: MetadataFormGroupProps) => {
           {subtitle && <span className="text-sm text-white/50">{subtitle}</span>}
           <div>
             {relatedAsset && (
-              <div className="flex flex-row items-center mt-2 mr-4 border-2 border-dashed">
+              <div
+                className={`flex flex-row items-center mt-2 mr-4 ${
+                  getAssetType(relatedAsset.name) === 'document' ? '' : `border-2 border-dashed`
+                }`}
+              >
                 {getAssetType(relatedAsset.name) === 'audio' && audioPreview}
                 {getAssetType(relatedAsset.name) === 'video' && videoPreview}
+                {getAssetType(relatedAsset.name) === 'document' && documentPreview}
                 {getAssetType(relatedAsset.name) === 'image' && (
                   <img alt="preview" src={URL.createObjectURL(relatedAsset)} />
                 )}

components/MetadataInput.tsx

@@ -13,12 +13,16 @@ export interface MetadataInputProps {
   selectedAssetFile: File
   selectedMetadataFile: File
   updateMetadataToUpload: (metadataFile: File) => void
+  onChange?: (metadata: any) => void
+  importedMetadata?: any
 }
 
 export const MetadataInput = (props: MetadataInputProps) => {
   const emptyMetadataFile = new File(
     [JSON.stringify({})],
-    `${props.selectedAssetFile?.name.substring(0, props.selectedAssetFile?.name.lastIndexOf('.'))}.json`,
+    `${props.selectedAssetFile?.name
+      .substring(0, props.selectedAssetFile?.name.lastIndexOf('.'))
+      .replaceAll('#', '')}.json`,
     { type: 'application/json' },
   )
 
@@ -127,7 +131,7 @@ export const MetadataInput = (props: MetadataInputProps) => {
     if (nameState.value === '') delete metadata.name
     else metadata.name = nameState.value
     if (descriptionState.value === '') delete metadata.description
-    else metadata.description = descriptionState.value
+    else metadata.description = descriptionState.value.replaceAll('\\n', '\n')
     if (externalUrlState.value === '') delete metadata.external_url
     else metadata.external_url = externalUrlState.value
     if (youtubeUrlState.value === '') delete metadata.youtube_url
@@ -140,8 +144,10 @@ export const MetadataInput = (props: MetadataInputProps) => {
     const editedMetadataFile = new File(
       [metadataFileBlob],
       props.selectedMetadataFile?.name
-        ? props.selectedMetadataFile?.name
-        : `${props.selectedAssetFile?.name.substring(0, props.selectedAssetFile?.name.lastIndexOf('.'))}.json`,
+        ? props.selectedMetadataFile?.name.replaceAll('#', '')
+        : `${props.selectedAssetFile?.name
+            .substring(0, props.selectedAssetFile?.name.lastIndexOf('.'))
+            .replaceAll('#', '')}.json`,
       { type: 'application/json' },
     )
     props.updateMetadataToUpload(editedMetadataFile)
@@ -151,9 +157,12 @@ export const MetadataInput = (props: MetadataInputProps) => {
 
   useEffect(() => {
     console.log(props.selectedMetadataFile?.name)
-    if (props.selectedMetadataFile) void parseMetadata(props.selectedMetadataFile)
-    else void parseMetadata(emptyMetadataFile)
-  }, [props.selectedMetadataFile?.name])
+    if (props.selectedMetadataFile) {
+      void parseMetadata(props.selectedMetadataFile)
+    } else if (!props.importedMetadata) {
+      void parseMetadata(emptyMetadataFile)
+    }
+  }, [props.selectedMetadataFile?.name, props.importedMetadata])
 
   const nameStateMemo = useMemo(() => nameState, [nameState.value])
   const descriptionStateMemo = useMemo(() => descriptionState, [descriptionState.value])
@@ -163,7 +172,10 @@ export const MetadataInput = (props: MetadataInputProps) => {
 
   useEffect(() => {
     console.log('Update metadata')
-    if (metadata) generateUpdatedMetadata()
+    if (metadata) {
+      generateUpdatedMetadata()
+      if (props.onChange) props.onChange(metadata)
+    }
     console.log(metadata)
   }, [
     nameStateMemo.value,
@@ -173,6 +185,33 @@ export const MetadataInput = (props: MetadataInputProps) => {
     attributesStateMemo.entries,
   ])
 
+  useEffect(() => {
+    if (props.importedMetadata) {
+      void parseMetadata(emptyMetadataFile).then(() => {
+        console.log('Imported metadata: ', props.importedMetadata)
+        nameState.onChange(props.importedMetadata.name || '')
+        descriptionState.onChange(props.importedMetadata.description || '')
+        externalUrlState.onChange(props.importedMetadata.external_url || '')
+        youtubeUrlState.onChange(props.importedMetadata.youtube_url || '')
+        if (props.importedMetadata?.attributes && props.importedMetadata?.attributes?.length > 0) {
+          attributesState.reset()
+          props.importedMetadata?.attributes?.forEach((attribute: { trait_type: string; value: string }) => {
+            attributesState.add({
+              trait_type: attribute.trait_type,
+              value: attribute.value,
+            })
+          })
+        } else {
+          attributesState.reset()
+          attributesState.add({
+            trait_type: '',
+            value: '',
+          })
+        }
+      })
+    }
+  }, [props.importedMetadata])
+
   return (
     <div>
       <div className="grid grid-cols-2 mt-4 mr-4 ml-8 w-full max-w-6xl max-h-full no-scrollbar">

components/MetadataModal.tsx

@@ -127,7 +127,9 @@ export const MetadataModal = (props: MetadataModalProps) => {
       type: 'application/json',
     })
 
-    const editedMetadataFile = new File([metadataFileBlob], metadataFile.name, { type: 'application/json' })
+    const editedMetadataFile = new File([metadataFileBlob], metadataFile.name.replaceAll('#', ''), {
+      type: 'application/json',
+    })
     props.updateMetadata(editedMetadataFile)
     toast.success('Metadata updated successfully.')
   }

components/SelectCollection.tsx

@@ -0,0 +1,63 @@
+import { MagnifyingGlassIcon } from '@heroicons/react/24/outline'
+import Input from 'components/Input'
+import useSearch from 'hooks/useSearch'
+import { useMemo, useState } from 'react'
+import { useDebounce } from 'utils/debounce'
+
+import { CollectionsTable } from './CollectionsTable'
+
+export function SelectCollection({ selectCollection }: { selectCollection: (collectionAddress: string) => void }) {
+  const [search, setSearch] = useState('')
+  const [isInputFocused, setInputFocus] = useState(false)
+
+  const debouncedQuery = useDebounce<string>(search, 200)
+  const debouncedIsInputFocused = useDebounce<boolean>(isInputFocused, 200)
+  const collectionsQuery = useSearch(debouncedQuery, ['collections'], 5)
+  const collectionsResults = useMemo(() => {
+    return collectionsQuery.data?.find((searchResult) => searchResult.indexUid === 'collections')
+  }, [collectionsQuery.data])
+
+  const clickableCollections = useMemo(() => {
+    return (
+      collectionsResults?.hits.map((hit) => ({
+        contractAddress: hit.id,
+        name: hit.name,
+        media: hit.thumbnail_url || hit.image_url,
+        onClick: () => {
+          selectCollection(hit.id)
+          setSearch(hit.name)
+        },
+      })) ?? []
+    )
+  }, [collectionsResults, selectCollection, setSearch])
+
+  const handleInputFocus = () => {
+    setInputFocus(true)
+  }
+
+  const handleInputBlur = () => {
+    setInputFocus(false)
+  }
+
+  return (
+    <div className="flex flex-col p-4 space-y-4 w-3/4 h-full bg-black rounded-md border-2 border-gray-600 border-solid md:p-6">
+      <p className="text-base font-bold text-white text-start">Select the NFT collection to take a snapshot for</p>
+      <Input
+        className="py-2 w-full text-black dark:text-white rounded-sm md:w-72"
+        icon={<MagnifyingGlassIcon className="w-5 h-5 text-zinc-400" />}
+        id="collection-search"
+        onBlur={handleInputBlur}
+        onChange={(e) => setSearch(e.target.value)}
+        onFocus={handleInputFocus}
+        placeholder="Search Collections..."
+        value={search}
+      />
+
+      {debouncedIsInputFocused && (
+        <div className="overflow-auto w-full">
+          <CollectionsTable collections={clickableCollections} />
+        </div>
+      )}
+    </div>
+  )
+}

components/SettingsModal.tsx

@@ -0,0 +1,74 @@
+import type { Timezone } from 'contexts/globalSettings'
+import { useGlobalSettings } from 'contexts/globalSettings'
+import { useRef, useState } from 'react'
+
+import { setTimezone } from '../contexts/globalSettings'
+import { Button } from './Button'
+
+export interface SettingsModalProps {
+  timezone?: Timezone
+}
+export const SettingsModal = (props: SettingsModalProps) => {
+  const globalSettings = useGlobalSettings()
+  const [isChecked, setIsChecked] = useState(false)
+
+  const checkBoxRef = useRef<HTMLInputElement>(null)
+
+  return (
+    <div>
+      <input className="modal-toggle" defaultChecked={false} id="my-modal-9" ref={checkBoxRef} type="checkbox" />
+      <label className="cursor-pointer modal" htmlFor="my-modal-9">
+        <label
+          className={`absolute top-[42%] bottom-5 left-[260px] max-w-[450px] max-h-[250px]
+          border-[1px] no-scrollbar modal-box`}
+          htmlFor="temp"
+        >
+          <div className="flex flex-col justify-between h-full">
+            <div className="flex flex-col">
+              <h1 className="text-2xl font-bold underline underline-offset-2">Settings</h1>
+              <div className="flex justify-start w-full">
+                <div className="flex-row mt-2 w-full form-control">
+                  <h1 className="mt-[5px] text-lg font-bold">Time & Date: </h1>
+                  <label className="justify-start ml-6 cursor-pointer label">
+                    <span className="mr-2 font-bold">Local</span>
+                    <input
+                      checked={globalSettings.timezone === 'Local'}
+                      className={`${globalSettings.timezone === 'Local' ? `bg-stargaze` : `bg-gray-600`} checkbox`}
+                      onClick={() => {
+                        setTimezone('Local' as Timezone)
+                        window.localStorage.setItem('timezone', 'Local')
+                      }}
+                      type="checkbox"
+                    />
+                  </label>
+                  <label className="justify-start ml-4 cursor-pointer label">
+                    <span className="mr-2 font-bold">UTC</span>
+                    <input
+                      checked={globalSettings.timezone === 'UTC'}
+                      className={`${globalSettings.timezone === 'UTC' ? `bg-stargaze` : `bg-gray-600`} checkbox`}
+                      onClick={() => {
+                        setTimezone('UTC' as Timezone)
+                        window.localStorage.setItem('timezone', 'UTC')
+                      }}
+                      type="checkbox"
+                    />
+                  </label>
+                </div>
+              </div>
+            </div>
+            <Button
+              className="w-[40%] max-h-12 bg-blue-500 hover:bg-blue-600"
+              isWide
+              onClick={() => {
+                setTimezone('UTC' as Timezone)
+                window.localStorage.setItem('timezone', 'UTC')
+              }}
+            >
+              Use Defaults
+            </Button>
+          </div>
+        </label>
+      </label>
+    </div>
+  )
+}

components/Sidebar.tsx

@@ -3,18 +3,22 @@
 
 import clsx from 'clsx'
 import { Anchor } from 'components/Anchor'
+import type { Timezone } from 'contexts/globalSettings'
+import { setTimezone } from 'contexts/globalSettings'
 import { setLogItemList, useLogStore } from 'contexts/log'
-import { useWallet } from 'contexts/wallet'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
+import { FaCog } from 'react-icons/fa'
 // import BrandText from 'public/brand/brand-text.svg'
 import { footerLinks, socialsLinks } from 'utils/links'
+import { useWallet } from 'utils/wallet'
 
 import { BADGE_HUB_ADDRESS, BASE_FACTORY_ADDRESS, NETWORK, OPEN_EDITION_FACTORY_ADDRESS } from '../utils/constants'
 import { Conditional } from './Conditional'
 import { IncomeDashboardDisclaimer } from './IncomeDashboardDisclaimer'
 import { LogModal } from './LogModal'
+import { SettingsModal } from './SettingsModal'
 import { SidebarLayout } from './SidebarLayout'
 import { WalletLoader } from './WalletLoader'
 
@@ -22,6 +26,7 @@ export const Sidebar = () => {
   const router = useRouter()
   const wallet = useWallet()
   const logs = useLogStore()
+  const [isTallWindow, setIsTallWindow] = useState(false)
 
   useEffect(() => {
     if (logs.itemList.length === 0) return
@@ -32,6 +37,23 @@ export const Sidebar = () => {
   useEffect(() => {
     console.log(window.localStorage.getItem('logs'))
     setLogItemList(JSON.parse(window.localStorage.getItem('logs') || '[]'))
+    setTimezone(
+      (window.localStorage.getItem('timezone') as Timezone)
+        ? (window.localStorage.getItem('timezone') as Timezone)
+        : 'UTC',
+    )
+  }, [])
+
+  const handleResize = () => {
+    setIsTallWindow(window.innerHeight > 768)
+  }
+
+  useEffect(() => {
+    handleResize()
+    window.addEventListener('resize', handleResize)
+    // return () => {
+    //   window.removeEventListener('resize', handleResize)
+    // }
   }, [])
 
   return (
@@ -44,8 +66,8 @@ export const Sidebar = () => {
       <WalletLoader />
       {/* main navigation routes */}
 
-      <div className="absolute top-[20%] left-[5%] mt-2">
-        <ul className="group p-2 w-full bg-transparent menu rounded-box">
+      <div className={clsx('absolute left-[5%] mt-2', isTallWindow ? 'top-[20%]' : 'top-[30%]')}>
+        <ul className="group py-1 px-2 w-full bg-transparent menu rounded-box">
           <li tabIndex={0}>
             <div
               className={clsx(
@@ -86,6 +108,15 @@ export const Sidebar = () => {
               >
                 <Link href="/collections/actions/">Collection Actions</Link>
               </li>
+              <li
+                className={clsx(
+                  'text-lg font-bold hover:text-white hover:bg-stargaze-80 rounded',
+                  router.asPath.includes('/snapshots') ? 'text-white' : 'text-gray',
+                )}
+                tabIndex={-1}
+              >
+                <Link href="/snapshots">Snapshots</Link>
+              </li>
               <Conditional test={NETWORK === 'mainnet'}>
                 <li className={clsx('text-lg font-bold hover:text-white hover:bg-stargaze-80 rounded')} tabIndex={-1}>
                   <label
@@ -100,7 +131,7 @@ export const Sidebar = () => {
           </li>
         </ul>
         <Conditional test={BADGE_HUB_ADDRESS !== undefined}>
-          <ul className="group p-2 w-full bg-transparent menu rounded-box">
+          <ul className="group py-1 px-2 w-full bg-transparent menu rounded-box">
             <li tabIndex={0}>
               <span
                 className={clsx(
@@ -144,6 +175,40 @@ export const Sidebar = () => {
           </ul>
         </Conditional>
         <ul className="group p-2 w-full bg-transparent menu rounded-box">
+          <li tabIndex={0}>
+            <span
+              className={clsx(
+                'z-40 text-xl font-bold group-hover:text-white bg-transparent rounded-lg small-caps',
+                'hover:bg-white/5 transition-colors',
+                router.asPath.includes('/tokenfactory') ? 'text-white' : 'text-gray',
+              )}
+            >
+              <Link href="/tokenfactory/">Tokens</Link>
+            </span>
+            <ul className="z-50 p-2 rounded-box bg-base-200">
+              <li
+                className={clsx(
+                  'text-lg font-bold hover:text-white hover:bg-stargaze-80 rounded',
+                  router.asPath.includes('/tokenfactory/') ? 'text-white' : 'text-gray',
+                )}
+                tabIndex={-1}
+              >
+                <Link href="/tokenfactory/">Token Factory</Link>
+              </li>
+              <li
+                className={clsx(
+                  'disabled',
+                  'text-lg font-bold hover:text-white',
+                  router.asPath.includes('/airdrop-tokens/') ? 'text-white' : 'text-gray',
+                )}
+                tabIndex={-1}
+              >
+                <Link href="/">Airdrop Tokens</Link>
+              </li>
+            </ul>
+          </li>
+        </ul>
+        <ul className="group py-1 px-2 w-full bg-transparent menu rounded-box">
           <li tabIndex={0}>
             <span
               className={clsx(
@@ -224,35 +289,79 @@ 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>
+              <Conditional test={NETWORK === 'testnet'}>
+                <li
+                  className={clsx(
+                    'text-lg font-bold hover:text-white hover:bg-stargaze-80 rounded',
+                    router.asPath.includes('/contracts/upload/') ? 'text-white' : 'text-gray',
+                  )}
+                  tabIndex={-1}
+                >
+                  <Link href="/contracts/upload/">Upload Contract</Link>
+                </li>
+              </Conditional>
             </ul>
           </li>
         </ul>
+        <ul className="group py-1 px-2 w-full bg-transparent menu rounded-box">
+          <li tabIndex={0}>
+            <span
+              className={clsx(
+                'z-40 text-xl font-bold group-hover:text-white bg-transparent rounded-lg small-caps',
+                'hover:bg-white/5 transition-colors',
+                router.asPath.includes('/authz/') ? 'text-white' : 'text-gray',
+              )}
+            >
+              <Link href="/authz/"> Authz </Link>
+            </span>
+          </li>
+        </ul>
       </div>
 
       <IncomeDashboardDisclaimer creatorAddress={wallet.address ? wallet.address : ''} />
       <LogModal />
+      <SettingsModal />
 
       <div className="flex-grow" />
-      {logs.itemList.length > 0 && (
-        <label
-          className="w-[65%] h-[4px] text-lg font-bold text-white normal-case bg-blue-500 hover:bg-blue-600 border-none animate-none btn modal-button"
-          htmlFor="my-modal-8"
-        >
-          View Logs
-        </label>
+      {isTallWindow && (
+        <div className="flex-row w-full h-full">
+          <label
+            className="absolute mb-8 w-[25%] text-lg font-bold text-white normal-case bg-zinc-500 hover:bg-zinc-600 border-none animate-none btn modal-button"
+            htmlFor="my-modal-9"
+          >
+            <FaCog className="justify-center align-bottom" size={20} />
+          </label>
+
+          <label
+            className="ml-16 w-[65%] text-lg font-bold text-white normal-case bg-blue-500 hover:bg-blue-600 border-none animate-none btn modal-button"
+            htmlFor="my-modal-8"
+          >
+            View Logs
+          </label>
+        </div>
       )}
       {/* Stargaze network status */}
-      <div className="text-sm capitalize">Network: {wallet.network}</div>
+      {isTallWindow && <div className="text-sm capitalize">Network: {wallet.chain.pretty_name}</div>}
 
       {/* footer reference links */}
       <ul className="text-sm list-disc list-inside">
-        {footerLinks.map(({ href, text }) => (
-          <li key={href}>
-            <Anchor className="hover:text-plumbus hover:underline" href={href}>
-              {text}
-            </Anchor>
-          </li>
-        ))}
+        {isTallWindow &&
+          footerLinks.map(({ href, text }) => (
+            <li key={href}>
+              <Anchor className="hover:text-plumbus hover:underline" href={href}>
+                {text}
+              </Anchor>
+            </li>
+          ))}
       </ul>
 
       {/* footer attribution */}
@@ -265,6 +374,7 @@ export const Sidebar = () => {
       </div>
 
       {/* footer social links */}
+
       <div className="flex gap-x-6 items-center text-white/75">
         {socialsLinks.map(({ Icon, href, text }) => (
           <Anchor key={href} className="hover:text-plumbus" href={href}>

components/SingleAssetPreview.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable eslint-comments/disable-enable-pair */
 /* eslint-disable jsx-a11y/media-has-caption */
+import clsx from 'clsx'
 import type { ReactNode } from 'react'
 import { useEffect, useMemo, useState } from 'react'
 import { getAssetType } from 'utils/getAssetType'
@@ -41,6 +42,16 @@ export const SingleAssetPreview = (props: SingleAssetPreviewProps) => {
     [relatedAsset],
   )
 
+  const documentPreview = useMemo(
+    () => (
+      <div className="flex flex-col items-center mt-4 ml-2">
+        <img key="document-key" alt="document_icon" className={clsx('mb-2 ml-1 w-20 h-20 thumbnail')} src="/pdf.png" />
+        <span className="flex self-center ">{relatedAsset?.name}</span>
+      </div>
+    ),
+    [relatedAsset],
+  )
+
   useEffect(() => {
     if (getAssetType(relatedAsset?.name as string) !== 'html') return
     const reader = new FileReader()
@@ -59,9 +70,14 @@ export const SingleAssetPreview = (props: SingleAssetPreviewProps) => {
           <div>
             {/* {subtitle && <span className="text-sm text-white/50">{subtitle}</span>} */}
             {relatedAsset && (
-              <div className="flex flex-row items-center mt-2 mr-4 border-2 border-dashed">
+              <div
+                className={`flex flex-row items-center mt-2 mr-4 ${
+                  getAssetType(relatedAsset.name) === 'document' ? '' : `border-2 border-dashed`
+                }`}
+              >
                 {getAssetType(relatedAsset.name) === 'audio' && audioPreview}
                 {getAssetType(relatedAsset.name) === 'video' && videoPreview}
+                {getAssetType(relatedAsset.name) === 'document' && documentPreview}
                 {getAssetType(relatedAsset.name) === 'image' && (
                   <img alt="preview" src={URL.createObjectURL(relatedAsset)} />
                 )}

components/TrailingSelect.tsx

@@ -0,0 +1,37 @@
+/* eslint-disable eslint-comments/disable-enable-pair */
+/* eslint-disable import/no-default-export */
+
+import type { ChangeEvent } from 'react'
+import { classNames } from 'utils/css'
+
+export interface TrailingSelectProps {
+  id: string
+  label: string
+  options: string[]
+  value: string
+  onChange: (event: ChangeEvent<HTMLSelectElement>) => void
+}
+
+export default function TrailingSelect({ id, label, value, onChange, options }: TrailingSelectProps) {
+  const cachedClassNames = classNames(
+    'h-full rounded-md border-transparent bg-transparent py-0 pl-2 pr-7 text-zinc-500 dark:text-zinc-400 sm:text-sm',
+    'focus:border-transparent focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-primary-500 focus:ring-0 focus:ring-offset-0',
+  )
+
+  return (
+    <div className="flex absolute inset-y-0 right-0 items-center">
+      <label className="sr-only" htmlFor={id}>
+        {label}
+      </label>
+
+      <select className={cachedClassNames} id={id} name={id} onChange={onChange} value={value}>
+        {/* TODO - Option values in a select are supposed to be unique, remove this comment during PR review */}
+        {options.map((opt) => (
+          <option key={opt} value={opt}>
+            {opt}
+          </option>
+        ))}
+      </select>
+    </div>
+  )
+}

components/WalletLoader.tsx

@@ -1,36 +1,63 @@
+import type { Coin } from '@cosmjs/proto-signing'
 import { Popover, Transition } from '@headlessui/react'
 import clsx from 'clsx'
-import { useWallet, useWalletStore } from 'contexts/wallet'
-import { Fragment } from 'react'
+import { tokensList } from 'config/token'
+import { Fragment, useEffect, useState } from 'react'
 import { FaCopy, FaPowerOff, FaRedo } from 'react-icons/fa'
 import { copy } from 'utils/clipboard'
 import { convertDenomToReadable } from 'utils/convertDenomToReadable'
 import { getShortAddress } from 'utils/getShortAddress'
+import { truncateMiddle } from 'utils/text'
+import { useWallet } from 'utils/wallet'
 
 import { WalletButton } from './WalletButton'
 import { WalletPanelButton } from './WalletPanelButton'
 
 export const WalletLoader = () => {
-  const { address, balance, connect, disconnect, initializing: isLoading, initialized: isReady } = useWallet()
+  const {
+    address = '',
+    username,
+    connect,
+    disconnect,
+    isWalletConnecting,
+    isWalletConnected,
+    getStargateClient,
+  } = useWallet()
 
-  const displayName = useWalletStore((store) => store.name || getShortAddress(store.address))
+  // Once wallet connects, load balances.
+  const [balances, setBalances] = useState<readonly Coin[] | undefined>()
+  useEffect(() => {
+    if (!isWalletConnected) {
+      setBalances(undefined)
+      return
+    }
+
+    const loadBalances = async () => {
+      const client = await getStargateClient()
+      setBalances(await client.getAllBalances(address))
+    }
+
+    loadBalances().catch(console.error)
+  }, [isWalletConnected, getStargateClient, address])
 
   return (
     <Popover className="mt-4 mb-2">
       {({ close }) => (
         <>
           <div className="grid -mx-4">
-            {!isReady && (
-              <WalletButton className="w-full" isLoading={isLoading} onClick={() => void connect()}>
+            {isWalletConnected ? (
+              <Popover.Button as={WalletButton} className="w-full">
+                {username || address}
+              </Popover.Button>
+            ) : (
+              <WalletButton
+                className="w-full"
+                isLoading={isWalletConnecting}
+                onClick={() => void connect().catch(console.error)}
+              >
                 Connect Wallet
               </WalletButton>
             )}
-
-            {isReady && (
-              <Popover.Button as={WalletButton} className="w-full" isLoading={isLoading}>
-                {displayName}
-              </Popover.Button>
-            )}
           </div>
 
           <Transition
@@ -54,9 +81,12 @@ export const WalletLoader = () => {
                   {getShortAddress(address)}
                 </span>
                 <div className="font-bold">Your Balances</div>
-                {balance.map((val) => (
+                {balances?.map((val) => (
                   <span key={`balance-${val.denom}`}>
-                    {convertDenomToReadable(val.amount)} {val.denom.slice(1, val.denom.length)}
+                    {convertDenomToReadable(val.amount)}{' '}
+                    {tokensList.find((t) => t.denom === val.denom)?.displayName
+                      ? tokensList.find((t) => t.denom === val.denom)?.displayName
+                      : truncateMiddle(val.denom ? val.denom : '', 28)}
                   </span>
                 ))}
               </div>

components/WalletProvider.tsx

@@ -0,0 +1,48 @@
+// Styles required for @cosmos-kit/react modal
+import '@interchain-ui/react/styles'
+
+import { GasPrice } from '@cosmjs/stargate'
+import { wallets as keplrExtensionWallets } from '@cosmos-kit/keplr-extension'
+import { wallets as leapExtensionWallets } from '@cosmos-kit/leap-extension'
+import { ChainProvider } from '@cosmos-kit/react'
+import { assets, chains } from 'chain-registry'
+import { getConfig } from 'config'
+import type { ReactNode } from 'react'
+import { NETWORK } from 'utils/constants'
+
+export const WalletProvider = ({ children }: { children: ReactNode }) => {
+  const { gasPrice, feeToken } = getConfig(NETWORK)
+  return (
+    <ChainProvider
+      assetLists={assets}
+      chains={chains}
+      endpointOptions={{
+        endpoints: {
+          stargaze: {
+            rpc: ['https://rpc.stargaze-apis.com/'],
+            rest: ['https://rest.stargaze-apis.com/'],
+          },
+          stargazetestnet: {
+            rpc: ['https://rpc.elgafar-1.stargaze-apis.com/'],
+            rest: ['https://rest.elgafar-1.stargaze-apis.com/'],
+          },
+        },
+        isLazy: true,
+      }}
+      sessionOptions={{
+        duration: 1000 * 60 * 60 * 12, // 12 hours
+      }}
+      signerOptions={{
+        signingCosmwasm: () => ({
+          gasPrice: GasPrice.fromString(`${gasPrice}${feeToken}`),
+        }),
+        signingStargate: () => ({
+          gasPrice: GasPrice.fromString(`${gasPrice}${feeToken}`),
+        }),
+      }}
+      wallets={[...keplrExtensionWallets, ...leapExtensionWallets]}
+    >
+      {children}
+    </ChainProvider>
+  )
+}

components/WhitelistFlexUpload.tsx

@@ -1,12 +1,12 @@
 import { toUtf8 } from '@cosmjs/encoding'
 import clsx from 'clsx'
-import { useWallet } from 'contexts/wallet'
 import React, { useState } from 'react'
 import { toast } from 'react-hot-toast'
 import { SG721_NAME_ADDRESS } from 'utils/constants'
 import { csvToFlexList } from 'utils/csvToFlexList'
 import { isValidAddress } from 'utils/isValidAddress'
 import { isValidFlexListFile } from 'utils/isValidFlexListFile'
+import { useWallet } from 'utils/wallet'
 
 export interface WhitelistFlexMember {
   address: string
@@ -26,8 +26,10 @@ export const WhitelistFlexUpload = ({ onChange }: WhitelistFlexUploadProps) => {
     await new Promise((resolve) => {
       let i = 0
       memberData.map(async (data) => {
-        if (!wallet.client) throw new Error('Wallet not connected')
-        await wallet.client
+        if (!wallet.isWalletConnected) throw new Error('Wallet not connected')
+        await (
+          await wallet.getCosmWasmClient()
+        )
           .queryContractRaw(
             SG721_NAME_ADDRESS,
             toUtf8(

components/WhitelistUpload.tsx

@@ -5,8 +5,8 @@ import { toUtf8 } from '@cosmjs/encoding'
 import clsx from 'clsx'
 import React, { useState } from 'react'
 import { toast } from 'react-hot-toast'
+import { useWallet } from 'utils/wallet'
 
-import { useWallet } from '../contexts/wallet'
 import { SG721_NAME_ADDRESS } from '../utils/constants'
 import { isValidAddress } from '../utils/isValidAddress'
 
@@ -22,8 +22,10 @@ export const WhitelistUpload = ({ onChange }: WhitelistUploadProps) => {
     await new Promise((resolve) => {
       let i = 0
       names.map(async (name) => {
-        if (!wallet.client) throw new Error('Wallet not connected')
-        await wallet.client
+        if (!wallet.isWalletConnected) throw new Error('Wallet not connected')
+        await (
+          await wallet.getCosmWasmClient()
+        )
           .queryContractRaw(
             SG721_NAME_ADDRESS,
             toUtf8(

components/badges/actions/Action.tsx

@@ -20,7 +20,6 @@ import { useMetadataAttributesState } from 'components/forms/MetadataAttributes.
 import { JsonPreview } from 'components/JsonPreview'
 import { TransactionHash } from 'components/TransactionHash'
 import { WhitelistUpload } from 'components/WhitelistUpload'
-import { useWallet } from 'contexts/wallet'
 import type { Badge, BadgeHubInstance } from 'contracts/badgeHub'
 import sizeof from 'object-sizeof'
 import type { FormEvent } from 'react'
@@ -32,6 +31,7 @@ import * as secp256k1 from 'secp256k1'
 import { generateKeyPairs, sha256 } from 'utils/hash'
 import { isValidAddress } from 'utils/isValidAddress'
 import { resolveAddress } from 'utils/resolveAddress'
+import { useWallet } from 'utils/wallet'
 
 import { BadgeAirdropListUpload } from '../../BadgeAirdropListUpload'
 import { AddressInput, NumberInput, TextInput } from '../../forms/FormInput'
@@ -266,7 +266,7 @@ export const BadgeActions = ({ badgeHubContractAddress, badgeId, badgeHubMessage
     nft: nftState.value,
     badgeHubMessages,
     badgeHubContract: badgeHubContractAddress,
-    txSigner: wallet.address,
+    txSigner: wallet.address || '',
     type,
   }
 
@@ -397,7 +397,7 @@ export const BadgeActions = ({ badgeHubContractAddress, badgeId, badgeHubMessage
 
   const { isLoading, mutate } = useMutation(
     async (event: FormEvent) => {
-      if (!wallet.client) {
+      if (!wallet.isWalletConnected) {
         throw new Error('Please connect your wallet.')
       }
       event.preventDefault()
@@ -412,8 +412,10 @@ export const BadgeActions = ({ badgeHubContractAddress, badgeId, badgeHubMessage
         throw new Error('Please enter a valid private key.')
       }
 
-      if (wallet.client && type === 'edit_badge') {
-        const feeRateRaw = await wallet.client.queryContractRaw(
+      if (type === 'edit_badge') {
+        const feeRateRaw = await (
+          await wallet.getCosmWasmClient()
+        ).queryContractRaw(
           badgeHubContractAddress,
           toUtf8(Buffer.from(Buffer.from('fee_rate').toString('hex'), 'hex').toString()),
         )
@@ -421,7 +423,9 @@ export const BadgeActions = ({ badgeHubContractAddress, badgeId, badgeHubMessage
 
         await toast
           .promise(
-            wallet.client.queryContractSmart(badgeHubContractAddress, {
+            (
+              await wallet.getCosmWasmClient()
+            ).queryContractSmart(badgeHubContractAddress, {
               badge: { id: badgeId },
             }),
             {

components/badges/creation/BadgeDetails.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable eslint-comments/disable-enable-pair */
+/* eslint-disable no-nested-ternary */
 
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
@@ -10,12 +11,13 @@ import { FormControl } from 'components/FormControl'
 import { useInputState, useNumberInputState } from 'components/forms/FormInput.hooks'
 import { useMetadataAttributesState } from 'components/forms/MetadataAttributes.hooks'
 import { InputDateTime } from 'components/InputDateTime'
-import { useWallet } from 'contexts/wallet'
+import { useGlobalSettings } from 'contexts/globalSettings'
 import type { Trait } from 'contracts/badgeHub'
 import type { ChangeEvent } from 'react'
 import { useEffect, useRef, useState } from 'react'
 import { toast } from 'react-hot-toast'
 import { BADGE_HUB_ADDRESS } from 'utils/constants'
+import { useWallet } from 'utils/wallet'
 
 import { AddressInput, NumberInput, TextInput } from '../../forms/FormInput'
 import { MetadataAttributes } from '../../forms/MetadataAttributes'
@@ -44,8 +46,9 @@ export interface BadgeDetailsDataProps {
   youtube_url?: string
 }
 
-export const BadgeDetails = ({ metadataSize, onChange }: BadgeDetailsProps) => {
-  const wallet = useWallet()
+export const BadgeDetails = ({ metadataSize, onChange, uploadMethod }: BadgeDetailsProps) => {
+  const { address = '', isWalletConnected, getCosmWasmClient } = useWallet()
+  const { timezone } = useGlobalSettings()
   const [timestamp, setTimestamp] = useState<Date | undefined>(undefined)
   const [transferrable, setTransferrable] = useState<boolean>(false)
   const [metadataFile, setMetadataFile] = useState<File>()
@@ -58,7 +61,7 @@ export const BadgeDetails = ({ metadataSize, onChange }: BadgeDetailsProps) => {
     name: 'manager',
     title: 'Manager',
     subtitle: 'Badge Hub Manager',
-    defaultValue: wallet.address ? wallet.address : '',
+    defaultValue: address,
   })
 
   const nameState = useInputState({
@@ -172,7 +175,9 @@ export const BadgeDetails = ({ metadataSize, onChange }: BadgeDetailsProps) => {
     reader.onload = (e) => {
       if (!event.target.files) return toast.error('No file selected.')
       if (!e.target?.result) return toast.error('Error parsing file.')
-      selectedFile = new File([e.target.result], event.target.files[0].name, { type: 'application/json' })
+      selectedFile = new File([e.target.result], event.target.files[0].name.replaceAll('#', ''), {
+        type: 'application/json',
+      })
     }
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     if (event.target.files[0]) reader.readAsArrayBuffer(event.target.files[0])
@@ -192,6 +197,10 @@ export const BadgeDetails = ({ metadataSize, onChange }: BadgeDetailsProps) => {
       })
   }, [metadataFile])
 
+  useEffect(() => {
+    animationUrlState.onChange('')
+  }, [uploadMethod])
+
   useEffect(() => {
     try {
       const data: BadgeDetailsDataProps = {
@@ -240,8 +249,10 @@ export const BadgeDetails = ({ metadataSize, onChange }: BadgeDetailsProps) => {
   useEffect(() => {
     const retrieveFeeRate = async () => {
       try {
-        if (wallet.client) {
-          const feeRateRaw = await wallet.client.queryContractRaw(
+        if (isWalletConnected) {
+          const feeRateRaw = await (
+            await getCosmWasmClient()
+          ).queryContractRaw(
             BADGE_HUB_ADDRESS,
             toUtf8(Buffer.from(Buffer.from('fee_rate').toString('hex'), 'hex').toString()),
           )
@@ -256,7 +267,7 @@ export const BadgeDetails = ({ metadataSize, onChange }: BadgeDetailsProps) => {
       }
     }
     void retrieveFeeRate()
-  }, [wallet.client])
+  }, [isWalletConnected, getCosmWasmClient])
 
   return (
     <div>
@@ -266,10 +277,32 @@ export const BadgeDetails = ({ metadataSize, onChange }: BadgeDetailsProps) => {
           <TextInput className="mt-2" {...nameState} />
           <TextInput className="mt-2" {...descriptionState} />
           <NumberInput className="mt-2" {...maxSupplyState} />
+          {uploadMethod === 'existing' ? <TextInput className="mt-2" {...animationUrlState} /> : null}
           <TextInput className="mt-2" {...externalUrlState} />
 
-          <FormControl className="mt-2" htmlId="expiry-date" subtitle="Badge minting expiry date" title="Expiry Date">
-            <InputDateTime minDate={new Date()} onChange={(date) => setTimestamp(date)} value={timestamp} />
+          <FormControl
+            className="mt-2"
+            htmlId="expiry-date"
+            subtitle={`Badge minting expiry date ${timezone === 'Local' ? '(local)' : '(UTC)'}`}
+            title="Expiry Date"
+          >
+            <InputDateTime
+              minDate={
+                timezone === 'Local' ? new Date() : new Date(Date.now() + new Date().getTimezoneOffset() * 60 * 1000)
+              }
+              onChange={(date) =>
+                setTimestamp(
+                  timezone === 'Local' ? date : new Date(date.getTime() - new Date().getTimezoneOffset() * 60 * 1000),
+                )
+              }
+              value={
+                timezone === 'Local'
+                  ? timestamp
+                  : timestamp
+                  ? new Date(timestamp.getTime() + new Date().getTimezoneOffset() * 60 * 1000)
+                  : undefined
+              }
+            />
           </FormControl>
           <div className="grid grid-cols-2">
             <div className="mt-2 w-1/3 form-control">

components/badges/creation/ImageUploadDetails.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable eslint-comments/disable-enable-pair */
-
+/* eslint-disable jsx-a11y/media-has-caption */
 /* eslint-disable no-misleading-character-class */
 /* eslint-disable no-control-regex */
 
@@ -10,9 +10,10 @@ import { TextInput } from 'components/forms/FormInput'
 import { useInputState } from 'components/forms/FormInput.hooks'
 import { SingleAssetPreview } from 'components/SingleAssetPreview'
 import type { ChangeEvent } from 'react'
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { toast } from 'react-hot-toast'
 import type { UploadServiceType } from 'services/upload'
+import { getAssetType } from 'utils/getAssetType'
 
 export type UploadMethod = 'new' | 'existing'
 export type MintRule = 'by_key' | 'by_minter' | 'by_keys' | 'not_resolved'
@@ -78,7 +79,7 @@ export const ImageUploadDetails = ({ onChange, mintRule }: ImageUploadDetailsPro
     reader.onload = (e) => {
       if (!event.target.files) return toast.error('No file selected.')
       if (!e.target?.result) return toast.error('Error parsing file.')
-      selectedFile = new File([e.target.result], event.target.files[0].name, { type: 'image/jpg' })
+      selectedFile = new File([e.target.result], event.target.files[0].name.replaceAll('#', ''), { type: 'image/jpg' })
     }
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     if (event.target.files[0]) reader.readAsArrayBuffer(event.target.files[0])
@@ -129,6 +130,22 @@ export const ImageUploadDetails = ({ onChange, mintRule }: ImageUploadDetailsPro
     imageUrlState.onChange('')
   }, [uploadMethod, mintRule])
 
+  const videoPreview = useMemo(
+    () => (
+      <video
+        className="ml-4"
+        controls
+        id="video"
+        onMouseEnter={(e) => e.currentTarget.play()}
+        onMouseLeave={(e) => e.currentTarget.pause()}
+        src={
+          imageUrlState.value ? imageUrlState.value.replace('ipfs://', 'https://ipfs-gw.stargaze-apis.com/ipfs/') : ''
+        }
+      />
+    ),
+    [imageUrlState.value],
+  )
+
   return (
     <div className="justify-items-start mb-3 rounded border-2 border-white/20 flex-column">
       <div className="flex justify-center">
@@ -190,13 +207,16 @@ export const ImageUploadDetails = ({ onChange, mintRule }: ImageUploadDetailsPro
             <div className="flex flex-row w-full">
               <TextInput {...imageUrlState} className="mt-2 ml-6 w-full max-w-2xl" />
               <Conditional test={imageUrlState.value !== ''}>
-                <div className="mt-2 ml-4 w-1/4 border-2 border-dashed">
-                  <img
-                    alt="badge-preview"
-                    className="w-full"
-                    src={imageUrlState.value.replace('IPFS://', 'ipfs://').replace(/,/g, '').replace(/"/g, '').trim()}
-                  />
-                </div>
+                {getAssetType(imageUrlState.value) === 'image' && (
+                  <div className="mt-2 ml-4 w-1/4 border-2 border-dashed">
+                    <img
+                      alt="badge-preview"
+                      className="w-full"
+                      src={imageUrlState.value.replace('IPFS://', 'ipfs://').replace(/,/g, '').replace(/"/g, '').trim()}
+                    />
+                  </div>
+                )}
+                {getAssetType(imageUrlState.value) === 'video' && videoPreview}
               </Conditional>
             </div>
           </div>
@@ -277,7 +297,7 @@ export const ImageUploadDetails = ({ onChange, mintRule }: ImageUploadDetailsPro
                         )}
                       >
                         <input
-                          accept="image/*"
+                          accept="image/*, video/*"
                           className={clsx(
                             'file:py-2 file:px-4 file:mr-4 file:bg-plumbus-light file:rounded file:border-0 cursor-pointer',
                             'before:absolute before:inset-0 before:hover:bg-white/5 before:transition',

components/badges/queries/Queries.tsx

@@ -10,7 +10,6 @@ import type { BadgeHubInstance } from 'contracts/badgeHub'
 import { toast } from 'react-hot-toast'
 import { useQuery } from 'react-query'
 
-import { useWallet } from '../../../contexts/wallet'
 import type { MintRule } from '../creation/ImageUploadDetails'
 
 interface BadgeQueriesProps {
@@ -20,8 +19,6 @@ interface BadgeQueriesProps {
   mintRule: MintRule
 }
 export const BadgeQueries = ({ badgeHubContractAddress, badgeId, badgeHubMessages, mintRule }: BadgeQueriesProps) => {
-  const wallet = useWallet()
-
   const comboboxState = useQueryComboboxState()
   const type = comboboxState.value?.id
 

components/badges/queries/query.ts

@@ -51,7 +51,7 @@ export type DispatchQueryArgs = {
 export const dispatchQuery = async (args: DispatchQueryArgs) => {
   const { badgeHubMessages } = args
   if (!badgeHubMessages) {
-    throw new Error('Cannot perform a query')
+    throw new Error('Cannot perform a query. Please connect your wallet first.')
   }
   switch (args.type) {
     case 'config': {

components/collections/actions/Action.tsx

@@ -1,4 +1,7 @@
+/* eslint-disable eslint-comments/disable-enable-pair */
+/* eslint-disable no-nested-ternary */
 import { toUtf8 } from '@cosmjs/encoding'
+import clsx from 'clsx'
 import { AirdropUpload } from 'components/AirdropUpload'
 import { Button } from 'components/Button'
 import type { DispatchExecuteArgs } from 'components/collections/actions/actions'
@@ -14,9 +17,10 @@ import { InputDateTime } from 'components/InputDateTime'
 import { JsonPreview } from 'components/JsonPreview'
 import { Tooltip } from 'components/Tooltip'
 import { TransactionHash } from 'components/TransactionHash'
-import { useWallet } from 'contexts/wallet'
+import { useGlobalSettings } from 'contexts/globalSettings'
 import type { BaseMinterInstance } from 'contracts/baseMinter'
 import type { OpenEditionMinterInstance } from 'contracts/openEditionMinter'
+import type { RoyaltyRegistryInstance } from 'contracts/royaltyRegistry'
 import type { SG721Instance } from 'contracts/sg721'
 import type { VendingMinterInstance } from 'contracts/vendingMinter'
 import type { FormEvent } from 'react'
@@ -24,8 +28,10 @@ import { useEffect, 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 type { AirdropAllocation } from 'utils/isValidAccountsFile'
 import { resolveAddress } from 'utils/resolveAddress'
+import { useWallet } from 'utils/wallet'
 
 import type { CollectionInfo } from '../../../contracts/sg721/contract'
 import { TextInput } from '../../forms/FormInput'
@@ -38,6 +44,7 @@ interface CollectionActionsProps {
   vendingMinterMessages: VendingMinterInstance | undefined
   baseMinterMessages: BaseMinterInstance | undefined
   openEditionMinterMessages: OpenEditionMinterInstance | undefined
+  royaltyRegistryMessages: RoyaltyRegistryInstance | undefined
   minterType: MinterType
   sg721Type: Sg721Type
 }
@@ -51,11 +58,13 @@ export const CollectionActions = ({
   vendingMinterMessages,
   baseMinterMessages,
   openEditionMinterMessages,
+  royaltyRegistryMessages,
   minterType,
   sg721Type,
 }: CollectionActionsProps) => {
   const wallet = useWallet()
   const [lastTx, setLastTx] = useState('')
+  const { timezone } = useGlobalSettings()
 
   const [timestamp, setTimestamp] = useState<Date | undefined>(undefined)
   const [endTimestamp, setEndTimestamp] = useState<Date | undefined>(undefined)
@@ -65,6 +74,7 @@ export const CollectionActions = ({
   const [explicitContent, setExplicitContent] = useState<ExplicitContentType>(undefined)
   const [resolvedRecipientAddress, setResolvedRecipientAddress] = useState<string>('')
   const [jsonExtensions, setJsonExtensions] = useState<boolean>(false)
+  const [decrement, setDecrement] = useState<boolean>(false)
 
   const actionComboboxState = useActionsComboboxState()
   const type = actionComboboxState.value?.id
@@ -132,7 +142,7 @@ export const CollectionActions = ({
     id: 'update-mint-price',
     name: 'updateMintPrice',
     title: type === 'update_discount_price' ? 'Discount Price' : 'Update Mint Price',
-    subtitle: type === 'update_discount_price' ? 'New discount price in STARS' : 'New minting price in STARS',
+    subtitle: type === 'update_discount_price' ? 'New discount price' : 'New minting price',
   })
 
   const descriptionState = useInputState({
@@ -166,9 +176,14 @@ export const CollectionActions = ({
   const royaltyShareState = useInputState({
     id: 'royalty-share',
     name: 'royaltyShare',
-    title: 'Share Percentage',
-    subtitle: 'Percentage of royalties to be paid',
-    placeholder: '5%',
+    title: type !== 'update_royalties_for_infinity_swap' ? 'Share Percentage' : 'Share Delta',
+    subtitle:
+      type !== 'update_royalties_for_infinity_swap'
+        ? 'Percentage of royalties to be paid'
+        : 'Change in share percentage',
+    placeholder: isEitherType(type, ['set_royalties_for_infinity_swap', 'update_royalties_for_infinity_swap'])
+      ? '0.5%'
+      : '5%',
   })
 
   const showTokenUriField = isEitherType(type, ['mint_token_uri', 'update_token_metadata'])
@@ -194,12 +209,20 @@ export const CollectionActions = ({
     'batch_transfer',
     'batch_mint_for',
   ])
-  const showAirdropFileField = isEitherType(type, ['airdrop', 'airdrop_open_edition', 'airdrop_specific'])
+  const showAirdropFileField = isEitherType(type, [
+    'airdrop',
+    'airdrop_open_edition',
+    'airdrop_specific',
+    'batch_transfer_multi_address',
+  ])
   const showPriceField = isEitherType(type, ['update_mint_price', 'update_discount_price'])
   const showDescriptionField = type === 'update_collection_info'
   const showImageField = type === 'update_collection_info'
   const showExternalLinkField = type === 'update_collection_info'
-  const showRoyaltyRelatedFields = type === 'update_collection_info'
+  const showRoyaltyRelatedFields =
+    type === 'update_collection_info' ||
+    type === 'set_royalties_for_infinity_swap' ||
+    type === 'update_royalties_for_infinity_swap'
   const showExplicitContentField = type === 'update_collection_info'
   const showBaseUriField = type === 'batch_update_token_metadata'
 
@@ -210,6 +233,7 @@ export const CollectionActions = ({
     limit: limitState.value,
     minterContract: minterContractAddress,
     sg721Contract: sg721ContractAddress,
+    royaltyRegistryContract: ROYALTY_REGISTRY_ADDRESS,
     tokenId: tokenIdState.value,
     tokenIds: tokenIdListState.value,
     tokenUri: tokenURIState.value.trim().endsWith('/')
@@ -220,10 +244,11 @@ export const CollectionActions = ({
     baseMinterMessages,
     openEditionMinterMessages,
     sg721Messages,
+    royaltyRegistryMessages,
     recipient: resolvedRecipientAddress,
     recipients: airdropArray,
     tokenRecipients: airdropAllocationArray,
-    txSigner: wallet.address,
+    txSigner: wallet.address || '',
     type,
     price: priceState.value.toString(),
     baseUri: baseURIState.value.trim().endsWith('/')
@@ -231,6 +256,7 @@ export const CollectionActions = ({
       : baseURIState.value.trim(),
     collectionInfo,
     jsonExtensions,
+    decrement,
   }
   const resolveRecipientAddress = async () => {
     await resolveAddress(recipientState.value.trim(), wallet).then((resolvedAddress) => {
@@ -244,7 +270,7 @@ export const CollectionActions = ({
   const resolveRoyaltyPaymentAddress = async () => {
     await resolveAddress(royaltyPaymentAddressState.value.trim(), wallet).then((resolvedAddress) => {
       setCollectionInfo({
-        description: descriptionState.value || undefined,
+        description: descriptionState.value.replaceAll('\\n', '\n') || undefined,
         image: imageState.value || undefined,
         explicit_content: explicitContent,
         external_link: externalLinkState.value || undefined,
@@ -265,7 +291,7 @@ export const CollectionActions = ({
 
   useEffect(() => {
     setCollectionInfo({
-      description: descriptionState.value || undefined,
+      description: descriptionState.value.replaceAll('\\n', '\n') || undefined,
       image: imageState.value || undefined,
       explicit_content: explicitContent,
       external_link: externalLinkState.value || undefined,
@@ -286,6 +312,13 @@ export const CollectionActions = ({
     royaltyShareState.value,
   ])
 
+  useEffect(() => {
+    if (isEitherType(type, ['set_royalties_for_infinity_swap']) && Number(royaltyShareState.value) > 5) {
+      royaltyShareState.onChange('5')
+      toast.error('Royalty share cannot be greater than 5% for Infinity Swap')
+    }
+  }, [royaltyShareState.value])
+
   useEffect(() => {
     const addresses: string[] = []
     airdropAllocationArray.forEach((allocation) => {
@@ -304,20 +337,25 @@ export const CollectionActions = ({
   const { isLoading, mutate } = useMutation(
     async (event: FormEvent) => {
       event.preventDefault()
+      if (!wallet.isWalletConnected) {
+        throw new Error('Please connect your wallet first.')
+      }
       if (!type) {
-        throw new Error('Please select an action!')
+        throw new Error('Please select an action.')
       }
       if (minterContractAddress === '' && sg721ContractAddress === '') {
         throw new Error('Please enter minter and sg721 contract addresses!')
       }
 
-      if (wallet.client && type === 'update_mint_price') {
-        const contractConfig = wallet.client.queryContractSmart(minterContractAddress, {
+      if (wallet.isWalletConnected && type === 'update_mint_price') {
+        const contractConfig = (await wallet.getCosmWasmClient()).queryContractSmart(minterContractAddress, {
           config: {},
         })
         await toast
           .promise(
-            wallet.client.queryContractSmart(minterContractAddress, {
+            (
+              await wallet.getCosmWasmClient()
+            ).queryContractSmart(minterContractAddress, {
               mint_price: {},
             }),
             {
@@ -349,7 +387,9 @@ export const CollectionActions = ({
                 })
             } else {
               await contractConfig.then(async (config) => {
-                const factoryParameters = await wallet.client?.queryContractSmart(config.factory, {
+                const factoryParameters = await (
+                  await wallet.getCosmWasmClient()
+                ).queryContractSmart(config.factory, {
                   params: {},
                 })
                 if (
@@ -379,8 +419,8 @@ export const CollectionActions = ({
         royaltyPaymentAddressState.value &&
         !royaltyPaymentAddressState.value.trim().endsWith('.stars')
       ) {
-        const contractInfoResponse = await wallet.client
-          ?.queryContractRaw(
+        const contractInfoResponse = await (await wallet.getCosmWasmClient())
+          .queryContractRaw(
             royaltyPaymentAddressState.value.trim(),
             toUtf8(Buffer.from(Buffer.from('contract_info').toString('hex'), 'hex').toString()),
           )
@@ -392,8 +432,8 @@ export const CollectionActions = ({
         if (contractInfoResponse !== undefined) {
           const contractInfo = JSON.parse(new TextDecoder().decode(contractInfoResponse as Uint8Array))
           // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-          if (contractInfo && !contractInfo.contract.includes('splits'))
-            throw new Error('The provided royalty payment address does not belong to a splits contract.')
+          if (contractInfo && (contractInfo.contract.includes('minter') || contractInfo.contract.includes('sg721')))
+            throw new Error('The provided royalty payment address does not belong to a compatible contract.')
           else console.log(contractInfo)
         }
       }
@@ -418,6 +458,28 @@ export const CollectionActions = ({
     setAirdropAllocationArray(data)
   }
 
+  const downloadSampleAirdropTokensFile = () => {
+    const csvData =
+      'address,amount\nstars153w5xhuqu3et29lgqk4dsynj6gjn96lr33wx4e,3\nstars1xkes5r2k8u3m3ayfpverlkcrq3k4jhdk8ws0uz,1\nstars1s8qx0zvz8yd6e4x0mqmqf7fr9vvfn622wtp3g3,2'
+    const blob = new Blob([csvData], { type: 'text/csv' })
+    const url = window.URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.setAttribute('href', url)
+    a.setAttribute('download', 'airdrop_tokens.csv')
+    a.click()
+  }
+
+  const downloadSampleAirdropSpecificTokensFile = () => {
+    const csvData =
+      'address,tokenId\nstars153w5xhuqu3et29lgqk4dsynj6gjn96lr33wx4e,214\nstars1xkes5r2k8u3m3ayfpverlkcrq3k4jhdk8ws0uz,683\nstars1s8qx0zvz8yd6e4x0mqmqf7fr9vvfn622wtp3g3,102'
+    const blob = new Blob([csvData], { type: 'text/csv' })
+    const url = window.URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.setAttribute('href', url)
+    a.setAttribute('download', 'airdrop_specific_tokens.csv')
+    a.click()
+  }
+
   return (
     <form>
       <div className="grid grid-cols-2 mt-4">
@@ -439,6 +501,24 @@ export const CollectionActions = ({
             <div className="p-2 my-4 rounded border-2 border-gray-500/50">
               <TextInput className="mb-2" {...royaltyPaymentAddressState} />
               <NumberInput className="mb-2" {...royaltyShareState} />
+              <Conditional test={type === 'update_royalties_for_infinity_swap'}>
+                <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>
           )}
           {showExplicitContentField && (
@@ -489,25 +569,79 @@ export const CollectionActions = ({
             </div>
           )}
           {showAirdropFileField && (
-            <FormGroup
-              subtitle={`CSV file that contains the airdrop addresses and the ${
-                type === 'airdrop' ? 'amount of tokens' : 'token ID'
-              } allocated for each address. Should start with the following header row: ${
-                type === 'airdrop' ? 'address,amount' : 'address,tokenId'
-              }`}
-              title="Airdrop File"
-            >
-              <AirdropUpload onChange={airdropFileOnChange} />
-            </FormGroup>
+            <div>
+              <FormGroup
+                subtitle={`CSV file that contains the ${
+                  type === 'batch_transfer_multi_address' ? '' : 'airdrop'
+                } addresses and the ${
+                  type === 'airdrop' || type === 'airdrop_open_edition' ? 'amount of tokens' : 'token ID'
+                } allocated for each address. Should start with the following header row: ${
+                  type === 'airdrop' || type === 'airdrop_open_edition' ? 'address,amount' : 'address,tokenId'
+                }`}
+                title={`${type === 'batch_transfer_multi_address' ? 'Multi-Recipient Transfer File' : 'Airdrop File'}`}
+              >
+                <AirdropUpload onChange={airdropFileOnChange} />
+              </FormGroup>
+              <Button
+                className="ml-4 text-sm"
+                onClick={
+                  type === 'airdrop' || type === 'airdrop_open_edition'
+                    ? downloadSampleAirdropTokensFile
+                    : downloadSampleAirdropSpecificTokensFile
+                }
+              >
+                Download Sample File
+              </Button>
+            </div>
           )}
           <Conditional test={showDateField}>
-            <FormControl className="mt-2" htmlId="start-date" title="Start Time">
-              <InputDateTime minDate={new Date()} onChange={(date) => setTimestamp(date)} value={timestamp} />
+            <FormControl
+              className="mt-2"
+              htmlId="start-date"
+              title={`Start Time ${timezone === 'Local' ? '(local)' : '(UTC)'}`}
+            >
+              <InputDateTime
+                minDate={
+                  timezone === 'Local' ? new Date() : new Date(Date.now() + new Date().getTimezoneOffset() * 60 * 1000)
+                }
+                onChange={(date) =>
+                  setTimestamp(
+                    timezone === 'Local' ? date : new Date(date.getTime() - new Date().getTimezoneOffset() * 60 * 1000),
+                  )
+                }
+                value={
+                  timezone === 'Local'
+                    ? timestamp
+                    : timestamp
+                    ? new Date(timestamp.getTime() + new Date().getTimezoneOffset() * 60 * 1000)
+                    : undefined
+                }
+              />
             </FormControl>
           </Conditional>
           <Conditional test={showEndDateField}>
-            <FormControl className="mt-2" htmlId="end-date" title="End Time">
-              <InputDateTime minDate={new Date()} onChange={(date) => setEndTimestamp(date)} value={endTimestamp} />
+            <FormControl
+              className="mt-2"
+              htmlId="end-date"
+              title={`End Time ${timezone === 'Local' ? '(local)' : '(UTC)'}`}
+            >
+              <InputDateTime
+                minDate={
+                  timezone === 'Local' ? new Date() : new Date(Date.now() + new Date().getTimezoneOffset() * 60 * 1000)
+                }
+                onChange={(date) =>
+                  setEndTimestamp(
+                    timezone === 'Local' ? date : new Date(date.getTime() - new Date().getTimezoneOffset() * 60 * 1000),
+                  )
+                }
+                value={
+                  timezone === 'Local'
+                    ? endTimestamp
+                    : endTimestamp
+                    ? new Date(endTimestamp.getTime() + new Date().getTimezoneOffset() * 60 * 1000)
+                    : undefined
+                }
+              />
             </FormControl>
           </Conditional>
           <Conditional test={showBaseUriField}>

components/collections/actions/actions.ts

@@ -1,10 +1,13 @@
 /* eslint-disable eslint-comments/disable-enable-pair */
 import { useBaseMinterContract } from 'contracts/baseMinter'
 import { useOpenEditionMinterContract } from 'contracts/openEditionMinter'
+import type { RoyaltyRegistryInstance } from 'contracts/royaltyRegistry'
+import { useRoyaltyRegistryContract } from 'contracts/royaltyRegistry'
 import type { CollectionInfo, SG721Instance } from 'contracts/sg721'
 import { useSG721Contract } from 'contracts/sg721'
 import type { VendingMinterInstance } from 'contracts/vendingMinter'
 import { useVendingMinterContract } from 'contracts/vendingMinter'
+import { INFINITY_SWAP_PROTOCOL_ADDRESS } from 'utils/constants'
 import type { AirdropAllocation } from 'utils/isValidAccountsFile'
 
 import type { BaseMinterInstance } from '../../../contracts/baseMinter/contract'
@@ -29,8 +32,11 @@ export const ACTION_TYPES = [
   'update_per_address_limit',
   'update_collection_info',
   'freeze_collection_info',
+  'set_royalties_for_infinity_swap',
+  'update_royalties_for_infinity_swap',
   'transfer',
   'batch_transfer',
+  'batch_transfer_multi_address',
   'burn',
   'batch_burn',
   'batch_mint_for',
@@ -72,6 +78,16 @@ export const BASE_ACTION_LIST: ActionListItem[] = [
     name: 'Freeze Collection Info',
     description: `Freeze collection info to prevent further updates`,
   },
+  {
+    id: 'set_royalties_for_infinity_swap',
+    name: 'Set Royalty Details for Infinity Swap',
+    description: `Set royalty details for Infinity Swap`,
+  },
+  {
+    id: 'update_royalties_for_infinity_swap',
+    name: 'Update Royalty Details for Infinity Swap',
+    description: `Update royalty details for Infinity Swap`,
+  },
   {
     id: 'transfer',
     name: 'Transfer Tokens',
@@ -82,6 +98,11 @@ export const BASE_ACTION_LIST: ActionListItem[] = [
     name: 'Batch Transfer Tokens',
     description: `Transfer a list of tokens to a recipient`,
   },
+  {
+    id: 'batch_transfer_multi_address',
+    name: 'Transfer Tokens to Multiple Recipients',
+    description: `Transfer a list of tokens to multiple addresses`,
+  },
   {
     id: 'burn',
     name: 'Burn Token',
@@ -160,6 +181,16 @@ export const VENDING_ACTION_LIST: ActionListItem[] = [
     name: 'Freeze Collection Info',
     description: `Freeze collection info to prevent further updates`,
   },
+  {
+    id: 'set_royalties_for_infinity_swap',
+    name: 'Set Royalty Details for Infinity Swap',
+    description: `Set royalty details for Infinity Swap`,
+  },
+  {
+    id: 'update_royalties_for_infinity_swap',
+    name: 'Update Royalty Details for Infinity Swap',
+    description: `Update royalty details for Infinity Swap`,
+  },
   {
     id: 'transfer',
     name: 'Transfer Tokens',
@@ -170,6 +201,11 @@ export const VENDING_ACTION_LIST: ActionListItem[] = [
     name: 'Batch Transfer Tokens',
     description: `Transfer a list of tokens to a recipient`,
   },
+  {
+    id: 'batch_transfer_multi_address',
+    name: 'Transfer Tokens to Multiple Recipients',
+    description: `Transfer a list of tokens to multiple addresses`,
+  },
   {
     id: 'burn',
     name: 'Burn Token',
@@ -248,6 +284,16 @@ export const OPEN_EDITION_ACTION_LIST: ActionListItem[] = [
     name: 'Freeze Collection Info',
     description: `Freeze collection info to prevent further updates`,
   },
+  {
+    id: 'set_royalties_for_infinity_swap',
+    name: 'Set Royalty Details for Infinity Swap',
+    description: `Set royalty details for Infinity Swap`,
+  },
+  {
+    id: 'update_royalties_for_infinity_swap',
+    name: 'Update Royalty Details for Infinity Swap',
+    description: `Update royalty details for Infinity Swap`,
+  },
   {
     id: 'transfer',
     name: 'Transfer Tokens',
@@ -258,6 +304,11 @@ export const OPEN_EDITION_ACTION_LIST: ActionListItem[] = [
     name: 'Batch Transfer Tokens',
     description: `Transfer a list of tokens to a recipient`,
   },
+  {
+    id: 'batch_transfer_multi_address',
+    name: 'Transfer Tokens to Multiple Recipients',
+    description: `Transfer a list of tokens to multiple addresses`,
+  },
   {
     id: 'burn',
     name: 'Burn Token',
@@ -307,10 +358,12 @@ export interface DispatchExecuteProps {
 export interface DispatchExecuteArgs {
   minterContract: string
   sg721Contract: string
+  royaltyRegistryContract: string
   vendingMinterMessages?: VendingMinterInstance
   baseMinterMessages?: BaseMinterInstance
   openEditionMinterMessages?: OpenEditionMinterInstance
   sg721Messages?: SG721Instance
+  royaltyRegistryMessages?: RoyaltyRegistryInstance
   txSigner: string
   type: string | undefined
   tokenUri: string
@@ -328,11 +381,25 @@ export interface DispatchExecuteArgs {
   collectionInfo: CollectionInfo | undefined
   baseUri: string
   jsonExtensions: boolean
+  decrement: boolean
 }
 
 export const dispatchExecute = async (args: DispatchExecuteArgs) => {
-  const { vendingMinterMessages, baseMinterMessages, openEditionMinterMessages, sg721Messages, txSigner } = args
-  if (!vendingMinterMessages || !baseMinterMessages || !openEditionMinterMessages || !sg721Messages) {
+  const {
+    vendingMinterMessages,
+    baseMinterMessages,
+    openEditionMinterMessages,
+    sg721Messages,
+    royaltyRegistryMessages,
+    txSigner,
+  } = args
+  if (
+    !vendingMinterMessages ||
+    !baseMinterMessages ||
+    !openEditionMinterMessages ||
+    !sg721Messages ||
+    !royaltyRegistryMessages
+  ) {
     throw new Error('Cannot execute actions')
   }
   switch (args.type) {
@@ -399,12 +466,32 @@ export const dispatchExecute = async (args: DispatchExecuteArgs) => {
     case 'shuffle': {
       return vendingMinterMessages.shuffle(txSigner)
     }
+    case 'set_royalties_for_infinity_swap': {
+      return royaltyRegistryMessages.setCollectionRoyaltyProtocol(
+        args.sg721Contract,
+        INFINITY_SWAP_PROTOCOL_ADDRESS,
+        args.collectionInfo?.royalty_info?.payment_address as string,
+        Number(args.collectionInfo?.royalty_info?.share) * 100,
+      )
+    }
+    case 'update_royalties_for_infinity_swap': {
+      return royaltyRegistryMessages.updateCollectionRoyaltyProtocol(
+        args.sg721Contract,
+        INFINITY_SWAP_PROTOCOL_ADDRESS,
+        args.collectionInfo?.royalty_info?.payment_address as string,
+        Number(args.collectionInfo?.royalty_info?.share) * 100,
+        args.decrement,
+      )
+    }
     case 'transfer': {
       return sg721Messages.transferNft(args.recipient, args.tokenId.toString())
     }
     case 'batch_transfer': {
       return sg721Messages.batchTransfer(args.recipient, args.tokenIds)
     }
+    case 'batch_transfer_multi_address': {
+      return sg721Messages.batchTransferMultiAddress(txSigner, args.tokenRecipients)
+    }
     case 'burn': {
       return sg721Messages.burn(args.tokenId.toString())
     }
@@ -441,7 +528,10 @@ export const previewExecutePayload = (args: DispatchExecuteArgs) => {
   const { messages: baseMinterMessages } = useBaseMinterContract()
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const { messages: openEditionMinterMessages } = useOpenEditionMinterContract()
-  const { minterContract, sg721Contract } = args
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const { messages: royaltyRegistryMessages } = useRoyaltyRegistryContract()
+
+  const { minterContract, sg721Contract, royaltyRegistryContract } = args
   switch (args.type) {
     case 'mint_token_uri': {
       return baseMinterMessages(minterContract)?.mint(args.tokenUri)
@@ -506,12 +596,32 @@ export const previewExecutePayload = (args: DispatchExecuteArgs) => {
     case 'shuffle': {
       return vendingMinterMessages(minterContract)?.shuffle()
     }
+    case 'set_royalties_for_infinity_swap': {
+      return royaltyRegistryMessages(royaltyRegistryContract)?.setCollectionRoyaltyProtocol(
+        args.sg721Contract,
+        INFINITY_SWAP_PROTOCOL_ADDRESS,
+        args.collectionInfo?.royalty_info?.payment_address as string,
+        Number(args.collectionInfo?.royalty_info?.share) * 100,
+      )
+    }
+    case 'update_royalties_for_infinity_swap': {
+      return royaltyRegistryMessages(royaltyRegistryContract)?.updateCollectionRoyaltyProtocol(
+        args.sg721Contract,
+        INFINITY_SWAP_PROTOCOL_ADDRESS,
+        args.collectionInfo?.royalty_info?.payment_address as string,
+        Number(args.collectionInfo?.royalty_info?.share) * 100,
+        args.decrement,
+      )
+    }
     case 'transfer': {
       return sg721Messages(sg721Contract)?.transferNft(args.recipient, args.tokenId.toString())
     }
     case 'batch_transfer': {
       return sg721Messages(sg721Contract)?.batchTransfer(args.recipient, args.tokenIds)
     }
+    case 'batch_transfer_multi_address': {
+      return sg721Messages(sg721Contract)?.batchTransferMultiAddress(args.tokenRecipients)
+    }
     case 'burn': {
       return sg721Messages(sg721Contract)?.burn(args.tokenId.toString())
     }

components/collections/creation/BaseMinterDetails.tsx

@@ -8,10 +8,10 @@ import clsx from 'clsx'
 import { Alert } from 'components/Alert'
 import { Conditional } from 'components/Conditional'
 import { useInputState } from 'components/forms/FormInput.hooks'
-import { useWallet } from 'contexts/wallet'
 import React, { useCallback, useEffect, useState } from 'react'
 import { toast } from 'react-hot-toast'
 import { API_URL } from 'utils/constants'
+import { useWallet } from 'utils/wallet'
 
 import { useDebounce } from '../../../utils/debounce'
 import { TextInput } from '../../forms/FormInput'
@@ -28,6 +28,7 @@ export interface MinterInfo {
 interface BaseMinterDetailsProps {
   onChange: (data: BaseMinterDetailsDataProps) => void
   minterType: MinterType
+  importedBaseMinterDetails?: BaseMinterDetailsDataProps
 }
 
 export interface BaseMinterDetailsDataProps {
@@ -37,7 +38,7 @@ export interface BaseMinterDetailsDataProps {
   collectionTokenCount: number | undefined
 }
 
-export const BaseMinterDetails = ({ onChange, minterType }: BaseMinterDetailsProps) => {
+export const BaseMinterDetails = ({ onChange, minterType, importedBaseMinterDetails }: BaseMinterDetailsProps) => {
   const wallet = useWallet()
 
   const [myBaseMinterContracts, setMyBaseMinterContracts] = useState<MinterInfo[]>([])
@@ -55,7 +56,7 @@ export const BaseMinterDetails = ({ onChange, minterType }: BaseMinterDetailsPro
 
   const fetchMinterContracts = async (): Promise<MinterInfo[]> => {
     const contracts: MinterInfo[] = await axios
-      .get(`${API_URL}/api/v1beta/collections/${wallet.address}`)
+      .get(`${API_URL}/api/v1beta/collections/${wallet.address || ''}`)
       .then((response) => {
         const collectionData = response.data
         const minterContracts = collectionData.map((collection: any) => {
@@ -69,8 +70,8 @@ export const BaseMinterDetails = ({ onChange, minterType }: BaseMinterDetailsPro
   }
 
   async function getMinterContractType(minterContractAddress: string) {
-    if (wallet.client && minterContractAddress.length > 0) {
-      const client = wallet.client
+    if (wallet.isWalletConnected && minterContractAddress.length > 0) {
+      const client = await wallet.getCosmWasmClient()
       const data = await client.queryContractRaw(
         minterContractAddress,
         toUtf8(Buffer.from(Buffer.from('contract_info').toString('hex'), 'hex').toString()),
@@ -128,8 +129,10 @@ export const BaseMinterDetails = ({ onChange, minterType }: BaseMinterDetailsPro
 
   const fetchSg721Address = async () => {
     if (debouncedExistingBaseMinterContract.length === 0) return
-    await wallet.client
-      ?.queryContractSmart(debouncedExistingBaseMinterContract, {
+    await (
+      await wallet.getCosmWasmClient()
+    )
+      .queryContractSmart(debouncedExistingBaseMinterContract, {
         config: {},
       })
       .then((response) => {
@@ -144,8 +147,10 @@ export const BaseMinterDetails = ({ onChange, minterType }: BaseMinterDetailsPro
 
   const fetchCollectionTokenCount = async () => {
     if (selectedCollectionAddress === undefined) return
-    await wallet.client
-      ?.queryContractSmart(selectedCollectionAddress, {
+    await (
+      await wallet.getCosmWasmClient()
+    )
+      .queryContractSmart(selectedCollectionAddress, {
         num_tokens: {},
       })
       .then((response) => {
@@ -163,7 +168,7 @@ export const BaseMinterDetails = ({ onChange, minterType }: BaseMinterDetailsPro
       setMyBaseMinterContracts([])
       existingBaseMinterState.onChange('')
       void displayToast()
-    } else if (baseMinterAcquisitionMethod === 'new' || !wallet.initialized) {
+    } else if (baseMinterAcquisitionMethod === 'new' || !wallet.isWalletConnected) {
       setMyBaseMinterContracts([])
       existingBaseMinterState.onChange('')
     }
@@ -193,11 +198,20 @@ export const BaseMinterDetails = ({ onChange, minterType }: BaseMinterDetailsPro
   }, [
     existingBaseMinterState.value,
     baseMinterAcquisitionMethod,
-    wallet.initialized,
+    wallet.isWalletConnected,
     selectedCollectionAddress,
     collectionTokenCount,
   ])
 
+  useEffect(() => {
+    if (importedBaseMinterDetails) {
+      setBaseMinterAcquisitionMethod(importedBaseMinterDetails.baseMinterAcquisitionMethod)
+      existingBaseMinterState.onChange(
+        importedBaseMinterDetails.existingBaseMinter ? importedBaseMinterDetails.existingBaseMinter : '',
+      )
+    }
+  }, [importedBaseMinterDetails])
+
   return (
     <div className="mx-10 mb-4 rounded border-2 border-white/20">
       <div className="flex justify-center mb-2">
@@ -260,7 +274,7 @@ export const BaseMinterDetails = ({ onChange, minterType }: BaseMinterDetailsPro
             </Conditional>
             <Conditional test={myBaseMinterContracts.length === 0}>
               <div className="flex flex-col">
-                <Conditional test={wallet.initialized}>
+                <Conditional test={wallet.isWalletConnected}>
                   <Alert className="my-2 w-[90%]" type="info">
                     No previous 1/1 collections were found. You may create a new 1/1 collection or fill in the minter
                     contract address manually.
@@ -272,7 +286,7 @@ export const BaseMinterDetails = ({ onChange, minterType }: BaseMinterDetailsPro
                     isRequired
                   />
                 </Conditional>
-                <Conditional test={!wallet.initialized}>
+                <Conditional test={!wallet.isWalletConnected}>
                   <Alert className="my-2 w-[90%]" type="warning">
                     Please connect your wallet first.
                   </Alert>

components/collections/creation/CollectionDetails.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable eslint-comments/disable-enable-pair */
+/* eslint-disable no-nested-ternary */
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
@@ -10,6 +11,7 @@ import { FormGroup } from 'components/FormGroup'
 import { useInputState } from 'components/forms/FormInput.hooks'
 import { InputDateTime } from 'components/InputDateTime'
 import { Tooltip } from 'components/Tooltip'
+import { useGlobalSettings } from 'contexts/globalSettings'
 import { addLogItem } from 'contexts/log'
 import type { ChangeEvent } from 'react'
 import { useEffect, useRef, useState } from 'react'
@@ -26,6 +28,7 @@ interface CollectionDetailsProps {
   uploadMethod: UploadMethod
   coverImageUrl: string
   minterType: MinterType
+  importedCollectionDetails?: CollectionDetailsDataProps
 }
 
 export interface CollectionDetailsDataProps {
@@ -39,11 +42,18 @@ export interface CollectionDetailsDataProps {
   updatable: boolean
 }
 
-export const CollectionDetails = ({ onChange, uploadMethod, coverImageUrl, minterType }: CollectionDetailsProps) => {
+export const CollectionDetails = ({
+  onChange,
+  uploadMethod,
+  coverImageUrl,
+  minterType,
+  importedCollectionDetails,
+}: CollectionDetailsProps) => {
   const [coverImage, setCoverImage] = useState<File | null>(null)
   const [timestamp, setTimestamp] = useState<Date | undefined>()
   const [explicit, setExplicit] = useState<boolean>(false)
   const [updatable, setUpdatable] = useState<boolean>(false)
+  const { timezone } = useGlobalSettings()
 
   const initialRender = useRef(true)
 
@@ -105,6 +115,23 @@ export const CollectionDetails = ({ onChange, uploadMethod, coverImageUrl, minte
     updatable,
   ])
 
+  useEffect(() => {
+    if (importedCollectionDetails) {
+      nameState.onChange(importedCollectionDetails.name)
+      descriptionState.onChange(importedCollectionDetails.description)
+      symbolState.onChange(importedCollectionDetails.symbol)
+      externalLinkState.onChange(importedCollectionDetails.externalLink || '')
+      setTimestamp(
+        importedCollectionDetails.startTradingTime
+          ? new Date(parseInt(importedCollectionDetails.startTradingTime) / 1_000_000)
+          : undefined,
+      )
+      setExplicit(importedCollectionDetails.explicit)
+      setUpdatable(importedCollectionDetails.updatable)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [importedCollectionDetails])
+
   const selectCoverImage = (event: ChangeEvent<HTMLInputElement>) => {
     if (event.target.files === null) return toast.error('Error selecting cover image')
     if (event.target.files.length === 0) {
@@ -115,7 +142,9 @@ export const CollectionDetails = ({ onChange, uploadMethod, coverImageUrl, minte
     reader.onload = (e) => {
       if (!e.target?.result) return toast.error('Error parsing file.')
       if (!event.target.files) return toast.error('No files selected.')
-      const imageFile = new File([e.target.result], event.target.files[0].name, { type: 'image/jpg' })
+      const imageFile = new File([e.target.result], event.target.files[0].name.replaceAll('#', ''), {
+        type: 'image/jpg',
+      })
       setCoverImage(imageFile)
     }
     reader.readAsArrayBuffer(event.target.files[0])
@@ -154,9 +183,31 @@ export const CollectionDetails = ({ onChange, uploadMethod, coverImageUrl, minte
                 className={clsx(minterType === 'base' ? 'mt-10' : 'mt-2')}
                 htmlId="timestamp"
                 subtitle="Trading start time offset will be set as 2 weeks by default."
-                title="Trading Start Time (optional)"
+                title={`Trading Start Time (optional | ${timezone === 'Local' ? 'local)' : 'UTC)'}`}
               >
-                <InputDateTime minDate={new Date()} onChange={(date) => setTimestamp(date)} value={timestamp} />
+                <InputDateTime
+                  minDate={
+                    timezone === 'Local'
+                      ? new Date()
+                      : new Date(Date.now() + new Date().getTimezoneOffset() * 60 * 1000)
+                  }
+                  onChange={(date) =>
+                    date
+                      ? setTimestamp(
+                          timezone === 'Local'
+                            ? date
+                            : new Date(date.getTime() - new Date().getTimezoneOffset() * 60 * 1000),
+                        )
+                      : setTimestamp(undefined)
+                  }
+                  value={
+                    timezone === 'Local'
+                      ? timestamp
+                      : timestamp
+                      ? new Date(timestamp.getTime() + new Date().getTimezoneOffset() * 60 * 1000)
+                      : undefined
+                  }
+                />
               </FormControl>
             </Conditional>
             <Conditional test={minterType === 'base'}>
@@ -207,7 +258,7 @@ export const CollectionDetails = ({ onChange, uploadMethod, coverImageUrl, minte
                   </div>
                 </div>
               </div>
-              <Conditional test={SG721_UPDATABLE_CODE_ID > 0}>
+              <Conditional test={false && SG721_UPDATABLE_CODE_ID > 0}>
                 <Tooltip
                   backgroundColor="bg-blue-500"
                   label={
@@ -222,7 +273,10 @@ export const CollectionDetails = ({ onChange, uploadMethod, coverImageUrl, minte
                 >
                   <div className={clsx('flex flex-col mt-11 space-y-2 w-full form-control')}>
                     <label className="justify-start cursor-pointer label">
-                      <span className="mr-4 font-bold">Updatable Token Metadata</span>
+                      <div className="flex flex-col">
+                        <span className="mr-4 font-bold">Updatable Token Metadata</span>
+                        <span className="mr-4">(Price: 2000 STARS)</span>
+                      </div>
                       <input
                         checked={updatable}
                         className={`toggle ${updatable ? `bg-stargaze` : `bg-gray-600`}`}
@@ -327,7 +381,7 @@ export const CollectionDetails = ({ onChange, uploadMethod, coverImageUrl, minte
               </div>
             </div>
           </div>
-          <Conditional test={SG721_UPDATABLE_CODE_ID > 0}>
+          <Conditional test={false && SG721_UPDATABLE_CODE_ID > 0}>
             <Tooltip
               backgroundColor="bg-blue-500"
               label={
@@ -344,11 +398,14 @@ export const CollectionDetails = ({ onChange, uploadMethod, coverImageUrl, minte
                 className={clsx(
                   minterType === 'base'
                     ? 'flex flex-col -ml-16 space-y-2 w-1/2 form-control'
-                    : 'flex flex-col space-y-2 w-3/4 form-control',
+                    : 'flex flex-col space-y-2 w-full form-control',
                 )}
               >
                 <label className="justify-start cursor-pointer label">
-                  <span className="mr-4 font-bold">Updatable Token Metadata</span>
+                  <div className="flex flex-col">
+                    <span className="mr-4 font-bold">Updatable Token Metadata</span>
+                    <span className="mr-4">(Price: 2000 STARS)</span>
+                  </div>
                   <input
                     checked={updatable}
                     className={`toggle ${updatable ? `bg-stargaze` : `bg-gray-600`}`}

components/collections/creation/MintingDetails.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable eslint-comments/disable-enable-pair */
+/* eslint-disable @typescript-eslint/no-unnecessary-condition */
 /* eslint-disable no-nested-ternary */
 import { FormControl } from 'components/FormControl'
 import { FormGroup } from 'components/FormGroup'
@@ -7,10 +8,11 @@ import { InputDateTime } from 'components/InputDateTime'
 import { vendingMinterList } from 'config/minter'
 import type { TokenInfo } from 'config/token'
 import { stars, tokensList } from 'config/token'
+import { useGlobalSettings } from 'contexts/globalSettings'
 import React, { useEffect, useState } from 'react'
 import { resolveAddress } from 'utils/resolveAddress'
+import { useWallet } from 'utils/wallet'
 
-import { useWallet } from '../../../contexts/wallet'
 import { NumberInput, TextInput } from '../../forms/FormInput'
 import type { UploadMethod } from './UploadDetails'
 
@@ -20,9 +22,11 @@ interface MintingDetailsProps {
   uploadMethod: UploadMethod
   minimumMintPrice: number
   mintingTokenFromFactory?: TokenInfo
+  importedMintingDetails?: MintingDetailsDataProps
+  isPresale: boolean
+  whitelistStartDate?: string
 }
 
-export type TokenType = 'fungible' | 'non-fungible'
 export interface MintingDetailsDataProps {
   numTokens: number
   unitPrice: string
@@ -30,7 +34,6 @@ export interface MintingDetailsDataProps {
   startTime: string
   paymentAddress?: string
   selectedMintToken?: TokenInfo
-  selectesTokenType?: TokenType
 }
 
 export const MintingDetails = ({
@@ -39,9 +42,12 @@ export const MintingDetails = ({
   uploadMethod,
   minimumMintPrice,
   mintingTokenFromFactory,
+  importedMintingDetails,
+  isPresale,
+  whitelistStartDate,
 }: MintingDetailsProps) => {
   const wallet = useWallet()
-
+  const { timezone } = useGlobalSettings()
   const [timestamp, setTimestamp] = useState<Date | undefined>()
   const [selectedMintToken, setSelectedMintToken] = useState<TokenInfo | undefined>(stars)
 
@@ -103,6 +109,7 @@ export const MintingDetails = ({
       paymentAddress: paymentAddressState.value.trim(),
       selectedMintToken,
     }
+    console.log('Timestamp:', timestamp?.getTime())
     onChange(data)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
@@ -115,6 +122,24 @@ export const MintingDetails = ({
     selectedMintToken,
   ])
 
+  useEffect(() => {
+    if (importedMintingDetails) {
+      numberOfTokensState.onChange(importedMintingDetails.numTokens)
+      unitPriceState.onChange(Number(importedMintingDetails.unitPrice) / 1_000_000)
+      perAddressLimitState.onChange(importedMintingDetails.perAddressLimit)
+      setTimestamp(new Date(Number(importedMintingDetails.startTime) / 1_000_000))
+      paymentAddressState.onChange(importedMintingDetails.paymentAddress ? importedMintingDetails.paymentAddress : '')
+      setSelectedMintToken(tokensList.find((token) => token.id === importedMintingDetails.selectedMintToken?.id))
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [importedMintingDetails])
+
+  useEffect(() => {
+    if (isPresale) {
+      setTimestamp(whitelistStartDate ? new Date(Number(whitelistStartDate) / 1_000_000) : undefined)
+    }
+  }, [whitelistStartDate, isPresale])
+
   return (
     <div>
       <FormGroup subtitle="Information about your minting settings" title="Minting Details">
@@ -124,14 +149,18 @@ export const MintingDetails = ({
           isRequired
           value={uploadMethod === 'new' ? numberOfTokens : numberOfTokensState.value}
         />
-        <div className="flex flex-row items-center">
+        <div className="flex flex-row items-end">
           <NumberInput {...unitPriceState} isRequired />
           <select
-            className="py-[9px] px-4 mt-14 ml-2 placeholder:text-white/50 bg-white/10 rounded border-2 border-white/20 focus:ring focus:ring-plumbus-20"
+            className="py-[9px] px-4 ml-2 placeholder:text-white/50 bg-white/10 rounded border-2 border-white/20 focus:ring focus:ring-plumbus-20"
             onChange={(e) => setSelectedMintToken(tokensList.find((t) => t.displayName === e.target.value))}
+            value={selectedMintToken?.displayName}
           >
             {vendingMinterList
-              .filter((minter) => minter.factoryAddress !== undefined && minter.updatable === false)
+              .filter(
+                (minter) =>
+                  minter.factoryAddress !== undefined && minter.updatable === false && minter.featured === false,
+              )
               .map((minter) => (
                 <option key={minter.id} className="bg-black" value={minter.supportedToken.displayName}>
                   {minter.supportedToken.displayName}
@@ -141,8 +170,34 @@ export const MintingDetails = ({
         </div>
 
         <NumberInput {...perAddressLimitState} isRequired />
-        <FormControl htmlId="timestamp" isRequired subtitle="Minting start time (local)" title="Start Time">
-          <InputDateTime minDate={new Date()} onChange={(date) => setTimestamp(date)} value={timestamp} />
+        <FormControl
+          htmlId="timestamp"
+          isRequired
+          subtitle={`Minting start time ${isPresale ? '(is dictated by whitelist start time)' : ''} ${
+            timezone === 'Local' ? '(local)' : '(UTC)'
+          }`}
+          title="Start Time"
+        >
+          <InputDateTime
+            disabled={isPresale}
+            minDate={
+              timezone === 'Local' ? new Date() : new Date(Date.now() + new Date().getTimezoneOffset() * 60 * 1000)
+            }
+            onChange={(date) =>
+              date
+                ? setTimestamp(
+                    timezone === 'Local' ? date : new Date(date.getTime() - new Date().getTimezoneOffset() * 60 * 1000),
+                  )
+                : setTimestamp(undefined)
+            }
+            value={
+              timezone === 'Local'
+                ? timestamp
+                : timestamp
+                ? new Date(timestamp.getTime() + new Date().getTimezoneOffset() * 60 * 1000)
+                : undefined
+            }
+          />
         </FormControl>
       </FormGroup>
       <TextInput className="p-4 mt-5" {...paymentAddressState} />

components/collections/creation/RoyaltyDetails.tsx

@@ -1,14 +1,15 @@
 import { Conditional } from 'components/Conditional'
 import { FormGroup } from 'components/FormGroup'
 import { useInputState } from 'components/forms/FormInput.hooks'
-import { useWallet } from 'contexts/wallet'
 import React, { useEffect, useState } from 'react'
+import { useWallet } from 'utils/wallet'
 
 import { resolveAddress } from '../../../utils/resolveAddress'
 import { NumberInput, TextInput } from '../../forms/FormInput'
 
 interface RoyaltyDetailsProps {
   onChange: (data: RoyaltyDetailsDataProps) => void
+  importedRoyaltyDetails?: RoyaltyDetailsDataProps
 }
 
 export interface RoyaltyDetailsDataProps {
@@ -19,7 +20,7 @@ export interface RoyaltyDetailsDataProps {
 
 type RoyaltyState = 'none' | 'new'
 
-export const RoyaltyDetails = ({ onChange }: RoyaltyDetailsProps) => {
+export const RoyaltyDetails = ({ onChange, importedRoyaltyDetails }: RoyaltyDetailsProps) => {
   const wallet = useWallet()
   const [royaltyState, setRoyaltyState] = useState<RoyaltyState>('none')
 
@@ -60,6 +61,15 @@ export const RoyaltyDetails = ({ onChange }: RoyaltyDetailsProps) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [royaltyState, royaltyPaymentAddressState.value, royaltyShareState.value])
 
+  useEffect(() => {
+    if (importedRoyaltyDetails) {
+      setRoyaltyState(importedRoyaltyDetails.royaltyType)
+      royaltyPaymentAddressState.onChange(importedRoyaltyDetails.paymentAddress)
+      royaltyShareState.onChange(importedRoyaltyDetails.share.toString())
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [importedRoyaltyDetails])
+
   return (
     <div className="py-3 px-8 rounded border-2 border-white/20">
       <div className="flex justify-center">

components/collections/creation/UploadDetails.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable eslint-comments/disable-enable-pair */
+/* eslint-disable array-callback-return */
 /* eslint-disable no-nested-ternary */
 /* eslint-disable no-misleading-character-class */
 /* eslint-disable no-control-regex */
@@ -19,6 +20,8 @@ import type { ChangeEvent } from 'react'
 import { useEffect, useRef, useState } from 'react'
 import { toast } from 'react-hot-toast'
 import type { UploadServiceType } from 'services/upload'
+import type { AssetType } from 'utils/getAssetType'
+import { getAssetType } from 'utils/getAssetType'
 import { uid } from 'utils/random'
 import { naturalCompare } from 'utils/sort'
 
@@ -31,11 +34,14 @@ interface UploadDetailsProps {
   onChange: (value: UploadDetailsDataProps) => void
   minterType: MinterType
   baseMinterAcquisitionMethod?: BaseMinterAcquisitionMethod
+  importedUploadDetails?: UploadDetailsDataProps
 }
 
 export interface UploadDetailsDataProps {
   assetFiles: File[]
   metadataFiles: File[]
+  thumbnailFiles?: File[]
+  thumbnailCompatibleAssetFileNames?: string[]
   uploadService: UploadServiceType
   nftStorageApiKey?: string
   pinataApiKey?: string
@@ -46,9 +52,16 @@ export interface UploadDetailsDataProps {
   baseMinterMetadataFile?: File
 }
 
-export const UploadDetails = ({ onChange, minterType, baseMinterAcquisitionMethod }: UploadDetailsProps) => {
+export const UploadDetails = ({
+  onChange,
+  minterType,
+  baseMinterAcquisitionMethod,
+  importedUploadDetails,
+}: UploadDetailsProps) => {
   const [assetFilesArray, setAssetFilesArray] = useState<File[]>([])
   const [metadataFilesArray, setMetadataFilesArray] = useState<File[]>([])
+  const [thumbnailCompatibleAssetFileNames, setThumbnailCompatibleAssetFileNames] = useState<string[]>([])
+  const [thumbnailFilesArray, setThumbnailFilesArray] = useState<File[]>([])
   const [uploadMethod, setUploadMethod] = useState<UploadMethod>('new')
   const [uploadService, setUploadService] = useState<UploadServiceType>('nft-storage')
   const [metadataFileArrayIndex, setMetadataFileArrayIndex] = useState(0)
@@ -58,6 +71,7 @@ export const UploadDetails = ({ onChange, minterType, baseMinterAcquisitionMetho
 
   const assetFilesRef = useRef<HTMLInputElement | null>(null)
   const metadataFilesRef = useRef<HTMLInputElement | null>(null)
+  const thumbnailFilesRef = useRef<HTMLInputElement | null>(null)
 
   const nftStorageApiKeyState = useInputState({
     id: 'nft-storage-api-key',
@@ -100,15 +114,27 @@ export const UploadDetails = ({ onChange, minterType, baseMinterAcquisitionMetho
   const selectAssets = (event: ChangeEvent<HTMLInputElement>) => {
     setAssetFilesArray([])
     setMetadataFilesArray([])
+    setThumbnailFilesArray([])
+    setThumbnailCompatibleAssetFileNames([])
     if (event.target.files === null) return
-    if (minterType === 'vending' || (minterType === 'base' && event.target.files.length > 1)) {
+    const thumbnailCompatibleAssetTypes: AssetType[] = ['video', 'audio', 'html', 'document']
+    const thumbnailCompatibleFileNamesList: string[] = []
+    if (minterType === 'vending') {
       //sort the files
       const sortedFiles = Array.from(event.target.files).sort((a, b) => naturalCompare(a.name, b.name))
       //check if the sorted file names are in numerical order
       const sortedFileNames = sortedFiles.map((file) => file.name.split('.')[0])
+      sortedFiles.map((file) => {
+        if (thumbnailCompatibleAssetTypes.includes(getAssetType(file.name))) {
+          thumbnailCompatibleFileNamesList.push(file.name.split('.')[0])
+        }
+      })
+      setThumbnailCompatibleAssetFileNames(thumbnailCompatibleFileNamesList)
+      console.log('Thumbnail Compatible Files: ', thumbnailCompatibleFileNamesList)
       for (let i = 0; i < sortedFileNames.length; i++) {
         if (isNaN(Number(sortedFileNames[i])) || parseInt(sortedFileNames[i]) !== i + 1) {
           toast.error('The file names should be in numerical order starting from 1.')
+          setThumbnailCompatibleAssetFileNames([])
           addLogItem({
             id: uid(),
             message: 'The file names should be in numerical order starting from 1.',
@@ -120,7 +146,46 @@ export const UploadDetails = ({ onChange, minterType, baseMinterAcquisitionMetho
           return
         }
       }
+    } else if (minterType === 'base' && event.target.files.length > 1) {
+      //sort the files
+      const sortedFiles = Array.from(event.target.files).sort((a, b) => naturalCompare(a.name, b.name))
+      //check if the sorted file names are in numerical order
+      const sortedFileNames = sortedFiles.map((file) => file.name.split('.')[0])
+      sortedFiles.map((file) => {
+        if (thumbnailCompatibleAssetTypes.includes(getAssetType(file.name))) {
+          thumbnailCompatibleFileNamesList.push(file.name.split('.')[0])
+        }
+      })
+      setThumbnailCompatibleAssetFileNames(thumbnailCompatibleFileNamesList)
+      console.log('Thumbnail Compatible Files: ', thumbnailCompatibleFileNamesList)
+
+      for (let i = 0; i < sortedFileNames.length - 1; i++) {
+        if (
+          isNaN(Number(sortedFileNames[i])) ||
+          isNaN(Number(sortedFileNames[i + 1])) ||
+          parseInt(sortedFileNames[i]) !== parseInt(sortedFileNames[i + 1]) - 1
+        ) {
+          toast.error('The file names should be in numerical order.')
+          setThumbnailCompatibleAssetFileNames([])
+          addLogItem({
+            id: uid(),
+            message: 'The file names should be in numerical order.',
+            type: 'Error',
+            timestamp: new Date(),
+          })
+          //clear the input
+          event.target.value = ''
+          return
+        }
+      }
+    } else if (minterType === 'base' && event.target.files.length === 1) {
+      if (thumbnailCompatibleAssetTypes.includes(getAssetType(event.target.files[0].name))) {
+        thumbnailCompatibleFileNamesList.push(event.target.files[0].name.split('.')[0])
+      }
+      setThumbnailCompatibleAssetFileNames(thumbnailCompatibleFileNamesList)
+      console.log('Thumbnail Compatible Files: ', thumbnailCompatibleFileNamesList)
     }
+
     let loadedFileCount = 0
     const files: File[] = []
     let reader: FileReader
@@ -129,7 +194,9 @@ export const UploadDetails = ({ onChange, minterType, baseMinterAcquisitionMetho
       reader.onload = (e) => {
         if (!e.target?.result) return toast.error('Error parsing file.')
         if (!event.target.files) return toast.error('No files selected.')
-        const assetFile = new File([e.target.result], event.target.files[i].name, { type: 'image/jpg' })
+        const assetFile = new File([e.target.result], event.target.files[i].name.replaceAll('#', ''), {
+          type: 'image/jpg',
+        })
         files.push(assetFile)
       }
       reader.readAsArrayBuffer(event.target.files[i])
@@ -153,7 +220,23 @@ export const UploadDetails = ({ onChange, minterType, baseMinterAcquisitionMetho
       event.target.value = ''
       return toast.error('The number of metadata files should be equal to the number of asset files.')
     }
-    if (minterType === 'vending' || (minterType === 'base' && assetFilesArray.length > 1)) {
+    // compare the first file name for asset and metadata files
+    if (
+      minterType === 'base' &&
+      assetFilesArray.length > 1 &&
+      event.target.files[0].name.split('.')[0] !== assetFilesArray[0].name.split('.')[0]
+    ) {
+      event.target.value = ''
+      toast.error('The metadata file names should match the asset file names.')
+      addLogItem({
+        id: uid(),
+        message: 'The metadata file names should match the asset file names.',
+        type: 'Error',
+        timestamp: new Date(),
+      })
+      return
+    }
+    if (minterType === 'vending') {
       //sort the files
       const sortedFiles = Array.from(event.target.files).sort((a, b) => naturalCompare(a.name, b.name))
       //check if the sorted file names are in numerical order
@@ -171,6 +254,28 @@ export const UploadDetails = ({ onChange, minterType, baseMinterAcquisitionMetho
           return
         }
       }
+    } else if (minterType === 'base' && assetFilesArray.length > 1) {
+      //sort the files
+      const sortedFiles = Array.from(event.target.files).sort((a, b) => naturalCompare(a.name, b.name))
+      //check if the sorted file names are in numerical order
+      const sortedFileNames = sortedFiles.map((file) => file.name.split('.')[0])
+      for (let i = 0; i < sortedFileNames.length - 1; i++) {
+        if (
+          isNaN(Number(sortedFileNames[i])) ||
+          isNaN(Number(sortedFileNames[i + 1])) ||
+          parseInt(sortedFileNames[i]) !== parseInt(sortedFileNames[i + 1]) - 1
+        ) {
+          toast.error('The file names should be in numerical order.')
+          addLogItem({
+            id: uid(),
+            message: 'The file names should be in numerical order.',
+            type: 'Error',
+            timestamp: new Date(),
+          })
+          event.target.value = ''
+          return
+        }
+      }
     }
     let loadedFileCount = 0
     const files: File[] = []
@@ -180,7 +285,9 @@ export const UploadDetails = ({ onChange, minterType, baseMinterAcquisitionMetho
       reader.onload = async (e) => {
         if (!e.target?.result) return toast.error('Error parsing file.')
         if (!event.target.files) return toast.error('No files selected.')
-        const metadataFile = new File([e.target.result], event.target.files[i].name, { type: 'application/json' })
+        const metadataFile = new File([e.target.result], event.target.files[i].name.replaceAll('#', ''), {
+          type: 'application/json',
+        })
         files.push(metadataFile)
         try {
           const parsedMetadata = JSON.parse(await metadataFile.text())
@@ -224,11 +331,61 @@ export const UploadDetails = ({ onChange, minterType, baseMinterAcquisitionMetho
   const regex =
     /[\0-\x1F\x7F-\x9F\xAD\u0378\u0379\u037F-\u0383\u038B\u038D\u03A2\u0528-\u0530\u0557\u0558\u0560\u0588\u058B-\u058E\u0590\u05C8-\u05CF\u05EB-\u05EF\u05F5-\u0605\u061C\u061D\u06DD\u070E\u070F\u074B\u074C\u07B2-\u07BF\u07FB-\u07FF\u082E\u082F\u083F\u085C\u085D\u085F-\u089F\u08A1\u08AD-\u08E3\u08FF\u0978\u0980\u0984\u098D\u098E\u0991\u0992\u09A9\u09B1\u09B3-\u09B5\u09BA\u09BB\u09C5\u09C6\u09C9\u09CA\u09CF-\u09D6\u09D8-\u09DB\u09DE\u09E4\u09E5\u09FC-\u0A00\u0A04\u0A0B-\u0A0E\u0A11\u0A12\u0A29\u0A31\u0A34\u0A37\u0A3A\u0A3B\u0A3D\u0A43-\u0A46\u0A49\u0A4A\u0A4E-\u0A50\u0A52-\u0A58\u0A5D\u0A5F-\u0A65\u0A76-\u0A80\u0A84\u0A8E\u0A92\u0AA9\u0AB1\u0AB4\u0ABA\u0ABB\u0AC6\u0ACA\u0ACE\u0ACF\u0AD1-\u0ADF\u0AE4\u0AE5\u0AF2-\u0B00\u0B04\u0B0D\u0B0E\u0B11\u0B12\u0B29\u0B31\u0B34\u0B3A\u0B3B\u0B45\u0B46\u0B49\u0B4A\u0B4E-\u0B55\u0B58-\u0B5B\u0B5E\u0B64\u0B65\u0B78-\u0B81\u0B84\u0B8B-\u0B8D\u0B91\u0B96-\u0B98\u0B9B\u0B9D\u0BA0-\u0BA2\u0BA5-\u0BA7\u0BAB-\u0BAD\u0BBA-\u0BBD\u0BC3-\u0BC5\u0BC9\u0BCE\u0BCF\u0BD1-\u0BD6\u0BD8-\u0BE5\u0BFB-\u0C00\u0C04\u0C0D\u0C11\u0C29\u0C34\u0C3A-\u0C3C\u0C45\u0C49\u0C4E-\u0C54\u0C57\u0C5A-\u0C5F\u0C64\u0C65\u0C70-\u0C77\u0C80\u0C81\u0C84\u0C8D\u0C91\u0CA9\u0CB4\u0CBA\u0CBB\u0CC5\u0CC9\u0CCE-\u0CD4\u0CD7-\u0CDD\u0CDF\u0CE4\u0CE5\u0CF0\u0CF3-\u0D01\u0D04\u0D0D\u0D11\u0D3B\u0D3C\u0D45\u0D49\u0D4F-\u0D56\u0D58-\u0D5F\u0D64\u0D65\u0D76-\u0D78\u0D80\u0D81\u0D84\u0D97-\u0D99\u0DB2\u0DBC\u0DBE\u0DBF\u0DC7-\u0DC9\u0DCB-\u0DCE\u0DD5\u0DD7\u0DE0-\u0DF1\u0DF5-\u0E00\u0E3B-\u0E3E\u0E5C-\u0E80\u0E83\u0E85\u0E86\u0E89\u0E8B\u0E8C\u0E8E-\u0E93\u0E98\u0EA0\u0EA4\u0EA6\u0EA8\u0EA9\u0EAC\u0EBA\u0EBE\u0EBF\u0EC5\u0EC7\u0ECE\u0ECF\u0EDA\u0EDB\u0EE0-\u0EFF\u0F48\u0F6D-\u0F70\u0F98\u0FBD\u0FCD\u0FDB-\u0FFF\u10C6\u10C8-\u10CC\u10CE\u10CF\u1249\u124E\u124F\u1257\u1259\u125E\u125F\u1289\u128E\u128F\u12B1\u12B6\u12B7\u12BF\u12C1\u12C6\u12C7\u12D7\u1311\u1316\u1317\u135B\u135C\u137D-\u137F\u139A-\u139F\u13F5-\u13FF\u169D-\u169F\u16F1-\u16FF\u170D\u1715-\u171F\u1737-\u173F\u1754-\u175F\u176D\u1771\u1774-\u177F\u17DE\u17DF\u17EA-\u17EF\u17FA-\u17FF\u180F\u181A-\u181F\u1878-\u187F\u18AB-\u18AF\u18F6-\u18FF\u191D-\u191F\u192C-\u192F\u193C-\u193F\u1941-\u1943\u196E\u196F\u1975-\u197F\u19AC-\u19AF\u19CA-\u19CF\u19DB-\u19DD\u1A1C\u1A1D\u1A5F\u1A7D\u1A7E\u1A8A-\u1A8F\u1A9A-\u1A9F\u1AAE-\u1AFF\u1B4C-\u1B4F\u1B7D-\u1B7F\u1BF4-\u1BFB\u1C38-\u1C3A\u1C4A-\u1C4C\u1C80-\u1CBF\u1CC8-\u1CCF\u1CF7-\u1CFF\u1DE7-\u1DFB\u1F16\u1F17\u1F1E\u1F1F\u1F46\u1F47\u1F4E\u1F4F\u1F58\u1F5A\u1F5C\u1F5E\u1F7E\u1F7F\u1FB5\u1FC5\u1FD4\u1FD5\u1FDC\u1FF0\u1FF1\u1FF5\u1FFF\u200B-\u200F\u2020-\u202E\u2060-\u206F\u2072\u2073\u208F\u209D-\u209F\u20BB-\u20CF\u20F1-\u20FF\u218A-\u218F\u23F4-\u23FF\u2427-\u243F\u244B-\u245F\u2700\u2B4D-\u2B4F\u2B5A-\u2BFF\u2C2F\u2C5F\u2CF4-\u2CF8\u2D26\u2D28-\u2D2C\u2D2E\u2D2F\u2D68-\u2D6E\u2D71-\u2D7E\u2D97-\u2D9F\u2DA7\u2DAF\u2DB7\u2DBF\u2DC7\u2DCF\u2DD7\u2DDF\u2E3C-\u2E7F\u2E9A\u2EF4-\u2EFF\u2FD6-\u2FEF\u2FFC-\u2FFF\u3040\u3097\u3098\u3100-\u3104\u312E-\u3130\u318F\u31BB-\u31BF\u31E4-\u31EF\u321F\u32FF\u4DB6-\u4DBF\u9FCD-\u9FFF\uA48D-\uA48F\uA4C7-\uA4CF\uA62C-\uA63F\uA698-\uA69E\uA6F8-\uA6FF\uA78F\uA794-\uA79F\uA7AB-\uA7F7\uA82C-\uA82F\uA83A-\uA83F\uA878-\uA87F\uA8C5-\uA8CD\uA8DA-\uA8DF\uA8FC-\uA8FF\uA954-\uA95E\uA97D-\uA97F\uA9CE\uA9DA-\uA9DD\uA9E0-\uA9FF\uAA37-\uAA3F\uAA4E\uAA4F\uAA5A\uAA5B\uAA7C-\uAA7F\uAAC3-\uAADA\uAAF7-\uAB00\uAB07\uAB08\uAB0F\uAB10\uAB17-\uAB1F\uAB27\uAB2F-\uABBF\uABEE\uABEF\uABFA-\uABFF\uD7A4-\uD7AF\uD7C7-\uD7CA\uD7FC-\uF8FF\uFA6E\uFA6F\uFADA-\uFAFF\uFB07-\uFB12\uFB18-\uFB1C\uFB37\uFB3D\uFB3F\uFB42\uFB45\uFBC2-\uFBD2\uFD40-\uFD4F\uFD90\uFD91\uFDC8-\uFDEF\uFDFE\uFDFF\uFE1A-\uFE1F\uFE27-\uFE2F\uFE53\uFE67\uFE6C-\uFE6F\uFE75\uFEFD-\uFF00\uFFBF-\uFFC1\uFFC8\uFFC9\uFFD0\uFFD1\uFFD8\uFFD9\uFFDD-\uFFDF\uFFE7\uFFEF-\uFFFB\uFFFE\uFFFF]/g
 
+  const selectThumbnails = (event: ChangeEvent<HTMLInputElement>) => {
+    setThumbnailFilesArray([])
+    if (event.target.files === null) return
+
+    // if (minterType === 'vending' || (minterType === 'base' && thumbnailCompatibleAssetFileNames.length > 1)) {
+    const sortedFiles = Array.from(event.target.files).sort((a, b) => naturalCompare(a.name, b.name))
+    const sortedFileNames = sortedFiles.map((file) => file.name.split('.')[0])
+    // make sure the sorted file names match thumbnail compatible asset file names
+    for (let i = 0; i < thumbnailCompatibleAssetFileNames.length; i++) {
+      if (minterType === 'base' && assetFilesArray.length === 1) break
+      if (sortedFileNames[i] !== thumbnailCompatibleAssetFileNames[i]) {
+        toast.error('The thumbnail file names should match the thumbnail compatible asset file names.')
+        addLogItem({
+          id: uid(),
+          message: 'The thumbnail file names should match the thumbnail compatible asset file names.',
+          type: 'Error',
+          timestamp: new Date(),
+        })
+        //clear the input
+        event.target.value = ''
+        return
+      }
+    }
+    // }
+    let loadedFileCount = 0
+    const files: File[] = []
+    let reader: FileReader
+    for (let i = 0; i < event.target.files.length; i++) {
+      reader = new FileReader()
+      reader.onload = (e) => {
+        if (!e.target?.result) return toast.error('Error parsing file.')
+        if (!event.target.files) return toast.error('No files selected.')
+        const thumbnailFile = new File([e.target.result], event.target.files[i].name.replaceAll('#', ''), {
+          type: 'image/jpg',
+        })
+        files.push(thumbnailFile)
+      }
+      reader.readAsArrayBuffer(event.target.files[i])
+      reader.onloadend = () => {
+        if (!event.target.files) return toast.error('No file selected.')
+        loadedFileCount++
+        if (loadedFileCount === event.target.files.length) {
+          setThumbnailFilesArray(files.sort((a, b) => naturalCompare(a.name, b.name)))
+        }
+      }
+    }
+  }
+
   useEffect(() => {
     try {
       const data: UploadDetailsDataProps = {
         assetFiles: assetFilesArray,
         metadataFiles: metadataFilesArray,
+        thumbnailFiles: thumbnailFilesArray,
+        thumbnailCompatibleAssetFileNames,
         uploadService,
         nftStorageApiKey: nftStorageApiKeyState.value,
         pinataApiKey: pinataApiKeyState.value,
@@ -258,6 +415,8 @@ export const UploadDetails = ({ onChange, minterType, baseMinterAcquisitionMetho
   }, [
     assetFilesArray,
     metadataFilesArray,
+    thumbnailFilesArray,
+    thumbnailCompatibleAssetFileNames,
     uploadService,
     nftStorageApiKeyState.value,
     pinataApiKeyState.value,
@@ -274,10 +433,34 @@ export const UploadDetails = ({ onChange, minterType, baseMinterAcquisitionMetho
     setMetadataFilesArray([])
     if (assetFilesRef.current) assetFilesRef.current.value = ''
     setAssetFilesArray([])
-    baseTokenUriState.onChange('')
-    coverImageUrlState.onChange('')
+    if (thumbnailFilesRef.current) thumbnailFilesRef.current.value = ''
+    setThumbnailFilesArray([])
+    setThumbnailCompatibleAssetFileNames([])
+    if (!importedUploadDetails || minterType === 'base') {
+      baseTokenUriState.onChange('')
+      coverImageUrlState.onChange('')
+    }
   }, [uploadMethod, minterType, baseMinterAcquisitionMethod])
 
+  useEffect(() => {
+    if (importedUploadDetails) {
+      if (importedUploadDetails.uploadMethod === 'new') {
+        setUploadMethod('new')
+        setUploadService(importedUploadDetails.uploadService)
+        nftStorageApiKeyState.onChange(importedUploadDetails.nftStorageApiKey || '')
+        pinataApiKeyState.onChange(importedUploadDetails.pinataApiKey || '')
+        pinataSecretKeyState.onChange(importedUploadDetails.pinataSecretKey || '')
+        baseTokenUriState.onChange(importedUploadDetails.baseTokenURI || '')
+        coverImageUrlState.onChange(importedUploadDetails.imageUrl || '')
+      } else if (importedUploadDetails.uploadMethod === 'existing') {
+        setUploadMethod('existing')
+        baseTokenUriState.onChange(importedUploadDetails.baseTokenURI || '')
+        coverImageUrlState.onChange(importedUploadDetails.imageUrl || '')
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [importedUploadDetails])
+
   return (
     <div className="justify-items-start mb-3 rounded border-2 border-white/20 flex-column">
       <div className="flex justify-center">
@@ -472,7 +655,7 @@ export const UploadDetails = ({ onChange, minterType, baseMinterAcquisitionMetho
                       )}
                     >
                       <input
-                        accept="image/*, audio/*, video/*, .html"
+                        accept="image/*, audio/*, video/*, .html, .pdf"
                         className={clsx(
                           'file:py-2 file:px-4 file:mr-4 file:bg-plumbus-light file:rounded file:border-0 cursor-pointer',
                           'before:absolute before:inset-0 before:hover:bg-white/5 before:transition',
@@ -519,6 +702,38 @@ export const UploadDetails = ({ onChange, minterType, baseMinterAcquisitionMetho
                       </div>
                     </div>
                   )}
+
+                  {thumbnailCompatibleAssetFileNames.length > 0 && (
+                    <div>
+                      <label
+                        className="block mt-5 mr-1 mb-1 ml-8 w-full font-bold text-white dark:text-gray-300"
+                        htmlFor="thumbnailFiles"
+                      >
+                        {thumbnailCompatibleAssetFileNames.length > 1
+                          ? 'Thumbnail Selection for Compatible Assets (optional)'
+                          : 'Thumbnail Selection (optional)'}
+                      </label>
+                      <div
+                        className={clsx(
+                          'flex relative justify-center items-center mx-8 mt-2 space-y-4 w-full h-32',
+                          'rounded border-2 border-white/20 border-dashed',
+                        )}
+                      >
+                        <input
+                          accept="image/*"
+                          className={clsx(
+                            'file:py-2 file:px-4 file:mr-4 file:bg-plumbus-light file:rounded file:border-0 cursor-pointer',
+                            'before:absolute before:inset-0 before:hover:bg-white/5 before:transition',
+                          )}
+                          id="thumbnailFiles"
+                          multiple
+                          onChange={selectThumbnails}
+                          ref={thumbnailFilesRef}
+                          type="file"
+                        />
+                      </div>
+                    </div>
+                  )}
                   <Conditional test={assetFilesArray.length >= 1}>
                     <MetadataModal
                       assetFile={assetFilesArray[metadataFileArrayIndex]}

components/collections/creation/WhitelistDetails.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable eslint-comments/disable-enable-pair */
+/* eslint-disable @typescript-eslint/no-unnecessary-condition */
 /* eslint-disable no-nested-ternary */
 import { FormControl } from 'components/FormControl'
 import { FormGroup } from 'components/FormGroup'
@@ -9,8 +10,10 @@ import { InputDateTime } from 'components/InputDateTime'
 import type { WhitelistFlexMember } from 'components/WhitelistFlexUpload'
 import { WhitelistFlexUpload } from 'components/WhitelistFlexUpload'
 import type { TokenInfo } from 'config/token'
+import { useGlobalSettings } from 'contexts/globalSettings'
 import React, { useEffect, useState } from 'react'
 import { isValidAddress } from 'utils/isValidAddress'
+import { useWallet } from 'utils/wallet'
 
 import { Conditional } from '../../Conditional'
 import { AddressInput, NumberInput } from '../../forms/FormInput'
@@ -20,6 +23,7 @@ import { WhitelistUpload } from '../../WhitelistUpload'
 interface WhitelistDetailsProps {
   onChange: (data: WhitelistDetailsDataProps) => void
   mintingTokenFromFactory?: TokenInfo
+  importedWhitelistDetails?: WhitelistDetailsDataProps
 }
 
 export interface WhitelistDetailsDataProps {
@@ -40,7 +44,14 @@ type WhitelistState = 'none' | 'existing' | 'new'
 
 type WhitelistType = 'standard' | 'flex'
 
-export const WhitelistDetails = ({ onChange, mintingTokenFromFactory }: WhitelistDetailsProps) => {
+export const WhitelistDetails = ({
+  onChange,
+  mintingTokenFromFactory,
+  importedWhitelistDetails,
+}: WhitelistDetailsProps) => {
+  const wallet = useWallet()
+  const { timezone } = useGlobalSettings()
+
   const [whitelistState, setWhitelistState] = useState<WhitelistState>('none')
   const [whitelistType, setWhitelistType] = useState<WhitelistType>('standard')
   const [startDate, setStartDate] = useState<Date | undefined>(undefined)
@@ -93,8 +104,10 @@ export const WhitelistDetails = ({ onChange, mintingTokenFromFactory }: Whitelis
   }
 
   useEffect(() => {
-    setWhitelistStandardArray([])
-    setWhitelistFlexArray([])
+    if (!importedWhitelistDetails) {
+      setWhitelistStandardArray([])
+      setWhitelistFlexArray([])
+    }
   }, [whitelistType])
 
   useEffect(() => {
@@ -142,6 +155,63 @@ export const WhitelistDetails = ({ onChange, mintingTokenFromFactory }: Whitelis
     adminsMutable,
   ])
 
+  // make the necessary changes with respect to imported whitelist details
+  useEffect(() => {
+    if (importedWhitelistDetails) {
+      setWhitelistState(importedWhitelistDetails.whitelistState)
+      setWhitelistType(importedWhitelistDetails.whitelistType)
+      whitelistAddressState.onChange(
+        importedWhitelistDetails.contractAddress ? importedWhitelistDetails.contractAddress : '',
+      )
+      unitPriceState.onChange(
+        importedWhitelistDetails.unitPrice ? Number(importedWhitelistDetails.unitPrice) / 1000000 : 0,
+      )
+      memberLimitState.onChange(importedWhitelistDetails.memberLimit ? importedWhitelistDetails.memberLimit : 0)
+      perAddressLimitState.onChange(
+        importedWhitelistDetails.perAddressLimit ? importedWhitelistDetails.perAddressLimit : 0,
+      )
+      setStartDate(
+        importedWhitelistDetails.startTime
+          ? new Date(Number(importedWhitelistDetails.startTime) / 1_000_000)
+          : undefined,
+      )
+      setEndDate(
+        importedWhitelistDetails.endTime ? new Date(Number(importedWhitelistDetails.endTime) / 1_000_000) : undefined,
+      )
+      setAdminsMutable(importedWhitelistDetails.adminsMutable ? importedWhitelistDetails.adminsMutable : true)
+      importedWhitelistDetails.admins?.forEach((admin) => {
+        addressListState.reset()
+        addressListState.add({ address: admin })
+      })
+      if (importedWhitelistDetails.whitelistType === 'standard') {
+        setWhitelistStandardArray([])
+        importedWhitelistDetails.members?.forEach((member) => {
+          setWhitelistStandardArray((standardArray) => [...standardArray, member as string])
+        })
+      } else {
+        setWhitelistFlexArray([])
+        importedWhitelistDetails.members?.forEach((member) => {
+          setWhitelistFlexArray((flexArray) => [
+            ...flexArray,
+            {
+              address: (member as WhitelistFlexMember).address,
+              mint_count: (member as WhitelistFlexMember).mint_count,
+            },
+          ])
+        })
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [importedWhitelistDetails])
+
+  useEffect(() => {
+    if (whitelistState === 'new' && wallet.address) {
+      addressListState.reset()
+      addressListState.add({ address: wallet.address })
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [whitelistState, wallet.address])
+
   return (
     <div className="py-3 px-8 rounded border-2 border-white/20">
       <div className="flex justify-center">
@@ -262,17 +332,57 @@ export const WhitelistDetails = ({ onChange, mintingTokenFromFactory }: Whitelis
               htmlId="start-date"
               isRequired
               subtitle="Start time for minting tokens to whitelisted addresses"
-              title="Start Time"
+              title={`Whitelist Start Time ${timezone === 'Local' ? '(local)' : '(UTC)'}`}
             >
-              <InputDateTime minDate={new Date()} onChange={(date) => setStartDate(date)} value={startDate} />
+              <InputDateTime
+                minDate={
+                  timezone === 'Local' ? new Date() : new Date(Date.now() + new Date().getTimezoneOffset() * 60 * 1000)
+                }
+                onChange={(date) =>
+                  date
+                    ? setStartDate(
+                        timezone === 'Local'
+                          ? date
+                          : new Date(date.getTime() - new Date().getTimezoneOffset() * 60 * 1000),
+                      )
+                    : setStartDate(undefined)
+                }
+                value={
+                  timezone === 'Local'
+                    ? startDate
+                    : startDate
+                    ? new Date(startDate.getTime() + new Date().getTimezoneOffset() * 60 * 1000)
+                    : undefined
+                }
+              />
             </FormControl>
             <FormControl
               htmlId="end-date"
               isRequired
-              subtitle="End time for minting tokens to whitelisted addresses"
-              title="End Time"
+              subtitle="Whitelist End Time dictates when public sales will start"
+              title={`Whitelist End Time ${timezone === 'Local' ? '(local)' : '(UTC)'}`}
             >
-              <InputDateTime minDate={new Date()} onChange={(date) => setEndDate(date)} value={endDate} />
+              <InputDateTime
+                minDate={
+                  timezone === 'Local' ? new Date() : new Date(Date.now() + new Date().getTimezoneOffset() * 60 * 1000)
+                }
+                onChange={(date) =>
+                  date
+                    ? setEndDate(
+                        timezone === 'Local'
+                          ? date
+                          : new Date(date.getTime() - new Date().getTimezoneOffset() * 60 * 1000),
+                      )
+                    : setEndDate(undefined)
+                }
+                value={
+                  timezone === 'Local'
+                    ? endDate
+                    : endDate
+                    ? new Date(endDate.getTime() + new Date().getTimezoneOffset() * 60 * 1000)
+                    : undefined
+                }
+              />
             </FormControl>
           </FormGroup>
           <div>
@@ -290,7 +400,6 @@ export const WhitelistDetails = ({ onChange, mintingTokenFromFactory }: Whitelis
             <div className="my-4 ml-4">
               <AddressList
                 entries={addressListState.entries}
-                isRequired
                 onAdd={addressListState.add}
                 onChange={addressListState.update}
                 onRemove={addressListState.remove}

components/collections/queries/Queries.tsx

@@ -7,22 +7,25 @@ import { useInputState } from 'components/forms/FormInput.hooks'
 import { JsonPreview } from 'components/JsonPreview'
 import type { BaseMinterInstance } from 'contracts/baseMinter'
 import type { OpenEditionMinterInstance } from 'contracts/openEditionMinter'
+import type { RoyaltyRegistryInstance } from 'contracts/royaltyRegistry'
 import type { SG721Instance } from 'contracts/sg721'
 import type { VendingMinterInstance } from 'contracts/vendingMinter'
 import { toast } from 'react-hot-toast'
 import { useQuery } from 'react-query'
+import { useWallet } from 'utils/wallet'
 
-import { useWallet } from '../../../contexts/wallet'
 import { resolveAddress } from '../../../utils/resolveAddress'
 import type { MinterType } from '../actions/Combobox'
 
 interface CollectionQueriesProps {
   minterContractAddress: string
   sg721ContractAddress: string
+  royaltyRegistryContractAddress: string
   sg721Messages: SG721Instance | undefined
   vendingMinterMessages: VendingMinterInstance | undefined
   baseMinterMessages: BaseMinterInstance | undefined
   openEditionMinterMessages: OpenEditionMinterInstance | undefined
+  royaltyRegistryMessages: RoyaltyRegistryInstance | undefined
   minterType: MinterType
 }
 export const CollectionQueries = ({
@@ -33,6 +36,7 @@ export const CollectionQueries = ({
   openEditionMinterMessages,
   baseMinterMessages,
   minterType,
+  royaltyRegistryMessages,
 }: CollectionQueriesProps) => {
   const wallet = useWallet()
 
@@ -65,9 +69,11 @@ export const CollectionQueries = ({
       baseMinterMessages,
       vendingMinterMessages,
       openEditionMinterMessages,
+      royaltyRegistryMessages,
       type,
       tokenId,
       address,
+      sg721ContractAddress,
     ] as const,
     async ({ queryKey }) => {
       const [
@@ -75,9 +81,11 @@ export const CollectionQueries = ({
         _baseMinterMessages_,
         _vendingMinterMessages,
         _openEditionMinterMessages,
+        _royaltyRegistryMessages,
         _type,
         _tokenId,
         _address,
+        _sg721ContractAddress,
       ] = queryKey
       // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
       const res = await resolveAddress(_address, wallet).then(async (resolvedAddress) => {
@@ -88,8 +96,10 @@ export const CollectionQueries = ({
           baseMinterMessages: _baseMinterMessages_,
           openEditionMinterMessages: _openEditionMinterMessages,
           sg721Messages: _sg721Messages,
+          royaltyRegistryMessages: _royaltyRegistryMessages,
           address: resolvedAddress,
           type: _type,
+          sg721ContractAddress: _sg721ContractAddress,
         })
         return result
       })
@@ -102,7 +112,9 @@ export const CollectionQueries = ({
           toast.error(error.message, { style: { maxWidth: 'none' } })
         }
       },
-      enabled: Boolean(sg721ContractAddress && minterContractAddress && type),
+      enabled:
+        Boolean(type && type === 'infinity_swap_royalties' && sg721ContractAddress) ||
+        Boolean(sg721ContractAddress && minterContractAddress && type),
       retry: false,
     },
   )

components/collections/queries/query.ts

@@ -1,7 +1,9 @@
 import type { BaseMinterInstance } from 'contracts/baseMinter'
 import type { OpenEditionMinterInstance } from 'contracts/openEditionMinter/contract'
+import type { RoyaltyRegistryInstance } from 'contracts/royaltyRegistry'
 import type { SG721Instance } from 'contracts/sg721'
 import type { VendingMinterInstance } from 'contracts/vendingMinter'
+import { INFINITY_SWAP_PROTOCOL_ADDRESS } from 'utils/constants'
 
 export type QueryType = typeof QUERY_TYPES[number]
 
@@ -13,6 +15,7 @@ export const QUERY_TYPES = [
   'total_mint_count',
   'tokens',
   // 'token_owners',
+  'infinity_swap_royalties',
   'token_info',
   'config',
   'status',
@@ -35,6 +38,11 @@ export const VENDING_QUERY_LIST: QueryListItem[] = [
     name: 'Mint Price',
     description: `Get the price of minting a token.`,
   },
+  {
+    id: 'infinity_swap_royalties',
+    name: 'Infinity Swap Royalty Details',
+    description: `Get the collection's royalty details for Infinity Swap`,
+  },
   {
     id: 'num_tokens',
     name: 'Mintable Number of Tokens',
@@ -77,6 +85,11 @@ export const BASE_QUERY_LIST: QueryListItem[] = [
     name: 'Tokens Minted to User',
     description: `Get the number of tokens minted in the collection to a user.`,
   },
+  {
+    id: 'infinity_swap_royalties',
+    name: 'Infinity Swap Royalty Details',
+    description: `Get the collection's royalty details for Infinity Swap`,
+  },
   {
     id: 'token_info',
     name: 'Token Info',
@@ -104,6 +117,11 @@ export const OPEN_EDITION_QUERY_LIST: QueryListItem[] = [
     name: 'Mint Price',
     description: `Get the price of minting a token.`,
   },
+  {
+    id: 'infinity_swap_royalties',
+    name: 'Infinity Swap Royalty Details',
+    description: `Get the collection's royalty details for Infinity Swap`,
+  },
   {
     id: 'tokens_minted_to_user',
     name: 'Tokens Minted to User',
@@ -148,6 +166,8 @@ export type DispatchQueryArgs = {
   vendingMinterMessages?: VendingMinterInstance
   openEditionMinterMessages?: OpenEditionMinterInstance
   sg721Messages?: SG721Instance
+  royaltyRegistryMessages?: RoyaltyRegistryInstance
+  sg721ContractAddress?: string
 } & (
   | { type: undefined }
   | { type: Select<'collection_info'> }
@@ -156,6 +176,7 @@ export type DispatchQueryArgs = {
   | { type: Select<'tokens_minted_to_user'>; address: string }
   | { type: Select<'total_mint_count'> }
   | { type: Select<'tokens'>; address: string }
+  | { type: Select<'infinity_swap_royalties'> }
   // | { type: Select<'token_owners'> }
   | { type: Select<'token_info'>; tokenId: string }
   | { type: Select<'config'> }
@@ -163,7 +184,13 @@ export type DispatchQueryArgs = {
 )
 
 export const dispatchQuery = async (args: DispatchQueryArgs) => {
-  const { baseMinterMessages, vendingMinterMessages, openEditionMinterMessages, sg721Messages } = args
+  const {
+    baseMinterMessages,
+    vendingMinterMessages,
+    openEditionMinterMessages,
+    sg721Messages,
+    royaltyRegistryMessages,
+  } = args
   if (!baseMinterMessages || !vendingMinterMessages || !openEditionMinterMessages || !sg721Messages) {
     throw new Error('Cannot execute actions')
   }
@@ -189,6 +216,12 @@ export const dispatchQuery = async (args: DispatchQueryArgs) => {
     // case 'token_owners': {
     //   return vendingMinterMessages.updateStartTime(txSigner, args.startTime)
     // }
+    case 'infinity_swap_royalties': {
+      return royaltyRegistryMessages?.collectionRoyaltyProtocol(
+        args.sg721ContractAddress as string,
+        INFINITY_SWAP_PROTOCOL_ADDRESS,
+      )
+    }
     case 'token_info': {
       if (!args.tokenId) return
       return sg721Messages.allNftInfo(args.tokenId)

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>
+  )
+}

components/forms/AddressList.tsx

@@ -1,12 +1,12 @@
 import { toUtf8 } from '@cosmjs/encoding'
 import { FormControl } from 'components/FormControl'
 import { AddressInput } from 'components/forms/FormInput'
-import { useWallet } from 'contexts/wallet'
 import { useEffect, useId, useMemo } from 'react'
 import toast from 'react-hot-toast'
 import { FaMinus, FaPlus } from 'react-icons/fa'
 import { SG721_NAME_ADDRESS } from 'utils/constants'
 import { isValidAddress } from 'utils/isValidAddress'
+import { useWallet } from 'utils/wallet'
 
 import { useInputState } from './FormInput.hooks'
 
@@ -31,6 +31,7 @@ export function AddressList(props: AddressListProps) {
       {entries.map(([id], i) => (
         <Address
           key={`ib-${id}`}
+          defaultValue={entries[i][1]}
           id={id}
           isLast={i === entries.length - 1}
           onAdd={onAdd}
@@ -48,9 +49,10 @@ export interface AddressProps {
   onAdd: AddressListProps['onAdd']
   onChange: AddressListProps['onChange']
   onRemove: AddressListProps['onRemove']
+  defaultValue?: Address
 }
 
-export function Address({ id, isLast, onAdd, onChange, onRemove }: AddressProps) {
+export function Address({ id, isLast, onAdd, onChange, onRemove, defaultValue }: AddressProps) {
   const wallet = useWallet()
   const Icon = useMemo(() => (isLast ? FaPlus : FaMinus), [isLast])
 
@@ -60,11 +62,14 @@ export function Address({ id, isLast, onAdd, onChange, onRemove }: AddressProps)
     id: `ib-address-${htmlId}`,
     name: `ib-address-${htmlId}`,
     title: ``,
+    defaultValue: defaultValue?.address,
   })
 
   const resolveAddress = async (name: string) => {
-    if (!wallet.client) throw new Error('Wallet not connected')
-    await wallet.client
+    if (!wallet.isWalletConnected) throw new Error('Wallet not connected')
+    await (
+      await wallet.getCosmWasmClient()
+    )
       .queryContractRaw(
         SG721_NAME_ADDRESS,
         toUtf8(

components/forms/DenomUnits.hooks.ts

@@ -0,0 +1,33 @@
+import { useMemo, useState } from 'react'
+import { uid } from 'utils/random'
+
+import type { DenomUnit } from './DenomUnits'
+
+export function useDenomUnitsState() {
+  const [record, setRecord] = useState<Record<string, DenomUnit>>(() => ({}))
+
+  const entries = useMemo(() => Object.entries(record), [record])
+  const values = useMemo(() => Object.values(record), [record])
+
+  function add(attribute: DenomUnit = { denom: '', exponent: 0, aliases: '' }) {
+    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/DenomUnits.tsx

@@ -0,0 +1,106 @@
+import { FormControl } from 'components/FormControl'
+import { NumberInput, TextInput } from 'components/forms/FormInput'
+import { useEffect, useId, useMemo } from 'react'
+import { FaMinus, FaPlus } from 'react-icons/fa'
+import { useWallet } from 'utils/wallet'
+
+import { useInputState, useNumberInputState } from './FormInput.hooks'
+
+export interface DenomUnit {
+  denom: string
+  exponent: number
+  aliases: string
+}
+
+export interface DenomUnitsProps {
+  title: string
+  subtitle?: string
+  isRequired?: boolean
+  attributes: [string, DenomUnit][]
+  onAdd: () => void
+  onChange: (key: string, attribute: DenomUnit) => void
+  onRemove: (key: string) => void
+}
+
+export function DenomUnits(props: DenomUnitsProps) {
+  const { title, subtitle, isRequired, attributes, onAdd, onChange, onRemove } = props
+
+  return (
+    <FormControl isRequired={isRequired} subtitle={subtitle} title={title}>
+      {attributes.map(([id], i) => (
+        <DenomUnit
+          key={`ma-${id}`}
+          defaultAttribute={attributes[i][1]}
+          id={id}
+          isLast={i === attributes.length - 1}
+          onAdd={onAdd}
+          onChange={onChange}
+          onRemove={onRemove}
+        />
+      ))}
+    </FormControl>
+  )
+}
+
+export interface DenomUnitProps {
+  id: string
+  isLast: boolean
+  onAdd: DenomUnitsProps['onAdd']
+  onChange: DenomUnitsProps['onChange']
+  onRemove: DenomUnitsProps['onRemove']
+  defaultAttribute: DenomUnit
+}
+
+export function DenomUnit({ id, isLast, onAdd, onChange, onRemove, defaultAttribute }: DenomUnitProps) {
+  const wallet = useWallet()
+  const Icon = useMemo(() => (isLast ? FaPlus : FaMinus), [isLast])
+
+  const htmlId = useId()
+
+  const denomState = useInputState({
+    id: `ma-denom-${htmlId}`,
+    name: `ma-denom-${htmlId}`,
+    title: `Denom`,
+    defaultValue: defaultAttribute.denom,
+  })
+
+  const exponentState = useNumberInputState({
+    id: `mint-exponent-${htmlId}`,
+    name: `mint-exponent-${htmlId}`,
+    title: `Exponent`,
+    defaultValue: defaultAttribute.exponent,
+  })
+
+  const aliasesState = useInputState({
+    id: `ma-aliases-${htmlId}`,
+    name: `ma-aliases-${htmlId}`,
+    title: `Aliases`,
+    defaultValue: defaultAttribute.aliases,
+    placeholder: 'Comma separated aliases',
+  })
+
+  useEffect(() => {
+    onChange(id, { denom: denomState.value, exponent: exponentState.value, aliases: aliasesState.value })
+  }, [id, denomState.value, exponentState.value, aliasesState.value])
+
+  return (
+    <div className="grid relative md:grid-cols-[40%_18%_35_7%] lg:grid-cols-[55%_13%_25%_7%] 2xl:grid-cols-[55%_13%_25%_7%] 2xl:space-x-2">
+      <TextInput {...denomState} />
+      <NumberInput className="ml-2" {...exponentState} />
+      <TextInput className="ml-2" {...aliasesState} />
+
+      <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>
+  )
+}

components/forms/FlexMemberAttributes.tsx

@@ -2,12 +2,12 @@ import { toUtf8 } from '@cosmjs/encoding'
 import { FormControl } from 'components/FormControl'
 import { AddressInput, NumberInput } from 'components/forms/FormInput'
 import type { WhitelistFlexMember } from 'components/WhitelistFlexUpload'
-import { useWallet } from 'contexts/wallet'
 import { useEffect, useId, useMemo } from 'react'
 import toast from 'react-hot-toast'
 import { FaMinus, FaPlus } from 'react-icons/fa'
 import { SG721_NAME_ADDRESS } from 'utils/constants'
 import { isValidAddress } from 'utils/isValidAddress'
+import { useWallet } from 'utils/wallet'
 
 import { useInputState, useNumberInputState } from './FormInput.hooks'
 
@@ -75,8 +75,10 @@ export function FlexMemberAttribute({ id, isLast, onAdd, onChange, onRemove, def
   }, [addressState.value, mintCountState.value, id])
 
   const resolveAddress = async (name: string) => {
-    if (!wallet.client) throw new Error('Wallet not connected')
-    await wallet.client
+    if (!wallet.isWalletConnected) throw new Error('Wallet not connected')
+    await (
+      await wallet.getCosmWasmClient()
+    )
       .queryContractRaw(
         SG721_NAME_ADDRESS,
         toUtf8(

components/openEdition/CollectionDetails.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable eslint-comments/disable-enable-pair */
+/* eslint-disable no-nested-ternary */
 /* eslint-disable jsx-a11y/media-has-caption */
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
@@ -11,6 +12,7 @@ import { FormGroup } from 'components/FormGroup'
 import { useInputState } from 'components/forms/FormInput.hooks'
 import { InputDateTime } from 'components/InputDateTime'
 import { Tooltip } from 'components/Tooltip'
+import { useGlobalSettings } from 'contexts/globalSettings'
 import { addLogItem } from 'contexts/log'
 import type { ChangeEvent } from 'react'
 import { useEffect, useMemo, useRef, useState } from 'react'
@@ -28,6 +30,7 @@ interface CollectionDetailsProps {
   uploadMethod: UploadMethod
   coverImageUrl: string
   metadataStorageMethod: MetadataStorageMethod
+  importedCollectionDetails?: CollectionDetailsDataProps
 }
 
 export interface CollectionDetailsDataProps {
@@ -46,11 +49,13 @@ export const CollectionDetails = ({
   uploadMethod,
   metadataStorageMethod,
   coverImageUrl,
+  importedCollectionDetails,
 }: CollectionDetailsProps) => {
   const [coverImage, setCoverImage] = useState<File | null>(null)
   const [timestamp, setTimestamp] = useState<Date | undefined>()
   const [explicit, setExplicit] = useState<boolean>(false)
   const [updatable, setUpdatable] = useState<boolean>(false)
+  const { timezone } = useGlobalSettings()
 
   const initialRender = useRef(true)
 
@@ -124,7 +129,9 @@ export const CollectionDetails = ({
     reader.onload = (e) => {
       if (!e.target?.result) return toast.error('Error parsing file.')
       if (!event.target.files) return toast.error('No files selected.')
-      const imageFile = new File([e.target.result], event.target.files[0].name, { type: 'image/jpg' })
+      const imageFile = new File([e.target.result], event.target.files[0].name.replaceAll('#', ''), {
+        type: 'image/jpg',
+      })
       setCoverImage(imageFile)
     }
     reader.readAsArrayBuffer(event.target.files[0])
@@ -152,6 +159,23 @@ export const CollectionDetails = ({
     }
   }, [updatable])
 
+  useEffect(() => {
+    if (importedCollectionDetails) {
+      nameState.onChange(importedCollectionDetails.name)
+      descriptionState.onChange(importedCollectionDetails.description)
+      symbolState.onChange(importedCollectionDetails.symbol)
+      //setCoverImage(importedCollectionDetails.imageFile[0] || null)
+      externalLinkState.onChange(importedCollectionDetails.externalLink || '')
+      setTimestamp(
+        importedCollectionDetails.startTradingTime
+          ? new Date(parseInt(importedCollectionDetails.startTradingTime) / 1_000_000)
+          : undefined,
+      )
+      setExplicit(importedCollectionDetails.explicit)
+      setUpdatable(importedCollectionDetails.updatable)
+    }
+  }, [importedCollectionDetails])
+
   const videoPreview = useMemo(() => {
     if (uploadMethod === 'new' && coverImage) {
       return (
@@ -204,10 +228,30 @@ export const CollectionDetails = ({
             <FormControl
               className={clsx('mt-2')}
               htmlId="timestamp"
-              subtitle="Trading start time offset will be set as 2 weeks by default."
-              title="Trading Start Time (optional)"
+              subtitle="Trading start time offset will be set as 1 week by default."
+              title={`Trading Start Time (optional | ${timezone === 'Local' ? 'local)' : 'UTC)'}`}
             >
-              <InputDateTime minDate={new Date()} onChange={(date) => setTimestamp(date)} value={timestamp} />
+              <InputDateTime
+                minDate={
+                  timezone === 'Local' ? new Date() : new Date(Date.now() + new Date().getTimezoneOffset() * 60 * 1000)
+                }
+                onChange={(date) =>
+                  date
+                    ? setTimestamp(
+                        timezone === 'Local'
+                          ? date
+                          : new Date(date.getTime() - new Date().getTimezoneOffset() * 60 * 1000),
+                      )
+                    : setTimestamp(undefined)
+                }
+                value={
+                  timezone === 'Local'
+                    ? timestamp
+                    : timestamp
+                    ? new Date(timestamp.getTime() + new Date().getTimezoneOffset() * 60 * 1000)
+                    : undefined
+                }
+              />
             </FormControl>
           </div>
         </div>
@@ -318,7 +362,9 @@ export const CollectionDetails = ({
           </div>
         </div>
         <Conditional
-          test={SG721_OPEN_EDITION_UPDATABLE_CODE_ID > 0 && OPEN_EDITION_UPDATABLE_FACTORY_ADDRESS !== undefined}
+          test={
+            false && SG721_OPEN_EDITION_UPDATABLE_CODE_ID > 0 && OPEN_EDITION_UPDATABLE_FACTORY_ADDRESS !== undefined
+          }
         >
           <Tooltip
             backgroundColor="bg-blue-500"
@@ -332,9 +378,12 @@ export const CollectionDetails = ({
             }
             placement="bottom"
           >
-            <div className={clsx('flex flex-col space-y-2 w-3/4 form-control')}>
+            <div className={clsx('flex flex-col space-y-2 w-full form-control')}>
               <label className="justify-start cursor-pointer label">
-                <span className="mr-4 font-bold">Updatable Token Metadata</span>
+                <div className="flex flex-col">
+                  <span className="mr-4 font-bold">Updatable Token Metadata</span>
+                  <span className="mr-4">(Price: 2000 STARS)</span>
+                </div>
                 <input
                   checked={updatable}
                   className={`toggle ${updatable ? `bg-stargaze` : `bg-gray-600`}`}

components/openEdition/ImageUploadDetails.tsx

@@ -14,16 +14,20 @@ import type { ChangeEvent } from 'react'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { toast } from 'react-hot-toast'
 import type { UploadServiceType } from 'services/upload'
+import type { AssetType } from 'utils/getAssetType'
 import { getAssetType } from 'utils/getAssetType'
 
 export type UploadMethod = 'new' | 'existing'
 
 interface ImageUploadDetailsProps {
   onChange: (value: ImageUploadDetailsDataProps) => void
+  importedImageUploadDetails?: ImageUploadDetailsDataProps
 }
 
 export interface ImageUploadDetailsDataProps {
   assetFile: File | undefined
+  thumbnailFile?: File | undefined
+  isThumbnailCompatible?: boolean
   uploadService: UploadServiceType
   nftStorageApiKey?: string
   pinataApiKey?: string
@@ -33,12 +37,15 @@ export interface ImageUploadDetailsDataProps {
   coverImageUrl?: string
 }
 
-export const ImageUploadDetails = ({ onChange }: ImageUploadDetailsProps) => {
+export const ImageUploadDetails = ({ onChange, importedImageUploadDetails }: ImageUploadDetailsProps) => {
   const [assetFile, setAssetFile] = useState<File>()
+  const [thumbnailFile, setThumbnailFile] = useState<File>()
+  const [isThumbnailCompatible, setIsThumbnailCompatible] = useState<boolean>(false)
   const [uploadMethod, setUploadMethod] = useState<UploadMethod>('new')
   const [uploadService, setUploadService] = useState<UploadServiceType>('nft-storage')
 
   const assetFileRef = useRef<HTMLInputElement | null>(null)
+  const thumbnailFileRef = useRef<HTMLInputElement | null>(null)
 
   const nftStorageApiKeyState = useInputState({
     id: 'nft-storage-api-key',
@@ -78,8 +85,12 @@ export const ImageUploadDetails = ({ onChange }: ImageUploadDetailsProps) => {
     defaultValue: '',
   })
 
+  const thumbnailCompatibleAssetTypes: AssetType[] = ['video', 'audio', 'html']
+
   const selectAsset = (event: ChangeEvent<HTMLInputElement>) => {
     setAssetFile(undefined)
+    setThumbnailFile(undefined)
+    setIsThumbnailCompatible(false)
     if (event.target.files === null) return
 
     let selectedFile: File
@@ -87,17 +98,40 @@ export const ImageUploadDetails = ({ onChange }: ImageUploadDetailsProps) => {
     reader.onload = (e) => {
       if (!event.target.files) return toast.error('No file selected.')
       if (!e.target?.result) return toast.error('Error parsing file.')
-      selectedFile = new File([e.target.result], event.target.files[0].name, { type: 'image/jpg' })
+      selectedFile = new File([e.target.result], event.target.files[0].name.replaceAll('#', ''), { type: 'image/jpg' })
     }
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     if (event.target.files[0]) reader.readAsArrayBuffer(event.target.files[0])
     else return toast.error('No file selected.')
     reader.onloadend = () => {
       if (!event.target.files) return toast.error('No file selected.')
+      if (thumbnailCompatibleAssetTypes.includes(getAssetType(event.target.files[0].name))) {
+        setIsThumbnailCompatible(true)
+      }
       setAssetFile(selectedFile)
     }
   }
 
+  const selectThumbnail = (event: ChangeEvent<HTMLInputElement>) => {
+    setThumbnailFile(undefined)
+    if (event.target.files === null) return
+
+    let selectedFile: File
+    const reader = new FileReader()
+    reader.onload = (e) => {
+      if (!event.target.files) return toast.error('No file selected.')
+      if (!e.target?.result) return toast.error('Error parsing file.')
+      selectedFile = new File([e.target.result], event.target.files[0].name.replaceAll('#', ''), { type: 'image/*' })
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    if (event.target.files[0]) reader.readAsArrayBuffer(event.target.files[0])
+    else return toast.error('No file selected.')
+    reader.onloadend = () => {
+      if (!event.target.files) return toast.error('No file selected.')
+      setThumbnailFile(selectedFile)
+    }
+  }
+
   const regex =
     /[\0-\x1F\x7F-\x9F\xAD\u0378\u0379\u037F-\u0383\u038B\u038D\u03A2\u0528-\u0530\u0557\u0558\u0560\u0588\u058B-\u058E\u0590\u05C8-\u05CF\u05EB-\u05EF\u05F5-\u0605\u061C\u061D\u06DD\u070E\u070F\u074B\u074C\u07B2-\u07BF\u07FB-\u07FF\u082E\u082F\u083F\u085C\u085D\u085F-\u089F\u08A1\u08AD-\u08E3\u08FF\u0978\u0980\u0984\u098D\u098E\u0991\u0992\u09A9\u09B1\u09B3-\u09B5\u09BA\u09BB\u09C5\u09C6\u09C9\u09CA\u09CF-\u09D6\u09D8-\u09DB\u09DE\u09E4\u09E5\u09FC-\u0A00\u0A04\u0A0B-\u0A0E\u0A11\u0A12\u0A29\u0A31\u0A34\u0A37\u0A3A\u0A3B\u0A3D\u0A43-\u0A46\u0A49\u0A4A\u0A4E-\u0A50\u0A52-\u0A58\u0A5D\u0A5F-\u0A65\u0A76-\u0A80\u0A84\u0A8E\u0A92\u0AA9\u0AB1\u0AB4\u0ABA\u0ABB\u0AC6\u0ACA\u0ACE\u0ACF\u0AD1-\u0ADF\u0AE4\u0AE5\u0AF2-\u0B00\u0B04\u0B0D\u0B0E\u0B11\u0B12\u0B29\u0B31\u0B34\u0B3A\u0B3B\u0B45\u0B46\u0B49\u0B4A\u0B4E-\u0B55\u0B58-\u0B5B\u0B5E\u0B64\u0B65\u0B78-\u0B81\u0B84\u0B8B-\u0B8D\u0B91\u0B96-\u0B98\u0B9B\u0B9D\u0BA0-\u0BA2\u0BA5-\u0BA7\u0BAB-\u0BAD\u0BBA-\u0BBD\u0BC3-\u0BC5\u0BC9\u0BCE\u0BCF\u0BD1-\u0BD6\u0BD8-\u0BE5\u0BFB-\u0C00\u0C04\u0C0D\u0C11\u0C29\u0C34\u0C3A-\u0C3C\u0C45\u0C49\u0C4E-\u0C54\u0C57\u0C5A-\u0C5F\u0C64\u0C65\u0C70-\u0C77\u0C80\u0C81\u0C84\u0C8D\u0C91\u0CA9\u0CB4\u0CBA\u0CBB\u0CC5\u0CC9\u0CCE-\u0CD4\u0CD7-\u0CDD\u0CDF\u0CE4\u0CE5\u0CF0\u0CF3-\u0D01\u0D04\u0D0D\u0D11\u0D3B\u0D3C\u0D45\u0D49\u0D4F-\u0D56\u0D58-\u0D5F\u0D64\u0D65\u0D76-\u0D78\u0D80\u0D81\u0D84\u0D97-\u0D99\u0DB2\u0DBC\u0DBE\u0DBF\u0DC7-\u0DC9\u0DCB-\u0DCE\u0DD5\u0DD7\u0DE0-\u0DF1\u0DF5-\u0E00\u0E3B-\u0E3E\u0E5C-\u0E80\u0E83\u0E85\u0E86\u0E89\u0E8B\u0E8C\u0E8E-\u0E93\u0E98\u0EA0\u0EA4\u0EA6\u0EA8\u0EA9\u0EAC\u0EBA\u0EBE\u0EBF\u0EC5\u0EC7\u0ECE\u0ECF\u0EDA\u0EDB\u0EE0-\u0EFF\u0F48\u0F6D-\u0F70\u0F98\u0FBD\u0FCD\u0FDB-\u0FFF\u10C6\u10C8-\u10CC\u10CE\u10CF\u1249\u124E\u124F\u1257\u1259\u125E\u125F\u1289\u128E\u128F\u12B1\u12B6\u12B7\u12BF\u12C1\u12C6\u12C7\u12D7\u1311\u1316\u1317\u135B\u135C\u137D-\u137F\u139A-\u139F\u13F5-\u13FF\u169D-\u169F\u16F1-\u16FF\u170D\u1715-\u171F\u1737-\u173F\u1754-\u175F\u176D\u1771\u1774-\u177F\u17DE\u17DF\u17EA-\u17EF\u17FA-\u17FF\u180F\u181A-\u181F\u1878-\u187F\u18AB-\u18AF\u18F6-\u18FF\u191D-\u191F\u192C-\u192F\u193C-\u193F\u1941-\u1943\u196E\u196F\u1975-\u197F\u19AC-\u19AF\u19CA-\u19CF\u19DB-\u19DD\u1A1C\u1A1D\u1A5F\u1A7D\u1A7E\u1A8A-\u1A8F\u1A9A-\u1A9F\u1AAE-\u1AFF\u1B4C-\u1B4F\u1B7D-\u1B7F\u1BF4-\u1BFB\u1C38-\u1C3A\u1C4A-\u1C4C\u1C80-\u1CBF\u1CC8-\u1CCF\u1CF7-\u1CFF\u1DE7-\u1DFB\u1F16\u1F17\u1F1E\u1F1F\u1F46\u1F47\u1F4E\u1F4F\u1F58\u1F5A\u1F5C\u1F5E\u1F7E\u1F7F\u1FB5\u1FC5\u1FD4\u1FD5\u1FDC\u1FF0\u1FF1\u1FF5\u1FFF\u200B-\u200F\u2020-\u202E\u2060-\u206F\u2072\u2073\u208F\u209D-\u209F\u20BB-\u20CF\u20F1-\u20FF\u218A-\u218F\u23F4-\u23FF\u2427-\u243F\u244B-\u245F\u2700\u2B4D-\u2B4F\u2B5A-\u2BFF\u2C2F\u2C5F\u2CF4-\u2CF8\u2D26\u2D28-\u2D2C\u2D2E\u2D2F\u2D68-\u2D6E\u2D71-\u2D7E\u2D97-\u2D9F\u2DA7\u2DAF\u2DB7\u2DBF\u2DC7\u2DCF\u2DD7\u2DDF\u2E3C-\u2E7F\u2E9A\u2EF4-\u2EFF\u2FD6-\u2FEF\u2FFC-\u2FFF\u3040\u3097\u3098\u3100-\u3104\u312E-\u3130\u318F\u31BB-\u31BF\u31E4-\u31EF\u321F\u32FF\u4DB6-\u4DBF\u9FCD-\u9FFF\uA48D-\uA48F\uA4C7-\uA4CF\uA62C-\uA63F\uA698-\uA69E\uA6F8-\uA6FF\uA78F\uA794-\uA79F\uA7AB-\uA7F7\uA82C-\uA82F\uA83A-\uA83F\uA878-\uA87F\uA8C5-\uA8CD\uA8DA-\uA8DF\uA8FC-\uA8FF\uA954-\uA95E\uA97D-\uA97F\uA9CE\uA9DA-\uA9DD\uA9E0-\uA9FF\uAA37-\uAA3F\uAA4E\uAA4F\uAA5A\uAA5B\uAA7C-\uAA7F\uAAC3-\uAADA\uAAF7-\uAB00\uAB07\uAB08\uAB0F\uAB10\uAB17-\uAB1F\uAB27\uAB2F-\uABBF\uABEE\uABEF\uABFA-\uABFF\uD7A4-\uD7AF\uD7C7-\uD7CA\uD7FC-\uF8FF\uFA6E\uFA6F\uFADA-\uFAFF\uFB07-\uFB12\uFB18-\uFB1C\uFB37\uFB3D\uFB3F\uFB42\uFB45\uFBC2-\uFBD2\uFD40-\uFD4F\uFD90\uFD91\uFDC8-\uFDEF\uFDFE\uFDFF\uFE1A-\uFE1F\uFE27-\uFE2F\uFE53\uFE67\uFE6C-\uFE6F\uFE75\uFEFD-\uFF00\uFFBF-\uFFC1\uFFC8\uFFC9\uFFD0\uFFD1\uFFD8\uFFD9\uFFDD-\uFFDF\uFFE7\uFFEF-\uFFFB\uFFFE\uFFFF]/g
 
@@ -105,6 +139,8 @@ export const ImageUploadDetails = ({ onChange }: ImageUploadDetailsProps) => {
     try {
       const data: ImageUploadDetailsDataProps = {
         assetFile,
+        thumbnailFile,
+        isThumbnailCompatible,
         uploadService,
         nftStorageApiKey: nftStorageApiKeyState.value,
         pinataApiKey: pinataApiKeyState.value,
@@ -125,6 +161,8 @@ export const ImageUploadDetails = ({ onChange }: ImageUploadDetailsProps) => {
     }
   }, [
     assetFile,
+    thumbnailFile,
+    isThumbnailCompatible,
     uploadService,
     nftStorageApiKeyState.value,
     pinataApiKeyState.value,
@@ -137,9 +175,23 @@ export const ImageUploadDetails = ({ onChange }: ImageUploadDetailsProps) => {
   useEffect(() => {
     if (assetFileRef.current) assetFileRef.current.value = ''
     setAssetFile(undefined)
+    setThumbnailFile(undefined)
+    setIsThumbnailCompatible(false)
     imageUrlState.onChange('')
   }, [uploadMethod])
 
+  useEffect(() => {
+    if (importedImageUploadDetails) {
+      setUploadMethod(importedImageUploadDetails.uploadMethod)
+      setUploadService(importedImageUploadDetails.uploadService)
+      nftStorageApiKeyState.onChange(importedImageUploadDetails.nftStorageApiKey || '')
+      pinataApiKeyState.onChange(importedImageUploadDetails.pinataApiKey || '')
+      pinataSecretKeyState.onChange(importedImageUploadDetails.pinataSecretKey || '')
+      imageUrlState.onChange(importedImageUploadDetails.imageUrl || '')
+      coverImageUrlState.onChange(importedImageUploadDetails.coverImageUrl || '')
+    }
+  }, [importedImageUploadDetails])
+
   const previewUrl = imageUrlState.value.toLowerCase().trim().startsWith('ipfs://')
     ? `https://ipfs-gw.stargaze-apis.com/ipfs/${imageUrlState.value.substring(7)}`
     : imageUrlState.value
@@ -319,7 +371,7 @@ export const ImageUploadDetails = ({ onChange }: ImageUploadDetailsProps) => {
                         )}
                       >
                         <input
-                          accept="image/*, audio/*, video/*, .html"
+                          accept="image/*, audio/*, video/*, .html, .pdf"
                           className={clsx(
                             'file:py-2 file:px-4 file:mr-4 file:bg-plumbus-light file:rounded file:border-0 cursor-pointer',
                             'before:absolute before:inset-0 before:hover:bg-white/5 before:transition',
@@ -331,6 +383,34 @@ export const ImageUploadDetails = ({ onChange }: ImageUploadDetailsProps) => {
                         />
                       </div>
                     </div>
+                    <Conditional test={isThumbnailCompatible}>
+                      <div>
+                        <label
+                          className="block mt-5 mr-1 mb-1 ml-8 w-full font-bold text-white dark:text-gray-300"
+                          htmlFor="thumbnailFile"
+                        >
+                          Thumbnail Selection (optional)
+                        </label>
+                        <div
+                          className={clsx(
+                            'flex relative justify-center items-center mx-8 mt-2 space-y-4 w-full h-32',
+                            'rounded border-2 border-white/20 border-dashed',
+                          )}
+                        >
+                          <input
+                            accept="image/*"
+                            className={clsx(
+                              'file:py-2 file:px-4 file:mr-4 file:bg-plumbus-light file:rounded file:border-0 cursor-pointer',
+                              'before:absolute before:inset-0 before:hover:bg-white/5 before:transition',
+                            )}
+                            id="thumbnailFile"
+                            onChange={selectThumbnail}
+                            ref={thumbnailFileRef}
+                            type="file"
+                          />
+                        </div>
+                      </div>
+                    </Conditional>
                   </div>
                 </div>
                 <Conditional test={assetFile !== undefined}>

components/openEdition/MintingDetails.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable eslint-comments/disable-enable-pair */
+/* eslint-disable @typescript-eslint/no-unnecessary-condition */
 /* eslint-disable no-nested-ternary */
 import { FormControl } from 'components/FormControl'
 import { FormGroup } from 'components/FormGroup'
@@ -7,10 +8,11 @@ import { InputDateTime } from 'components/InputDateTime'
 import { openEditionMinterList } from 'config/minter'
 import type { TokenInfo } from 'config/token'
 import { stars, tokensList } from 'config/token'
+import { useGlobalSettings } from 'contexts/globalSettings'
 import React, { useEffect, useState } from 'react'
 import { resolveAddress } from 'utils/resolveAddress'
+import { useWallet } from 'utils/wallet'
 
-import { useWallet } from '../../contexts/wallet'
 import { NumberInput, TextInput } from '../forms/FormInput'
 import type { UploadMethod } from './OffChainMetadataUploadDetails'
 
@@ -19,6 +21,7 @@ interface MintingDetailsProps {
   uploadMethod: UploadMethod
   minimumMintPrice: number
   mintTokenFromFactory?: TokenInfo | undefined
+  importedMintingDetails?: MintingDetailsDataProps
 }
 
 export interface MintingDetailsDataProps {
@@ -35,12 +38,15 @@ export const MintingDetails = ({
   uploadMethod,
   minimumMintPrice,
   mintTokenFromFactory,
+  importedMintingDetails,
 }: MintingDetailsProps) => {
   const wallet = useWallet()
 
   const [timestamp, setTimestamp] = useState<Date | undefined>()
   const [endTimestamp, setEndTimestamp] = useState<Date | undefined>()
   const [selectedMintToken, setSelectedMintToken] = useState<TokenInfo | undefined>(stars)
+  const [mintingDetailsImported, setMintingDetailsImported] = useState(false)
+  const { timezone } = useGlobalSettings()
 
   const unitPriceState = useNumberInputState({
     id: 'unitPrice',
@@ -75,7 +81,9 @@ export const MintingDetails = ({
   }
 
   useEffect(() => {
-    void resolvePaymentAddress()
+    if (!importedMintingDetails || (importedMintingDetails && mintingDetailsImported)) {
+      void resolvePaymentAddress()
+    }
   }, [paymentAddressState.value])
 
   useEffect(() => {
@@ -102,14 +110,29 @@ export const MintingDetails = ({
     selectedMintToken,
   ])
 
+  useEffect(() => {
+    if (importedMintingDetails) {
+      console.log('Selected Token ID: ', importedMintingDetails.selectedMintToken?.id)
+      unitPriceState.onChange(Number(importedMintingDetails.unitPrice) / 1000000)
+      perAddressLimitState.onChange(importedMintingDetails.perAddressLimit)
+      setTimestamp(new Date(Number(importedMintingDetails.startTime) / 1_000_000))
+      setEndTimestamp(new Date(Number(importedMintingDetails.endTime) / 1_000_000))
+      paymentAddressState.onChange(importedMintingDetails.paymentAddress ? importedMintingDetails.paymentAddress : '')
+      setSelectedMintToken(tokensList.find((token) => token.id === importedMintingDetails.selectedMintToken?.id))
+      setMintingDetailsImported(true)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [importedMintingDetails])
+
   return (
     <div className="border-l-[1px] border-gray-500 border-opacity-20">
       <FormGroup subtitle="Information about your minting settings" title="Minting Details">
-        <div className="flex flex-row items-center">
+        <div className="flex flex-row items-end">
           <NumberInput {...unitPriceState} isRequired />
           <select
-            className="py-[9px] px-4 mt-14 ml-4 placeholder:text-white/50 bg-white/10 rounded border-2 border-white/20 focus:ring focus:ring-plumbus-20"
+            className="py-[9px] px-4 ml-4 placeholder:text-white/50 bg-white/10 rounded border-2 border-white/20 focus:ring focus:ring-plumbus-20"
             onChange={(e) => setSelectedMintToken(tokensList.find((t) => t.displayName === e.target.value))}
+            value={selectedMintToken?.displayName}
           >
             {openEditionMinterList
               .filter((minter) => minter.factoryAddress !== undefined && minter.updatable === false)
@@ -122,11 +145,57 @@ export const MintingDetails = ({
         </div>
 
         <NumberInput {...perAddressLimitState} isRequired />
-        <FormControl htmlId="timestamp" isRequired subtitle="Minting start time (local)" title="Start Time">
-          <InputDateTime minDate={new Date()} onChange={(date) => setTimestamp(date)} value={timestamp} />
+        <FormControl
+          htmlId="timestamp"
+          isRequired
+          subtitle={`Minting start time ${timezone === 'Local' ? '(local)' : '(UTC)'}`}
+          title="Start Time"
+        >
+          <InputDateTime
+            minDate={
+              timezone === 'Local' ? new Date() : new Date(Date.now() + new Date().getTimezoneOffset() * 60 * 1000)
+            }
+            onChange={(date) =>
+              date
+                ? setTimestamp(
+                    timezone === 'Local' ? date : new Date(date.getTime() - new Date().getTimezoneOffset() * 60 * 1000),
+                  )
+                : setTimestamp(undefined)
+            }
+            value={
+              timezone === 'Local'
+                ? timestamp
+                : timestamp
+                ? new Date(timestamp.getTime() + new Date().getTimezoneOffset() * 60 * 1000)
+                : undefined
+            }
+          />
         </FormControl>
-        <FormControl htmlId="endTimestamp" isRequired subtitle="Minting end time (local)" title="End Time">
-          <InputDateTime minDate={new Date()} onChange={(date) => setEndTimestamp(date)} value={endTimestamp} />
+        <FormControl
+          htmlId="endTimestamp"
+          isRequired
+          subtitle={`Minting end time ${timezone === 'Local' ? '(local)' : '(UTC)'}`}
+          title="End Time"
+        >
+          <InputDateTime
+            minDate={
+              timezone === 'Local' ? new Date() : new Date(Date.now() + new Date().getTimezoneOffset() * 60 * 1000)
+            }
+            onChange={(date) =>
+              date
+                ? setEndTimestamp(
+                    timezone === 'Local' ? date : new Date(date.getTime() - new Date().getTimezoneOffset() * 60 * 1000),
+                  )
+                : setEndTimestamp(undefined)
+            }
+            value={
+              timezone === 'Local'
+                ? endTimestamp
+                : endTimestamp
+                ? new Date(endTimestamp.getTime() + new Date().getTimezoneOffset() * 60 * 1000)
+                : undefined
+            }
+          />
         </FormControl>
       </FormGroup>
       <TextInput className="pr-4 pl-4 mt-3" {...paymentAddressState} />

components/openEdition/OffChainMetadataUploadDetails.tsx

@@ -18,6 +18,8 @@ import type { ChangeEvent } from 'react'
 import { useEffect, useRef, useState } from 'react'
 import { toast } from 'react-hot-toast'
 import type { UploadServiceType } from 'services/upload'
+import type { AssetType } from 'utils/getAssetType'
+import { getAssetType } from 'utils/getAssetType'
 import { uid } from 'utils/random'
 import { naturalCompare } from 'utils/sort'
 
@@ -28,11 +30,14 @@ export type UploadMethod = 'new' | 'existing'
 interface OffChainMetadataUploadDetailsProps {
   onChange: (value: OffChainMetadataUploadDetailsDataProps) => void
   metadataStorageMethod?: MetadataStorageMethod
+  importedOffChainMetadataUploadDetails?: OffChainMetadataUploadDetailsDataProps
 }
 
 export interface OffChainMetadataUploadDetailsDataProps {
   assetFiles: File[]
   metadataFiles: File[]
+  thumbnailFile?: File
+  isThumbnailCompatible?: boolean
   uploadService: UploadServiceType
   nftStorageApiKey?: string
   pinataApiKey?: string
@@ -41,23 +46,30 @@ export interface OffChainMetadataUploadDetailsDataProps {
   tokenURI?: string
   imageUrl?: string
   openEditionMinterMetadataFile?: File
+  exportedMetadata?: any
 }
 
 export const OffChainMetadataUploadDetails = ({
   onChange,
   metadataStorageMethod,
+  importedOffChainMetadataUploadDetails,
 }: OffChainMetadataUploadDetailsProps) => {
   const [assetFilesArray, setAssetFilesArray] = useState<File[]>([])
   const [metadataFilesArray, setMetadataFilesArray] = useState<File[]>([])
+  const [thumbnailFile, setThumbnailFile] = useState<File>()
+  const [isThumbnailCompatible, setIsThumbnailCompatible] = useState<boolean>(false)
   const [uploadMethod, setUploadMethod] = useState<UploadMethod>('new')
   const [uploadService, setUploadService] = useState<UploadServiceType>('nft-storage')
   const [metadataFileArrayIndex, setMetadataFileArrayIndex] = useState(0)
   const [refreshMetadata, setRefreshMetadata] = useState(false)
-
+  const [exportedMetadata, setExportedMetadata] = useState(undefined)
   const [openEditionMinterMetadataFile, setOpenEditionMinterMetadataFile] = useState<File | undefined>()
 
+  const thumbnailCompatibleAssetTypes: AssetType[] = ['video', 'audio', 'html', 'document']
+
   const assetFilesRef = useRef<HTMLInputElement | null>(null)
   const metadataFilesRef = useRef<HTMLInputElement | null>(null)
+  const thumbnailFilesRef = useRef<HTMLInputElement | null>(null)
 
   const nftStorageApiKeyState = useInputState({
     id: 'nft-storage-api-key',
@@ -100,7 +112,12 @@ export const OffChainMetadataUploadDetails = ({
   const selectAssets = (event: ChangeEvent<HTMLInputElement>) => {
     setAssetFilesArray([])
     setMetadataFilesArray([])
+    setThumbnailFile(undefined)
+    setIsThumbnailCompatible(false)
     if (event.target.files === null) return
+    if (thumbnailCompatibleAssetTypes.includes(getAssetType(event.target.files[0].name))) {
+      setIsThumbnailCompatible(true)
+    }
     let loadedFileCount = 0
     const files: File[] = []
     let reader: FileReader
@@ -109,7 +126,9 @@ export const OffChainMetadataUploadDetails = ({
       reader.onload = (e) => {
         if (!e.target?.result) return toast.error('Error parsing file.')
         if (!event.target.files) return toast.error('No files selected.')
-        const assetFile = new File([e.target.result], event.target.files[i].name, { type: 'image/jpg' })
+        const assetFile = new File([e.target.result], event.target.files[i].name.replaceAll('#', ''), {
+          type: 'image/jpg',
+        })
         files.push(assetFile)
       }
       reader.readAsArrayBuffer(event.target.files[i])
@@ -135,7 +154,9 @@ export const OffChainMetadataUploadDetails = ({
       reader.onload = async (e) => {
         if (!e.target?.result) return toast.error('Error parsing file.')
         if (!event.target.files) return toast.error('No files selected.')
-        const metadataFile = new File([e.target.result], event.target.files[i].name, { type: 'application/json' })
+        const metadataFile = new File([e.target.result], event.target.files[i].name.replaceAll('#', ''), {
+          type: 'application/json',
+        })
         files.push(metadataFile)
         try {
           const parsedMetadata = JSON.parse(await metadataFile.text())
@@ -162,6 +183,26 @@ export const OffChainMetadataUploadDetails = ({
     }
   }
 
+  const selectThumbnail = (event: ChangeEvent<HTMLInputElement>) => {
+    setThumbnailFile(undefined)
+    if (event.target.files === null) return
+
+    let selectedFile: File
+    const reader = new FileReader()
+    reader.onload = (e) => {
+      if (!event.target.files) return toast.error('No file selected.')
+      if (!e.target?.result) return toast.error('Error parsing file.')
+      selectedFile = new File([e.target.result], event.target.files[0].name.replaceAll('#', ''), { type: 'image/*' })
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    if (event.target.files[0]) reader.readAsArrayBuffer(event.target.files[0])
+    else return toast.error('No file selected.')
+    reader.onloadend = () => {
+      if (!event.target.files) return toast.error('No file selected.')
+      setThumbnailFile(selectedFile)
+    }
+  }
+
   const updateMetadataFileIndex = (index: number) => {
     setMetadataFileArrayIndex(index)
     setRefreshMetadata((prev) => !prev)
@@ -184,6 +225,8 @@ export const OffChainMetadataUploadDetails = ({
       const data: OffChainMetadataUploadDetailsDataProps = {
         assetFiles: assetFilesArray,
         metadataFiles: metadataFilesArray,
+        thumbnailFile,
+        isThumbnailCompatible,
         uploadService,
         nftStorageApiKey: nftStorageApiKeyState.value,
         pinataApiKey: pinataApiKeyState.value,
@@ -204,6 +247,7 @@ export const OffChainMetadataUploadDetails = ({
           .replace(regex, '')
           .trim(),
         openEditionMinterMetadataFile,
+        exportedMetadata,
       }
       onChange(data)
     } catch (error: any) {
@@ -213,6 +257,8 @@ export const OffChainMetadataUploadDetails = ({
   }, [
     assetFilesArray,
     metadataFilesArray,
+    thumbnailFile,
+    isThumbnailCompatible,
     uploadService,
     nftStorageApiKeyState.value,
     pinataApiKeyState.value,
@@ -222,6 +268,7 @@ export const OffChainMetadataUploadDetails = ({
     coverImageUrlState.value,
     refreshMetadata,
     openEditionMinterMetadataFile,
+    exportedMetadata,
   ])
 
   useEffect(() => {
@@ -229,10 +276,27 @@ export const OffChainMetadataUploadDetails = ({
     setMetadataFilesArray([])
     if (assetFilesRef.current) assetFilesRef.current.value = ''
     setAssetFilesArray([])
-    tokenUriState.onChange('')
-    coverImageUrlState.onChange('')
+    setThumbnailFile(undefined)
+    setIsThumbnailCompatible(false)
+    if (!importedOffChainMetadataUploadDetails) {
+      tokenUriState.onChange('')
+      coverImageUrlState.onChange('')
+    }
   }, [uploadMethod, metadataStorageMethod])
 
+  useEffect(() => {
+    if (importedOffChainMetadataUploadDetails) {
+      setUploadService(importedOffChainMetadataUploadDetails.uploadService)
+      nftStorageApiKeyState.onChange(importedOffChainMetadataUploadDetails.nftStorageApiKey || '')
+      pinataApiKeyState.onChange(importedOffChainMetadataUploadDetails.pinataApiKey || '')
+      pinataSecretKeyState.onChange(importedOffChainMetadataUploadDetails.pinataSecretKey || '')
+      setUploadMethod(importedOffChainMetadataUploadDetails.uploadMethod)
+      tokenUriState.onChange(importedOffChainMetadataUploadDetails.tokenURI || '')
+      coverImageUrlState.onChange(importedOffChainMetadataUploadDetails.imageUrl || '')
+      // setOpenEditionMinterMetadataFile(importedOffChainMetadataUploadDetails.openEditionMinterMetadataFile)
+    }
+  }, [importedOffChainMetadataUploadDetails])
+
   return (
     <div className="justify-items-start mb-3 rounded border-2 border-white/20 flex-column">
       <div className="flex justify-center">
@@ -390,7 +454,7 @@ export const OffChainMetadataUploadDetails = ({
                       )}
                     >
                       <input
-                        accept="image/*, audio/*, video/*, .html"
+                        accept="image/*, audio/*, video/*, .html, .pdf"
                         className={clsx(
                           'file:py-2 file:px-4 file:mr-4 file:bg-plumbus-light file:rounded file:border-0 cursor-pointer',
                           'before:absolute before:inset-0 before:hover:bg-white/5 before:transition',
@@ -402,6 +466,34 @@ export const OffChainMetadataUploadDetails = ({
                       />
                     </div>
                   </div>
+                  <Conditional test={isThumbnailCompatible}>
+                    <div>
+                      <label
+                        className="block mt-5 mr-1 mb-1 ml-8 w-full font-bold text-white dark:text-gray-300"
+                        htmlFor="thumbnailFiles"
+                      >
+                        Thumbnail Selection (optional)
+                      </label>
+                      <div
+                        className={clsx(
+                          'flex relative justify-center items-center mx-8 mt-2 space-y-4 w-full h-32',
+                          'rounded border-2 border-white/20 border-dashed',
+                        )}
+                      >
+                        <input
+                          accept="image/*"
+                          className={clsx(
+                            'file:py-2 file:px-4 file:mr-4 file:bg-plumbus-light file:rounded file:border-0 cursor-pointer',
+                            'before:absolute before:inset-0 before:hover:bg-white/5 before:transition',
+                          )}
+                          id="thumbnailFiles"
+                          onChange={selectThumbnail}
+                          ref={thumbnailFilesRef}
+                          type="file"
+                        />
+                      </div>
+                    </div>
+                  </Conditional>
 
                   {assetFilesArray.length > 0 && (
                     <div>
@@ -447,6 +539,8 @@ export const OffChainMetadataUploadDetails = ({
                 />
               </div>
               <MetadataInput
+                importedMetadata={importedOffChainMetadataUploadDetails?.exportedMetadata}
+                onChange={setExportedMetadata}
                 selectedAssetFile={assetFilesArray[0]}
                 selectedMetadataFile={metadataFilesArray[0]}
                 updateMetadataToUpload={updateOpenEditionMinterMetadataFile}

components/openEdition/OnChainMetadataInputDetails.tsx

@@ -7,7 +7,6 @@ import clsx from 'clsx'
 import { Conditional } from 'components/Conditional'
 import { useInputState } from 'components/forms/FormInput.hooks'
 import { useMetadataAttributesState } from 'components/forms/MetadataAttributes.hooks'
-import { useWallet } from 'contexts/wallet'
 import type { Trait } from 'contracts/badgeHub'
 import type { ChangeEvent } from 'react'
 import { useEffect, useRef, useState } from 'react'
@@ -21,6 +20,7 @@ import type { UploadMethod } from './ImageUploadDetails'
 interface OnChainMetadataInputDetailsProps {
   onChange: (data: OnChainMetadataInputDetailsDataProps) => void
   uploadMethod: UploadMethod | undefined
+  importedOnChainMetadataInputDetails?: OnChainMetadataInputDetailsDataProps
 }
 
 export interface OnChainMetadataInputDetailsDataProps {
@@ -34,8 +34,11 @@ export interface OnChainMetadataInputDetailsDataProps {
   youtube_url?: string
 }
 
-export const OnChainMetadataInputDetails = ({ onChange, uploadMethod }: OnChainMetadataInputDetailsProps) => {
-  const wallet = useWallet()
+export const OnChainMetadataInputDetails = ({
+  onChange,
+  uploadMethod,
+  importedOnChainMetadataInputDetails,
+}: OnChainMetadataInputDetailsProps) => {
   const [timestamp, setTimestamp] = useState<Date | undefined>(undefined)
   const [metadataFile, setMetadataFile] = useState<File>()
   const [metadataFeeRate, setMetadataFeeRate] = useState<number>(0)
@@ -140,7 +143,9 @@ export const OnChainMetadataInputDetails = ({ onChange, uploadMethod }: OnChainM
     reader.onload = (e) => {
       if (!event.target.files) return toast.error('No file selected.')
       if (!e.target?.result) return toast.error('Error parsing file.')
-      selectedFile = new File([e.target.result], event.target.files[0].name, { type: 'application/json' })
+      selectedFile = new File([e.target.result], event.target.files[0].name.replaceAll('#', ''), {
+        type: 'application/json',
+      })
     }
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     if (event.target.files[0]) reader.readAsArrayBuffer(event.target.files[0])
@@ -196,6 +201,26 @@ export const OnChainMetadataInputDetails = ({ onChange, uploadMethod }: OnChainM
     youtubeUrlState.value,
   ])
 
+  useEffect(() => {
+    if (importedOnChainMetadataInputDetails) {
+      nameState.onChange(importedOnChainMetadataInputDetails.name || '')
+      descriptionState.onChange(importedOnChainMetadataInputDetails.description || '')
+      externalUrlState.onChange(importedOnChainMetadataInputDetails.external_url || '')
+      youtubeUrlState.onChange(importedOnChainMetadataInputDetails.youtube_url || '')
+      animationUrlState.onChange(importedOnChainMetadataInputDetails.animation_url || '')
+      imageDataState.onChange(importedOnChainMetadataInputDetails.image_data || '')
+      if (importedOnChainMetadataInputDetails.attributes) {
+        attributesState.reset()
+        importedOnChainMetadataInputDetails.attributes.forEach((attr) => {
+          attributesState.add({
+            trait_type: attr.trait_type,
+            value: attr.value,
+          })
+        })
+      }
+    }
+  }, [importedOnChainMetadataInputDetails])
+
   return (
     <div className="py-3 px-8 rounded border-2 border-white/20">
       <span className="ml-4 text-xl font-bold underline underline-offset-4">NFT Metadata</span>

components/openEdition/OpenEditionMinterCreator.tsx

@@ -13,10 +13,9 @@ import { Conditional } from 'components/Conditional'
 import { ConfirmationModal } from 'components/ConfirmationModal'
 import { LoadingModal } from 'components/LoadingModal'
 import { openEditionMinterList } from 'config/minter'
-import type { TokenInfo } from 'config/token'
+import { type TokenInfo } from 'config/token'
 import { useContracts } from 'contexts/contracts'
 import { addLogItem } from 'contexts/log'
-import { useWallet } from 'contexts/wallet'
 import type { DispatchExecuteArgs as OpenEditionFactoryDispatchExecuteArgs } from 'contracts/openEditionFactory/messages/execute'
 import { dispatchExecute as openEditionFactoryDispatchExecute } from 'contracts/openEditionFactory/messages/execute'
 import React, { useEffect, useMemo, useState } from 'react'
@@ -27,11 +26,13 @@ import {
   OPEN_EDITION_UPDATABLE_FACTORY_ADDRESS,
   SG721_OPEN_EDITION_CODE_ID,
   SG721_OPEN_EDITION_UPDATABLE_CODE_ID,
+  STRDST_SG721_CODE_ID,
 } from 'utils/constants'
-import { getAssetType } from 'utils/getAssetType'
+import type { AssetType } from 'utils/getAssetType'
 import { isValidAddress } from 'utils/isValidAddress'
 import { checkTokenUri } from 'utils/isValidTokenUri'
 import { uid } from 'utils/random'
+import { useWallet } from 'utils/wallet'
 
 import { type CollectionDetailsDataProps, CollectionDetails } from './CollectionDetails'
 import type { ImageUploadDetailsDataProps } from './ImageUploadDetails'
@@ -57,6 +58,10 @@ export interface OpenEditionMinterDetailsDataProps {
   offChainMetadataUploadDetails?: OffChainMetadataUploadDetailsDataProps
   mintingDetails?: MintingDetailsDataProps
   metadataStorageMethod?: MetadataStorageMethod
+  openEditionMinterContractAddress?: string | null
+  coverImageUrl?: string | null
+  tokenUri?: string | null
+  tokenImageUri?: string | null
 }
 
 interface OpenEditionMinterCreatorProps {
@@ -68,6 +73,7 @@ interface OpenEditionMinterCreatorProps {
   minimumUpdatableMintPrice?: string
   minterType?: MinterType
   mintTokenFromFactory?: TokenInfo | undefined
+  importedOpenEditionMinterDetails?: OpenEditionMinterDetailsDataProps
 }
 
 export interface OpenEditionMinterCreatorDataProps {
@@ -86,6 +92,7 @@ export const OpenEditionMinterCreator = ({
   minimumUpdatableMintPrice,
   minterType,
   mintTokenFromFactory,
+  importedOpenEditionMinterDetails,
 }: OpenEditionMinterCreatorProps) => {
   const wallet = useWallet()
   const { openEditionMinter: openEditionMinterContract, openEditionFactory: openEditionFactoryContract } =
@@ -110,6 +117,9 @@ export const OpenEditionMinterCreator = ({
   const [openEditionMinterContractAddress, setOpenEditionMinterContractAddress] = useState<string | null>(null)
   const [sg721ContractAddress, setSg721ContractAddress] = useState<string | null>(null)
   const [transactionHash, setTransactionHash] = useState<string | null>(null)
+  const [thumbnailImageUri, setThumbnailImageUri] = useState<string | undefined>(undefined)
+
+  const thumbnailCompatibleAssetTypes: AssetType[] = ['video', 'audio', 'html']
 
   const factoryAddressForSelectedDenom =
     openEditionMinterList.find((minter) => minter.supportedToken === mintTokenFromFactory && minter.updatable === false)
@@ -123,7 +133,14 @@ export const OpenEditionMinterCreator = ({
       openEditionFactoryContract?.use(
         collectionDetails?.updatable ? updatableFactoryAddressForSelectedDenom : factoryAddressForSelectedDenom,
       ),
-    [openEditionFactoryContract, wallet.address],
+    [
+      openEditionFactoryContract,
+      wallet.address,
+      collectionDetails?.updatable,
+      factoryAddressForSelectedDenom,
+      updatableFactoryAddressForSelectedDenom,
+      wallet.isWalletConnected,
+    ],
   )
 
   const performOpenEditionMinterChecks = () => {
@@ -165,7 +182,7 @@ export const OpenEditionMinterCreator = ({
   }
 
   const checkUploadDetails = async () => {
-    if (!wallet.initialized) throw new Error('Wallet not connected.')
+    if (!wallet.isWalletConnected) throw new Error('Wallet not connected.')
     if (
       (metadataStorageMethod === 'off-chain' && !offChainMetadataUploadDetails) ||
       (metadataStorageMethod === 'on-chain' && !imageUploadDetails)
@@ -297,7 +314,13 @@ export const OpenEditionMinterCreator = ({
     if (!mintingDetails.perAddressLimit || mintingDetails.perAddressLimit < 1 || mintingDetails.perAddressLimit > 50)
       throw new Error('Invalid limit for tokens per address')
     if (mintingDetails.startTime === '') throw new Error('Start time is required')
+    if (mintingDetails.endTime === '') throw new Error('End time is required')
     if (Number(mintingDetails.startTime) < new Date().getTime() * 1000000) throw new Error('Invalid start time')
+    if (Number(mintingDetails.endTime) < Number(mintingDetails.startTime))
+      throw new Error('End time cannot be earlier than start time')
+    if (Number(mintingDetails.endTime) === Number(mintingDetails.startTime))
+      throw new Error('End time cannot be equal to the start time')
+
     if (
       mintingDetails.paymentAddress &&
       (!isValidAddress(mintingDetails.paymentAddress) || !mintingDetails.paymentAddress.startsWith('stars1'))
@@ -317,8 +340,8 @@ export const OpenEditionMinterCreator = ({
         }
         throw new Error('Invalid royalty payment address')
       }
-      const contractInfoResponse = await wallet.client
-        ?.queryContractRaw(
+      const contractInfoResponse = await (await wallet.getCosmWasmClient())
+        .queryContractRaw(
           royaltyDetails.paymentAddress.trim(),
           toUtf8(Buffer.from(Buffer.from('contract_info').toString('hex'), 'hex').toString()),
         )
@@ -330,19 +353,19 @@ export const OpenEditionMinterCreator = ({
       if (contractInfoResponse !== undefined) {
         const contractInfo = JSON.parse(new TextDecoder().decode(contractInfoResponse as Uint8Array))
         // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-        if (contractInfo && !contractInfo.contract.includes('splits'))
-          throw new Error('The provided royalty payment address does not belong to a splits contract.')
+        if (contractInfo && (contractInfo.contract.includes('minter') || contractInfo.contract.includes('sg721')))
+          throw new Error('The provided royalty payment address does not belong to a compatible contract.')
         else console.log(contractInfo)
       }
     }
   }
 
   const checkwalletBalance = async () => {
-    if (!wallet.initialized) throw new Error('Wallet not connected.')
+    if (!wallet.isWalletConnected) throw new Error('Wallet not connected.')
     const amountNeeded = collectionDetails?.updatable
       ? Number(openEditionMinterUpdatableCreationFee)
       : Number(openEditionMinterCreationFee)
-    await wallet.client?.getBalance(wallet.address, 'ustars').then((balance) => {
+    await (await wallet.getCosmWasmClient()).getBalance(wallet.address || '', 'ustars').then((balance) => {
       if (amountNeeded >= Number(balance.amount))
         throw new Error(
           `Insufficient wallet balance to instantiate the required contracts. Needed amount: ${(
@@ -418,8 +441,23 @@ export const OpenEditionMinterCreator = ({
           const coverImageUriWithBase = `ipfs://${coverImageUri}/${(collectionDetails?.imageFile as File[])[0].name}`
           setCoverImageUrl(coverImageUriWithBase)
 
+          let thumbnailUri: string | undefined
+          if (imageUploadDetails.isThumbnailCompatible && imageUploadDetails.thumbnailFile)
+            thumbnailUri = await upload(
+              [imageUploadDetails.thumbnailFile] as File[],
+              imageUploadDetails.uploadService,
+              'thumbnail',
+              imageUploadDetails.nftStorageApiKey as string,
+              imageUploadDetails.pinataApiKey as string,
+              imageUploadDetails.pinataSecretKey as string,
+            )
+          const thumbnailUriWithBase = thumbnailUri
+            ? `ipfs://${thumbnailUri}/${(imageUploadDetails.thumbnailFile as File).name}`
+            : undefined
+          setThumbnailImageUri(thumbnailUriWithBase)
+
           setUploading(false)
-          await instantiateOpenEditionMinter(imageUriWithBase, coverImageUriWithBase)
+          await instantiateOpenEditionMinter(imageUriWithBase, coverImageUriWithBase, thumbnailUriWithBase)
         } else if (imageUploadDetails?.uploadMethod === 'existing') {
           setTokenImageUri(imageUploadDetails.imageUrl as string)
           setCoverImageUrl(imageUploadDetails.coverImageUrl as string)
@@ -451,23 +489,40 @@ export const OpenEditionMinterCreator = ({
         offChainMetadataUploadDetails.pinataApiKey as string,
         offChainMetadataUploadDetails.pinataSecretKey as string,
       )
-        .then((assetUri: string) => {
+        .then(async (assetUri: string) => {
+          let thumbnailUri: string | undefined
+          if (offChainMetadataUploadDetails.isThumbnailCompatible && offChainMetadataUploadDetails.thumbnailFile)
+            thumbnailUri = await upload(
+              [offChainMetadataUploadDetails.thumbnailFile] as File[],
+              offChainMetadataUploadDetails.uploadService,
+              'thumbnail',
+              offChainMetadataUploadDetails.nftStorageApiKey as string,
+              offChainMetadataUploadDetails.pinataApiKey as string,
+              offChainMetadataUploadDetails.pinataSecretKey as string,
+            )
+          const thumbnailUriWithBase = thumbnailUri
+            ? `ipfs://${thumbnailUri}/${(offChainMetadataUploadDetails.thumbnailFile as File).name}`
+            : undefined
+
           const fileArray: File[] = []
           const reader: FileReader = new FileReader()
 
           reader.onload = (e) => {
             const data: any = JSON.parse(e.target?.result as string)
 
-            if (
-              getAssetType(offChainMetadataUploadDetails.assetFiles[0].name) === 'audio' ||
-              getAssetType(offChainMetadataUploadDetails.assetFiles[0].name) === 'video' ||
-              getAssetType(offChainMetadataUploadDetails.assetFiles[0].name) === 'html'
-            ) {
+            if (offChainMetadataUploadDetails.isThumbnailCompatible) {
               data.animation_url = `ipfs://${assetUri}/${offChainMetadataUploadDetails.assetFiles[0].name}`
             }
-            if (getAssetType(offChainMetadataUploadDetails.assetFiles[0].name) !== 'html')
-              data.image = `ipfs://${assetUri}/${offChainMetadataUploadDetails.assetFiles[0].name}`
 
+            data.image =
+              offChainMetadataUploadDetails.isThumbnailCompatible && offChainMetadataUploadDetails.thumbnailFile
+                ? thumbnailUriWithBase
+                : `ipfs://${assetUri}/${offChainMetadataUploadDetails.assetFiles[0].name}`
+
+            if (data.description) {
+              // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+              data.description = data.description.replaceAll('\\n', '\n')
+            }
             const metadataFileBlob = new Blob([JSON.stringify(data)], {
               type: 'application/json',
             })
@@ -475,10 +530,12 @@ export const OpenEditionMinterCreator = ({
             console.log('Name: ', (offChainMetadataUploadDetails.openEditionMinterMetadataFile as File).name)
             const updatedMetadataFile = new File(
               [metadataFileBlob],
-              (offChainMetadataUploadDetails.openEditionMinterMetadataFile as File).name.substring(
-                0,
-                (offChainMetadataUploadDetails.openEditionMinterMetadataFile as File).name.lastIndexOf('.'),
-              ),
+              (offChainMetadataUploadDetails.openEditionMinterMetadataFile as File).name
+                .substring(
+                  0,
+                  (offChainMetadataUploadDetails.openEditionMinterMetadataFile as File).name.lastIndexOf('.'),
+                )
+                .replaceAll('#', ''),
               {
                 type: 'application/json',
               },
@@ -505,8 +562,8 @@ export const OpenEditionMinterCreator = ({
     })
   }
 
-  const instantiateOpenEditionMinter = async (uri: string, coverImageUri: string) => {
-    if (!wallet.initialized) throw new Error('Wallet not connected')
+  const instantiateOpenEditionMinter = async (uri: string, coverImageUri: string, thumbnailUri?: string) => {
+    if (!wallet.isWalletConnected) throw new Error('Wallet not connected')
     if (!openEditionFactoryContract) throw new Error('Contract not found')
     if (!openEditionMinterContract) throw new Error('Contract not found')
 
@@ -527,15 +584,18 @@ export const OpenEditionMinterCreator = ({
             extension:
               metadataStorageMethod === 'on-chain'
                 ? {
-                    image: uri,
+                    image:
+                      imageUploadDetails?.isThumbnailCompatible && imageUploadDetails.thumbnailFile
+                        ? thumbnailUri
+                        : uri,
                     name: onChainMetadataInputDetails?.name,
-                    description: onChainMetadataInputDetails?.description,
+                    description: onChainMetadataInputDetails?.description?.replaceAll('\\n', '\n'),
                     attributes: onChainMetadataInputDetails?.attributes,
                     external_url: onChainMetadataInputDetails?.external_url,
                     animation_url:
                       imageUploadDetails?.uploadMethod === 'existing'
                         ? onChainMetadataInputDetails?.animation_url
-                        : getAssetType(imageUploadDetails?.assetFile?.name as string) === 'video'
+                        : imageUploadDetails?.isThumbnailCompatible
                         ? uri
                         : undefined,
                     youtube_url: onChainMetadataInputDetails?.youtube_url,
@@ -552,12 +612,22 @@ export const OpenEditionMinterCreator = ({
           payment_address: mintingDetails?.paymentAddress || null,
         },
         collection_params: {
-          code_id: collectionDetails?.updatable ? SG721_OPEN_EDITION_UPDATABLE_CODE_ID : SG721_OPEN_EDITION_CODE_ID,
+          code_id: collectionDetails?.updatable
+            ? SG721_OPEN_EDITION_UPDATABLE_CODE_ID
+            : mintingDetails?.selectedMintToken?.displayName === 'USK' ||
+              mintingDetails?.selectedMintToken?.displayName === 'USDC' ||
+              mintingDetails?.selectedMintToken?.displayName === 'STRDST' ||
+              mintingDetails?.selectedMintToken?.displayName === 'KUJI' ||
+              mintingDetails?.selectedMintToken?.displayName === 'HUAHUA' ||
+              mintingDetails?.selectedMintToken?.displayName === 'BRNCH' ||
+              mintingDetails?.selectedMintToken?.displayName === 'CRBRUS'
+            ? STRDST_SG721_CODE_ID
+            : SG721_OPEN_EDITION_CODE_ID,
           name: collectionDetails?.name,
           symbol: collectionDetails?.symbol,
           info: {
             creator: wallet.address,
-            description: collectionDetails?.description,
+            description: collectionDetails?.description.replaceAll('\\n', '\n'),
             image: coverImageUri,
             explicit_content: collectionDetails?.explicit || false,
             royalty_info: royaltyInfo,
@@ -567,12 +637,10 @@ export const OpenEditionMinterCreator = ({
       },
     }
 
-    console.log('msg: ', msg)
-    console.log('Using factory address: ', factoryAddressForSelectedDenom)
     const payload: OpenEditionFactoryDispatchExecuteArgs = {
       contract: collectionDetails?.updatable ? updatableFactoryAddressForSelectedDenom : factoryAddressForSelectedDenom,
       messages: openEditionFactoryMessages,
-      txSigner: wallet.address,
+      txSigner: wallet.address || '',
       msg,
       funds: [
         coin(
@@ -627,6 +695,10 @@ export const OpenEditionMinterCreator = ({
       offChainMetadataUploadDetails: offChainMetadataUploadDetails ? offChainMetadataUploadDetails : undefined,
       mintingDetails: mintingDetails ? mintingDetails : undefined,
       metadataStorageMethod,
+      openEditionMinterContractAddress,
+      coverImageUrl,
+      tokenUri,
+      tokenImageUri,
     }
     onDetailsChange(data)
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -637,8 +709,19 @@ export const OpenEditionMinterCreator = ({
     onChainMetadataInputDetails,
     offChainMetadataUploadDetails,
     mintingDetails,
+    metadataStorageMethod,
+    openEditionMinterContractAddress,
+    coverImageUrl,
+    tokenUri,
+    tokenImageUri,
   ])
 
+  useEffect(() => {
+    if (importedOpenEditionMinterDetails) {
+      setMetadataStorageMethod(importedOpenEditionMinterDetails.metadataStorageMethod as MetadataStorageMethod)
+    }
+  }, [importedOpenEditionMinterDetails])
+
   return (
     <div>
       {/* TODO: Cancel once we're able to index on-chain metadata */}
@@ -686,16 +769,23 @@ export const OpenEditionMinterCreator = ({
           </div>
         </div>
       </Conditional>
-      <div className={clsx('my-4 mx-10')}>
+      <div className={clsx('my-0 mx-10')}>
         <Conditional test={metadataStorageMethod === 'off-chain'}>
           <div>
-            <OffChainMetadataUploadDetails onChange={setOffChainMetadataUploadDetails} />
+            <OffChainMetadataUploadDetails
+              importedOffChainMetadataUploadDetails={importedOpenEditionMinterDetails?.offChainMetadataUploadDetails}
+              onChange={setOffChainMetadataUploadDetails}
+            />
           </div>
         </Conditional>
         <Conditional test={metadataStorageMethod === 'on-chain'}>
           <div>
-            <ImageUploadDetails onChange={setImageUploadDetails} />
+            <ImageUploadDetails
+              importedImageUploadDetails={importedOpenEditionMinterDetails?.imageUploadDetails}
+              onChange={setImageUploadDetails}
+            />
             <OnChainMetadataInputDetails
+              importedOnChainMetadataInputDetails={importedOpenEditionMinterDetails?.onChainMetadataInputDetails}
               onChange={setOnChainMetadataInputDetails}
               uploadMethod={imageUploadDetails?.uploadMethod}
             />
@@ -709,6 +799,7 @@ export const OpenEditionMinterCreator = ({
               ? (offChainMetadataUploadDetails?.imageUrl as string)
               : (imageUploadDetails?.coverImageUrl as string)
           }
+          importedCollectionDetails={importedOpenEditionMinterDetails?.collectionDetails}
           metadataStorageMethod={metadataStorageMethod}
           onChange={setCollectionDetails}
           uploadMethod={
@@ -718,6 +809,7 @@ export const OpenEditionMinterCreator = ({
           }
         />
         <MintingDetails
+          importedMintingDetails={importedOpenEditionMinterDetails?.mintingDetails}
           minimumMintPrice={
             collectionDetails?.updatable
               ? Number(minimumUpdatableMintPrice) / 1000000
@@ -729,7 +821,10 @@ export const OpenEditionMinterCreator = ({
         />
       </div>
       <div className="my-6">
-        <RoyaltyDetails onChange={setRoyaltyDetails} />
+        <RoyaltyDetails
+          importedRoyaltyDetails={importedOpenEditionMinterDetails?.royaltyDetails}
+          onChange={setRoyaltyDetails}
+        />
       </div>
       <div className="flex justify-end w-full">
         <Button

components/openEdition/RoyaltyDetails.tsx

@@ -1,14 +1,15 @@
 import { Conditional } from 'components/Conditional'
 import { FormGroup } from 'components/FormGroup'
 import { useInputState } from 'components/forms/FormInput.hooks'
-import { useWallet } from 'contexts/wallet'
 import React, { useEffect, useState } from 'react'
 import { resolveAddress } from 'utils/resolveAddress'
+import { useWallet } from 'utils/wallet'
 
 import { NumberInput, TextInput } from '../forms/FormInput'
 
 interface RoyaltyDetailsProps {
   onChange: (data: RoyaltyDetailsDataProps) => void
+  importedRoyaltyDetails?: RoyaltyDetailsDataProps
 }
 
 export interface RoyaltyDetailsDataProps {
@@ -19,9 +20,10 @@ export interface RoyaltyDetailsDataProps {
 
 type RoyaltyState = 'none' | 'new'
 
-export const RoyaltyDetails = ({ onChange }: RoyaltyDetailsProps) => {
+export const RoyaltyDetails = ({ onChange, importedRoyaltyDetails }: RoyaltyDetailsProps) => {
   const wallet = useWallet()
   const [royaltyState, setRoyaltyState] = useState<RoyaltyState>('none')
+  const [royaltyDetailsImported, setRoyaltyDetailsImported] = useState(false)
 
   const royaltyPaymentAddressState = useInputState({
     id: 'royalty-payment-address',
@@ -40,26 +42,38 @@ export const RoyaltyDetails = ({ onChange }: RoyaltyDetailsProps) => {
   })
 
   useEffect(() => {
-    void resolveAddress(
-      royaltyPaymentAddressState.value
-        .toLowerCase()
-        .replace(/,/g, '')
-        .replace(/"/g, '')
-        .replace(/'/g, '')
-        .replace(/ /g, ''),
-      wallet,
-    ).then((royaltyPaymentAddress) => {
-      royaltyPaymentAddressState.onChange(royaltyPaymentAddress)
-      const data: RoyaltyDetailsDataProps = {
-        royaltyType: royaltyState,
-        paymentAddress: royaltyPaymentAddressState.value,
-        share: Number(royaltyShareState.value),
-      }
-      onChange(data)
-    })
+    if (!importedRoyaltyDetails || (importedRoyaltyDetails && royaltyDetailsImported)) {
+      void resolveAddress(
+        royaltyPaymentAddressState.value
+          .toLowerCase()
+          .replace(/,/g, '')
+          .replace(/"/g, '')
+          .replace(/'/g, '')
+          .replace(/ /g, ''),
+        wallet,
+      ).then((royaltyPaymentAddress) => {
+        royaltyPaymentAddressState.onChange(royaltyPaymentAddress)
+        const data: RoyaltyDetailsDataProps = {
+          royaltyType: royaltyState,
+          paymentAddress: royaltyPaymentAddressState.value,
+          share: Number(royaltyShareState.value),
+        }
+        onChange(data)
+      })
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [royaltyState, royaltyPaymentAddressState.value, royaltyShareState.value])
 
+  useEffect(() => {
+    if (importedRoyaltyDetails) {
+      setRoyaltyState(importedRoyaltyDetails.royaltyType)
+      royaltyPaymentAddressState.onChange(importedRoyaltyDetails.paymentAddress.toString())
+      royaltyShareState.onChange(importedRoyaltyDetails.share.toString())
+      setRoyaltyDetailsImported(true)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [importedRoyaltyDetails])
+
   return (
     <div className="py-3 px-8 mx-10 rounded border-2 border-white/20">
       <div className="flex justify-center">

config/authz.ts

@@ -0,0 +1,324 @@
+/* eslint-disable eslint-comments/disable-enable-pair */
+/* eslint-disable no-nested-ternary */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable camelcase */
+
+import { GenericAuthorization } from 'cosmjs-types/cosmos/authz/v1beta1/authz'
+import { MsgGrant } from 'cosmjs-types/cosmos/authz/v1beta1/tx'
+import { SendAuthorization } from 'cosmjs-types/cosmos/bank/v1beta1/authz'
+import { Coin } from 'cosmjs-types/cosmos/base/v1beta1/coin'
+import type { AuthorizationType } from 'cosmjs-types/cosmos/staking/v1beta1/authz'
+import { StakeAuthorization, StakeAuthorization_Validators } from 'cosmjs-types/cosmos/staking/v1beta1/authz'
+import {
+  AcceptedMessageKeysFilter,
+  AllowAllMessagesFilter,
+  CombinedLimit,
+  ContractExecutionAuthorization,
+  ContractMigrationAuthorization,
+  MaxCallsLimit,
+  MaxFundsLimit,
+} from 'cosmjs-types/cosmwasm/wasm/v1/authz'
+import type { AuthorizationMode, GenericAuthorizationType, GrantAuthorizationType } from 'pages/authz/grant'
+
+export interface Msg {
+  typeUrl: string
+  value: any
+}
+
+export interface AuthzMessage {
+  authzMode: AuthorizationMode
+  authzType: GrantAuthorizationType
+  displayName: string
+  typeUrl: string
+  genericAuthzType?: GenericAuthorizationType
+}
+
+export const grantGenericStakeAuthorization: AuthzMessage = {
+  authzMode: 'Grant',
+  authzType: 'Generic',
+  displayName: 'Stake',
+  typeUrl: '/cosmos.staking.v1beta1.MsgDelegate',
+  genericAuthzType: 'MsgDelegate',
+}
+
+export const grantGenericSendAuthorization: AuthzMessage = {
+  authzMode: 'Grant',
+  authzType: 'Generic',
+  displayName: 'Send',
+  typeUrl: '/cosmos.bank.v1beta1.MsgSend',
+  genericAuthzType: 'MsgSend',
+}
+
+export const authzMessages: AuthzMessage[] = [grantGenericStakeAuthorization, grantGenericSendAuthorization]
+
+const msgAuthzGrantTypeUrl = '/cosmos.authz.v1beta1.MsgGrant'
+
+export function AuthzSendGrantMsg(
+  granter: string,
+  grantee: string,
+  denom: string,
+  spendLimit: number,
+  expiration: number,
+  allowList?: string[],
+): Msg {
+  const sendAuthValue = SendAuthorization.encode(
+    SendAuthorization.fromPartial({
+      spendLimit: [
+        Coin.fromPartial({
+          amount: String(spendLimit),
+          denom,
+        }),
+      ],
+      // Needs cosmos-sdk >= 0.47
+      // allowList,
+    }),
+  ).finish()
+
+  const grantValue = MsgGrant.fromPartial({
+    grant: {
+      authorization: {
+        typeUrl: '/cosmos.bank.v1beta1.SendAuthorization',
+        value: sendAuthValue,
+      },
+      expiration: expiration ? { seconds: BigInt(expiration) } : undefined,
+    },
+    grantee,
+    granter,
+  })
+
+  return {
+    typeUrl: msgAuthzGrantTypeUrl,
+    value: grantValue,
+  }
+}
+
+export function AuthzExecuteContractGrantMsg(
+  granter: string,
+  grantee: string,
+  contract: string,
+  expiration: number,
+  callsRemaining?: number,
+  amounts?: Coin[],
+  allowedMessages?: string[],
+): Msg {
+  const sendAuthValue = ContractExecutionAuthorization.encode(
+    ContractExecutionAuthorization.fromPartial({
+      grants: [
+        {
+          contract,
+          filter: {
+            typeUrl: allowedMessages
+              ? '/cosmwasm.wasm.v1.AcceptedMessageKeysFilter'
+              : '/cosmwasm.wasm.v1.AllowAllMessagesFilter',
+            value: allowedMessages
+              ? AcceptedMessageKeysFilter.encode({ keys: allowedMessages }).finish()
+              : AllowAllMessagesFilter.encode({}).finish(),
+          },
+          limit:
+            callsRemaining || amounts
+              ? {
+                  typeUrl:
+                    callsRemaining && amounts
+                      ? '/cosmwasm.wasm.v1.CombinedLimit'
+                      : callsRemaining
+                      ? '/cosmwasm.wasm.v1.MaxCallsLimit'
+                      : '/cosmwasm.wasm.v1.MaxFundsLimit',
+                  value:
+                    callsRemaining && amounts
+                      ? CombinedLimit.encode({
+                          callsRemaining: BigInt(callsRemaining),
+                          amounts,
+                        }).finish()
+                      : callsRemaining
+                      ? MaxCallsLimit.encode({
+                          remaining: BigInt(callsRemaining),
+                        }).finish()
+                      : MaxFundsLimit.encode({
+                          amounts: amounts || [],
+                        }).finish(),
+                }
+              : {
+                  // limit: undefined is not accepted
+                  typeUrl: '/cosmwasm.wasm.v1.MaxCallsLimit',
+                  value: MaxCallsLimit.encode({
+                    remaining: BigInt(100000),
+                  }).finish(),
+                },
+        },
+      ],
+    }),
+  ).finish()
+
+  const grantValue = MsgGrant.fromPartial({
+    grant: {
+      authorization: {
+        typeUrl: '/cosmwasm.wasm.v1.ContractExecutionAuthorization',
+        value: sendAuthValue,
+      },
+      expiration: expiration ? { seconds: BigInt(expiration), nanos: 0 } : undefined,
+    },
+    grantee,
+    granter,
+  })
+
+  return {
+    typeUrl: msgAuthzGrantTypeUrl,
+    value: grantValue,
+  }
+}
+
+export function AuthzMigrateContractGrantMsg(
+  granter: string,
+  grantee: string,
+  contract: string,
+  expiration: number,
+  callsRemaining?: number,
+  amounts?: Coin[],
+  allowedMessages?: string[],
+): Msg {
+  const sendAuthValue = ContractMigrationAuthorization.encode(
+    ContractMigrationAuthorization.fromPartial({
+      grants: [
+        {
+          contract,
+          filter: {
+            typeUrl: allowedMessages
+              ? '/cosmwasm.wasm.v1.AcceptedMessageKeysFilter'
+              : '/cosmwasm.wasm.v1.AllowAllMessagesFilter',
+            value: allowedMessages
+              ? AcceptedMessageKeysFilter.encode({ keys: allowedMessages }).finish()
+              : AllowAllMessagesFilter.encode({}).finish(),
+          },
+          limit:
+            callsRemaining || amounts
+              ? {
+                  typeUrl:
+                    callsRemaining && amounts
+                      ? '/cosmwasm.wasm.v1.CombinedLimit'
+                      : callsRemaining
+                      ? '/cosmwasm.wasm.v1.MaxCallsLimit'
+                      : '/cosmwasm.wasm.v1.MaxFundsLimit',
+                  value:
+                    callsRemaining && amounts
+                      ? CombinedLimit.encode({
+                          callsRemaining: BigInt(callsRemaining),
+                          amounts,
+                        }).finish()
+                      : callsRemaining
+                      ? MaxCallsLimit.encode({
+                          remaining: BigInt(callsRemaining),
+                        }).finish()
+                      : MaxFundsLimit.encode({
+                          amounts: amounts || [],
+                        }).finish(),
+                }
+              : {
+                  // limit: undefined is not accepted
+                  typeUrl: '/cosmwasm.wasm.v1.MaxCallsLimit',
+                  value: MaxCallsLimit.encode({
+                    remaining: BigInt(100000),
+                  }).finish(),
+                },
+        },
+      ],
+    }),
+  ).finish()
+
+  const grantValue = MsgGrant.fromPartial({
+    grant: {
+      authorization: {
+        typeUrl: '/cosmwasm.wasm.v1.ContractMigrationAuthorization',
+        value: sendAuthValue,
+      },
+      expiration: expiration ? { seconds: BigInt(expiration), nanos: 0 } : undefined,
+    },
+    grantee,
+    granter,
+  })
+
+  return {
+    typeUrl: msgAuthzGrantTypeUrl,
+    value: grantValue,
+  }
+}
+
+export function AuthzGenericGrantMsg(granter: string, grantee: string, typeURL: string, expiration: number): Msg {
+  return {
+    typeUrl: msgAuthzGrantTypeUrl,
+    value: {
+      grant: {
+        authorization: {
+          typeUrl: '/cosmos.authz.v1beta1.GenericAuthorization',
+          value: GenericAuthorization.encode(
+            GenericAuthorization.fromPartial({
+              msg: typeURL,
+            }),
+          ).finish(),
+        },
+        expiration: expiration ? { seconds: expiration } : undefined,
+      },
+      grantee,
+      granter,
+    },
+  }
+}
+
+export function AuthzStakeGrantMsg({
+  expiration,
+  grantee,
+  granter,
+  allowList,
+  denyList,
+  maxTokens,
+  denom,
+  stakeAuthzType,
+}: {
+  granter: string
+  grantee: string
+  expiration: number
+  allowList?: string[]
+  denyList?: string[]
+  maxTokens?: string
+  denom?: string
+  stakeAuthzType: AuthorizationType
+}): Msg {
+  const allow_list = StakeAuthorization_Validators.encode(
+    StakeAuthorization_Validators.fromPartial({
+      address: allowList,
+    }),
+  ).finish()
+  const deny_list = StakeAuthorization_Validators.encode(
+    StakeAuthorization_Validators.fromPartial({
+      address: denyList,
+    }),
+  ).finish()
+  const stakeAuthValue = StakeAuthorization.encode(
+    StakeAuthorization.fromPartial({
+      authorizationType: stakeAuthzType,
+      allowList: allowList?.length ? StakeAuthorization_Validators.decode(allow_list) : undefined,
+      denyList: denyList?.length ? StakeAuthorization_Validators.decode(deny_list) : undefined,
+      maxTokens: maxTokens
+        ? Coin.fromPartial({
+            amount: maxTokens,
+            denom,
+          })
+        : undefined,
+    }),
+  ).finish()
+  const grantValue = MsgGrant.fromPartial({
+    grant: {
+      authorization: {
+        typeUrl: '/cosmos.staking.v1beta1.StakeAuthorization',
+        value: stakeAuthValue,
+      },
+      expiration: { seconds: BigInt(expiration) },
+    },
+    grantee,
+    granter,
+  })
+
+  return {
+    typeUrl: msgAuthzGrantTypeUrl,
+    value: grantValue,
+  }
+}

config/favicons.json

@@ -1,9 +1,9 @@
 {
   "path": "/assets/",
-  "appName": "StargazeStudio",
-  "appShortName": "StargazeStudio",
+  "appName": "Stargaze Studio",
+  "appShortName": "Stargaze Studio",
   "appDescription": "Stargaze Studio is built to provide useful smart contract interfaces that help you build and deploy your own NFT collection in no time.",
-  "developerName": "StargazeStudio",
+  "developerName": "Stargaze Studio",
   "developerURL": "https://",
   "background": "#FFC27D",
   "theme_color": "#FFC27D",

config/index.ts

@@ -1,3 +1,2 @@
 export * from './app'
-export * from './keplr'
 export * from './network'

config/keplr.ts

@@ -1,76 +0,0 @@
-import type { ChainInfo } from '@keplr-wallet/types'
-
-import type { AppConfig } from './app'
-
-export interface KeplrCoin {
-  readonly coinDenom: string
-  readonly coinMinimalDenom: string
-  readonly coinDecimals: number
-}
-
-export interface KeplrConfig {
-  readonly chainId: string
-  readonly chainName: string
-  readonly rpc: string
-  readonly rest?: string
-  readonly bech32Config: {
-    readonly bech32PrefixAccAddr: string
-    readonly bech32PrefixAccPub: string
-    readonly bech32PrefixValAddr: string
-    readonly bech32PrefixValPub: string
-    readonly bech32PrefixConsAddr: string
-    readonly bech32PrefixConsPub: string
-  }
-  readonly currencies: readonly KeplrCoin[]
-  readonly feeCurrencies: readonly KeplrCoin[]
-  readonly stakeCurrency: KeplrCoin
-  readonly gasPriceStep: {
-    readonly low: number
-    readonly average: number
-    readonly high: number
-  }
-  readonly bip44: { readonly coinType: number }
-  readonly coinType: number
-}
-
-export const keplrConfig = (config: AppConfig): ChainInfo => ({
-  chainId: config.chainId,
-  chainName: config.chainName,
-  rpc: config.rpcUrl,
-  rest: config.httpUrl!,
-  bech32Config: {
-    bech32PrefixAccAddr: `${config.addressPrefix}`,
-    bech32PrefixAccPub: `${config.addressPrefix}pub`,
-    bech32PrefixValAddr: `${config.addressPrefix}valoper`,
-    bech32PrefixValPub: `${config.addressPrefix}valoperpub`,
-    bech32PrefixConsAddr: `${config.addressPrefix}valcons`,
-    bech32PrefixConsPub: `${config.addressPrefix}valconspub`,
-  },
-  currencies: [
-    {
-      coinDenom: config.coinMap[config.feeToken].denom,
-      coinMinimalDenom: config.feeToken,
-      coinDecimals: config.coinMap[config.feeToken].fractionalDigits,
-    },
-  ],
-  feeCurrencies: [
-    {
-      coinDenom: config.coinMap[config.feeToken].denom,
-      coinMinimalDenom: config.feeToken,
-      coinDecimals: config.coinMap[config.feeToken].fractionalDigits,
-    },
-  ],
-  stakeCurrency: {
-    coinDenom: config.coinMap[config.stakingToken].denom,
-    coinMinimalDenom: config.stakingToken,
-    coinDecimals: config.coinMap[config.stakingToken].fractionalDigits,
-  },
-  gasPriceStep: {
-    low: config.gasPrice / 2,
-    average: config.gasPrice,
-    high: config.gasPrice * 2,
-  },
-  bip44: { coinType: 118 },
-  coinType: 118,
-  features: ['ibc-transfer', 'cosmwasm', 'ibc-go'],
-})

config/meta.ts

@@ -6,6 +6,6 @@ export const meta = {
   domain: 'stargaze.tools',
   url: faviconsJson.developerURL,
   twitter: {
-    username: '@stargazestudio',
+    username: '@StargazeZone',
   },
 }

config/minter.ts

@@ -1,12 +1,23 @@
 import {
+  FEATURED_VENDING_FACTORY_ADDRESS,
+  FEATURED_VENDING_FACTORY_FLEX_ADDRESS,
   OPEN_EDITION_FACTORY_ADDRESS,
   OPEN_EDITION_IBC_ATOM_FACTORY_ADDRESS,
+  OPEN_EDITION_IBC_CRBRUS_FACTORY_ADDRESS,
   OPEN_EDITION_IBC_FRNZ_FACTORY_ADDRESS,
+  OPEN_EDITION_IBC_HUAHUA_FACTORY_ADDRESS,
+  OPEN_EDITION_IBC_KUJI_FACTORY_ADDRESS,
+  OPEN_EDITION_IBC_NBTC_FACTORY_ADDRESS,
   OPEN_EDITION_IBC_USDC_FACTORY_ADDRESS,
+  OPEN_EDITION_IBC_USK_FACTORY_ADDRESS,
+  OPEN_EDITION_NATIVE_BRNCH_FACTORY_ADDRESS,
+  OPEN_EDITION_NATIVE_STRDST_FACTORY_ADDRESS,
   OPEN_EDITION_UPDATABLE_FACTORY_ADDRESS,
   OPEN_EDITION_UPDATABLE_IBC_ATOM_FACTORY_ADDRESS,
   OPEN_EDITION_UPDATABLE_IBC_FRNZ_FACTORY_ADDRESS,
+  OPEN_EDITION_UPDATABLE_IBC_NBTC_FACTORY_ADDRESS,
   OPEN_EDITION_UPDATABLE_IBC_USDC_FACTORY_ADDRESS,
+  OPEN_EDITION_UPDATABLE_IBC_USK_FACTORY_ADDRESS,
   VENDING_FACTORY_ADDRESS,
   VENDING_FACTORY_FLEX_ADDRESS,
   VENDING_FACTORY_UPDATABLE_ADDRESS,
@@ -15,14 +26,46 @@ import {
   VENDING_IBC_ATOM_FACTORY_FLEX_ADDRESS,
   VENDING_IBC_ATOM_UPDATABLE_FACTORY_ADDRESS,
   VENDING_IBC_ATOM_UPDATABLE_FACTORY_FLEX_ADDRESS,
+  VENDING_IBC_CRBRUS_FACTORY_ADDRESS,
+  VENDING_IBC_CRBRUS_FACTORY_FLEX_ADDRESS,
+  VENDING_IBC_HUAHUA_FACTORY_ADDRESS,
+  VENDING_IBC_HUAHUA_FACTORY_FLEX_ADDRESS,
+  VENDING_IBC_KUJI_FACTORY_ADDRESS,
+  VENDING_IBC_KUJI_FACTORY_FLEX_ADDRESS,
+  VENDING_IBC_NBTC_FACTORY_ADDRESS,
+  VENDING_IBC_NBTC_FACTORY_FLEX_ADDRESS,
+  VENDING_IBC_NBTC_UPDATABLE_FACTORY_ADDRESS,
+  VENDING_IBC_NBTC_UPDATABLE_FACTORY_FLEX_ADDRESS,
   VENDING_IBC_USDC_FACTORY_ADDRESS,
   VENDING_IBC_USDC_FACTORY_FLEX_ADDRESS,
   VENDING_IBC_USDC_UPDATABLE_FACTORY_ADDRESS,
   VENDING_IBC_USDC_UPDATABLE_FACTORY_FLEX_ADDRESS,
+  VENDING_IBC_USK_FACTORY_ADDRESS,
+  VENDING_IBC_USK_FACTORY_FLEX_ADDRESS,
+  VENDING_IBC_USK_UPDATABLE_FACTORY_ADDRESS,
+  VENDING_IBC_USK_UPDATABLE_FACTORY_FLEX_ADDRESS,
+  VENDING_NATIVE_BRNCH_FACTORY_ADDRESS,
+  VENDING_NATIVE_BRNCH_FLEX_FACTORY_ADDRESS,
+  VENDING_NATIVE_BRNCH_UPDATABLE_FACTORY_ADDRESS,
+  VENDING_NATIVE_STARDUST_FACTORY_ADDRESS,
+  VENDING_NATIVE_STARDUST_UPDATABLE_FACTORY_ADDRESS,
+  VENDING_NATIVE_STRDST_FLEX_FACTORY_ADDRESS,
 } from 'utils/constants'
 
 import type { TokenInfo } from './token'
-import { ibcAtom, ibcFrnz, ibcUsdc, stars } from './token'
+import {
+  ibcAtom,
+  ibcCrbrus,
+  ibcFrnz,
+  ibcHuahua,
+  ibcKuji,
+  ibcNbtc,
+  ibcUsdc,
+  ibcUsk,
+  nativeBrnch,
+  nativeStardust,
+  stars,
+} from './token'
 
 export interface MinterInfo {
   id: string
@@ -30,6 +73,7 @@ export interface MinterInfo {
   supportedToken: TokenInfo
   updatable?: boolean
   flexible?: boolean
+  featured?: boolean
 }
 
 export const openEditionStarsMinter: MinterInfo = {
@@ -37,6 +81,7 @@ export const openEditionStarsMinter: MinterInfo = {
   factoryAddress: OPEN_EDITION_FACTORY_ADDRESS,
   supportedToken: stars,
   updatable: false,
+  featured: false,
 }
 
 export const openEditionUpdatableStarsMinter: MinterInfo = {
@@ -44,6 +89,7 @@ export const openEditionUpdatableStarsMinter: MinterInfo = {
   factoryAddress: OPEN_EDITION_UPDATABLE_FACTORY_ADDRESS,
   supportedToken: stars,
   updatable: true,
+  featured: false,
 }
 
 export const openEditionIbcAtomMinter: MinterInfo = {
@@ -51,6 +97,7 @@ export const openEditionIbcAtomMinter: MinterInfo = {
   factoryAddress: OPEN_EDITION_IBC_ATOM_FACTORY_ADDRESS,
   supportedToken: ibcAtom,
   updatable: false,
+  featured: false,
 }
 
 export const openEditionUpdatableIbcAtomMinter: MinterInfo = {
@@ -58,6 +105,7 @@ export const openEditionUpdatableIbcAtomMinter: MinterInfo = {
   factoryAddress: OPEN_EDITION_UPDATABLE_IBC_ATOM_FACTORY_ADDRESS,
   supportedToken: ibcAtom,
   updatable: true,
+  featured: false,
 }
 
 export const openEditionIbcUsdcMinter: MinterInfo = {
@@ -65,6 +113,15 @@ export const openEditionIbcUsdcMinter: MinterInfo = {
   factoryAddress: OPEN_EDITION_IBC_USDC_FACTORY_ADDRESS,
   supportedToken: ibcUsdc,
   updatable: false,
+  featured: false,
+}
+
+export const openEditionIbcNbtcMinter: MinterInfo = {
+  id: 'open-edition-ibc-nbtc-minter',
+  factoryAddress: OPEN_EDITION_IBC_NBTC_FACTORY_ADDRESS,
+  supportedToken: ibcNbtc,
+  updatable: false,
+  featured: false,
 }
 
 export const openEditionUpdatableIbcUsdcMinter: MinterInfo = {
@@ -72,6 +129,15 @@ export const openEditionUpdatableIbcUsdcMinter: MinterInfo = {
   factoryAddress: OPEN_EDITION_UPDATABLE_IBC_USDC_FACTORY_ADDRESS,
   supportedToken: ibcUsdc,
   updatable: true,
+  featured: false,
+}
+
+export const openEditionUpdatableIbcNbtcMinter: MinterInfo = {
+  id: 'open-edition-updatable-ibc-nbtc-minter',
+  factoryAddress: OPEN_EDITION_UPDATABLE_IBC_NBTC_FACTORY_ADDRESS,
+  supportedToken: ibcNbtc,
+  updatable: true,
+  featured: false,
 }
 
 export const openEditionIbcFrnzMinter: MinterInfo = {
@@ -79,6 +145,7 @@ export const openEditionIbcFrnzMinter: MinterInfo = {
   factoryAddress: OPEN_EDITION_IBC_FRNZ_FACTORY_ADDRESS,
   supportedToken: ibcFrnz,
   updatable: false,
+  featured: false,
 }
 
 export const openEditionUpdatableIbcFrnzMinter: MinterInfo = {
@@ -86,6 +153,63 @@ export const openEditionUpdatableIbcFrnzMinter: MinterInfo = {
   factoryAddress: OPEN_EDITION_UPDATABLE_IBC_FRNZ_FACTORY_ADDRESS,
   supportedToken: ibcFrnz,
   updatable: true,
+  featured: false,
+}
+
+export const openEditionIbcUskMinter: MinterInfo = {
+  id: 'open-edition-ibc-usk-minter',
+  factoryAddress: OPEN_EDITION_IBC_USK_FACTORY_ADDRESS,
+  supportedToken: ibcUsk,
+  updatable: false,
+  featured: false,
+}
+
+export const openEditionUpdatableIbcUskMinter: MinterInfo = {
+  id: 'open-edition-updatable-ibc-usk-minter',
+  factoryAddress: OPEN_EDITION_UPDATABLE_IBC_USK_FACTORY_ADDRESS,
+  supportedToken: ibcUsk,
+  updatable: true,
+  featured: false,
+}
+
+export const openEditionIbcKujiMinter: MinterInfo = {
+  id: 'open-edition-ibc-kuji-minter',
+  factoryAddress: OPEN_EDITION_IBC_KUJI_FACTORY_ADDRESS,
+  supportedToken: ibcKuji,
+  updatable: false,
+  featured: false,
+}
+
+export const openEditionIbcHuahuaMinter: MinterInfo = {
+  id: 'open-edition-ibc-huahua-minter',
+  factoryAddress: OPEN_EDITION_IBC_HUAHUA_FACTORY_ADDRESS,
+  supportedToken: ibcHuahua,
+  updatable: false,
+  featured: false,
+}
+
+export const openEditionIbcCrbrusMinter: MinterInfo = {
+  id: 'open-edition-ibc-crbrus-minter',
+  factoryAddress: OPEN_EDITION_IBC_CRBRUS_FACTORY_ADDRESS,
+  supportedToken: ibcCrbrus,
+  updatable: false,
+  featured: false,
+}
+
+export const openEditionNativeStrdstMinter: MinterInfo = {
+  id: 'open-edition-native-strdst-minter',
+  factoryAddress: OPEN_EDITION_NATIVE_STRDST_FACTORY_ADDRESS,
+  supportedToken: nativeStardust,
+  updatable: false,
+  featured: false,
+}
+
+export const openEditionNativeBrnchMinter: MinterInfo = {
+  id: 'open-edition-native-brnch-minter',
+  factoryAddress: OPEN_EDITION_NATIVE_BRNCH_FACTORY_ADDRESS,
+  supportedToken: nativeBrnch,
+  updatable: false,
+  featured: false,
 }
 
 export const openEditionMinterList = [
@@ -97,6 +221,15 @@ export const openEditionMinterList = [
   openEditionUpdatableIbcFrnzMinter,
   openEditionIbcUsdcMinter,
   openEditionUpdatableIbcUsdcMinter,
+  openEditionIbcNbtcMinter,
+  openEditionUpdatableIbcNbtcMinter,
+  openEditionIbcUskMinter,
+  openEditionUpdatableIbcUskMinter,
+  openEditionIbcKujiMinter,
+  openEditionIbcHuahuaMinter,
+  openEditionIbcCrbrusMinter,
+  openEditionNativeStrdstMinter,
+  openEditionNativeBrnchMinter,
 ]
 
 export const vendingStarsMinter: MinterInfo = {
@@ -105,6 +238,16 @@ export const vendingStarsMinter: MinterInfo = {
   supportedToken: stars,
   updatable: false,
   flexible: false,
+  featured: false,
+}
+
+export const vendingFeaturedStarsMinter: MinterInfo = {
+  id: 'vending-stars-minter',
+  factoryAddress: FEATURED_VENDING_FACTORY_ADDRESS,
+  supportedToken: stars,
+  updatable: false,
+  flexible: false,
+  featured: true,
 }
 
 export const vendingUpdatableStarsMinter: MinterInfo = {
@@ -113,6 +256,7 @@ export const vendingUpdatableStarsMinter: MinterInfo = {
   supportedToken: stars,
   updatable: true,
   flexible: false,
+  featured: false,
 }
 
 export const vendingIbcAtomMinter: MinterInfo = {
@@ -121,6 +265,7 @@ export const vendingIbcAtomMinter: MinterInfo = {
   supportedToken: ibcAtom,
   updatable: false,
   flexible: false,
+  featured: false,
 }
 
 export const vendingUpdatableIbcAtomMinter: MinterInfo = {
@@ -129,6 +274,7 @@ export const vendingUpdatableIbcAtomMinter: MinterInfo = {
   supportedToken: ibcAtom,
   updatable: true,
   flexible: false,
+  featured: false,
 }
 
 export const vendingIbcUsdcMinter: MinterInfo = {
@@ -137,6 +283,16 @@ export const vendingIbcUsdcMinter: MinterInfo = {
   supportedToken: ibcUsdc,
   updatable: false,
   flexible: false,
+  featured: false,
+}
+
+export const vendingIbcNbtcMinter: MinterInfo = {
+  id: 'vending-ibc-nbtc-minter',
+  factoryAddress: VENDING_IBC_NBTC_FACTORY_ADDRESS,
+  supportedToken: ibcNbtc,
+  updatable: false,
+  flexible: false,
+  featured: false,
 }
 
 export const vendingUpdatableIbcUsdcMinter: MinterInfo = {
@@ -145,15 +301,118 @@ export const vendingUpdatableIbcUsdcMinter: MinterInfo = {
   supportedToken: ibcUsdc,
   updatable: true,
   flexible: false,
+  featured: false,
+}
+
+export const vendingUpdatableIbcNbtcMinter: MinterInfo = {
+  id: 'vending-updatable-ibc-nbtc-minter',
+  factoryAddress: VENDING_IBC_NBTC_UPDATABLE_FACTORY_ADDRESS,
+  supportedToken: ibcNbtc,
+  updatable: true,
+  flexible: false,
+  featured: false,
+}
+
+export const vendingIbcUskMinter: MinterInfo = {
+  id: 'vending-ibc-usk-minter',
+  factoryAddress: VENDING_IBC_USK_FACTORY_ADDRESS,
+  supportedToken: ibcUsk,
+  updatable: false,
+  flexible: false,
+  featured: false,
+}
+
+export const vendingUpdatableIbcUskMinter: MinterInfo = {
+  id: 'vending-updatable-ibc-usk-minter',
+  factoryAddress: VENDING_IBC_USK_UPDATABLE_FACTORY_ADDRESS,
+  supportedToken: ibcUsk,
+  updatable: true,
+  flexible: false,
+  featured: false,
+}
+
+export const vendingIbcKujiMinter: MinterInfo = {
+  id: 'vending-ibc-kuji-minter',
+  factoryAddress: VENDING_IBC_KUJI_FACTORY_ADDRESS,
+  supportedToken: ibcKuji,
+  updatable: false,
+  flexible: false,
+  featured: false,
+}
+
+export const vendingIbcHuahuaMinter: MinterInfo = {
+  id: 'vending-ibc-huahua-minter',
+  factoryAddress: VENDING_IBC_HUAHUA_FACTORY_ADDRESS,
+  supportedToken: ibcHuahua,
+  updatable: false,
+  flexible: false,
+  featured: false,
+}
+
+export const vendingIbcCrbrusMinter: MinterInfo = {
+  id: 'vending-ibc-crbrus-minter',
+  factoryAddress: VENDING_IBC_CRBRUS_FACTORY_ADDRESS,
+  supportedToken: ibcCrbrus,
+  updatable: false,
+  flexible: false,
+  featured: false,
+}
+
+export const vendingNativeStardustMinter: MinterInfo = {
+  id: 'vending-native-stardust-minter',
+  factoryAddress: VENDING_NATIVE_STARDUST_FACTORY_ADDRESS,
+  supportedToken: nativeStardust,
+  updatable: false,
+  flexible: false,
+  featured: false,
+}
+
+export const vendingUpdatableNativeStardustMinter: MinterInfo = {
+  id: 'vending-native-stardust-minter',
+  factoryAddress: VENDING_NATIVE_STARDUST_UPDATABLE_FACTORY_ADDRESS,
+  supportedToken: nativeStardust,
+  updatable: true,
+  flexible: false,
+  featured: false,
+}
+
+export const vendingNativeBrnchMinter: MinterInfo = {
+  id: 'vending-native-brnch-minter',
+  factoryAddress: VENDING_NATIVE_BRNCH_FACTORY_ADDRESS,
+  supportedToken: nativeBrnch,
+  updatable: false,
+  flexible: false,
+  featured: false,
+}
+
+export const vendingUpdatableNativeBrnchMinter: MinterInfo = {
+  id: 'vending-native-brnch-minter',
+  factoryAddress: VENDING_NATIVE_BRNCH_UPDATABLE_FACTORY_ADDRESS,
+  supportedToken: nativeBrnch,
+  updatable: true,
+  flexible: false,
+  featured: false,
 }
 
 export const vendingMinterList = [
   vendingStarsMinter,
+  vendingFeaturedStarsMinter,
   vendingUpdatableStarsMinter,
   vendingIbcAtomMinter,
   vendingUpdatableIbcAtomMinter,
   vendingIbcUsdcMinter,
   vendingUpdatableIbcUsdcMinter,
+  vendingIbcNbtcMinter,
+  vendingUpdatableIbcNbtcMinter,
+  vendingIbcUskMinter,
+  vendingUpdatableIbcUskMinter,
+  vendingIbcKujiMinter,
+  vendingIbcHuahuaMinter,
+  vendingIbcCrbrusMinter,
+  vendingNativeStardustMinter,
+  vendingUpdatableNativeStardustMinter,
+  vendingNativeBrnchMinter,
+  vendingUpdatableNativeBrnchMinter,
 ]
 
 export const flexibleVendingStarsMinter: MinterInfo = {
@@ -162,6 +421,16 @@ export const flexibleVendingStarsMinter: MinterInfo = {
   supportedToken: stars,
   updatable: false,
   flexible: true,
+  featured: false,
+}
+
+export const flexibleFeaturedVendingStarsMinter: MinterInfo = {
+  id: 'flexible-vending-stars-minter',
+  factoryAddress: FEATURED_VENDING_FACTORY_FLEX_ADDRESS,
+  supportedToken: stars,
+  updatable: false,
+  flexible: true,
+  featured: true,
 }
 
 export const flexibleVendingUpdatableStarsMinter: MinterInfo = {
@@ -170,6 +439,7 @@ export const flexibleVendingUpdatableStarsMinter: MinterInfo = {
   supportedToken: stars,
   updatable: true,
   flexible: true,
+  featured: false,
 }
 
 export const flexibleVendingIbcAtomMinter: MinterInfo = {
@@ -178,6 +448,7 @@ export const flexibleVendingIbcAtomMinter: MinterInfo = {
   supportedToken: ibcAtom,
   updatable: false,
   flexible: true,
+  featured: false,
 }
 
 export const flexibleVendingUpdatableIbcAtomMinter: MinterInfo = {
@@ -186,6 +457,7 @@ export const flexibleVendingUpdatableIbcAtomMinter: MinterInfo = {
   supportedToken: ibcAtom,
   updatable: true,
   flexible: true,
+  featured: false,
 }
 
 export const flexibleVendingIbcUsdcMinter: MinterInfo = {
@@ -194,6 +466,16 @@ export const flexibleVendingIbcUsdcMinter: MinterInfo = {
   supportedToken: ibcUsdc,
   updatable: false,
   flexible: true,
+  featured: false,
+}
+
+export const flexibleVendingIbcNbtcMinter: MinterInfo = {
+  id: 'flexible-vending-ibc-nbtc-minter',
+  factoryAddress: VENDING_IBC_NBTC_FACTORY_FLEX_ADDRESS,
+  supportedToken: ibcNbtc,
+  updatable: false,
+  flexible: true,
+  featured: false,
 }
 
 export const flexibleVendingUpdatableIbcUsdcMinter: MinterInfo = {
@@ -202,13 +484,96 @@ export const flexibleVendingUpdatableIbcUsdcMinter: MinterInfo = {
   supportedToken: ibcUsdc,
   updatable: true,
   flexible: true,
+  featured: false,
+}
+
+export const flexibleVendingUpdatableIbcNbtcMinter: MinterInfo = {
+  id: 'flexible-vending-updatable-ibc-nbtc-minter',
+  factoryAddress: VENDING_IBC_NBTC_UPDATABLE_FACTORY_FLEX_ADDRESS,
+  supportedToken: ibcNbtc,
+  updatable: true,
+  flexible: true,
+  featured: false,
+}
+
+export const flexibleVendingIbcUskMinter: MinterInfo = {
+  id: 'flexible-vending-ibc-usk-minter',
+  factoryAddress: VENDING_IBC_USK_FACTORY_FLEX_ADDRESS,
+  supportedToken: ibcUsk,
+  updatable: false,
+  flexible: true,
+  featured: false,
+}
+
+export const flexibleVendingUpdatableIbcUskMinter: MinterInfo = {
+  id: 'flexible-vending-updatable-ibc-usk-minter',
+  factoryAddress: VENDING_IBC_USK_UPDATABLE_FACTORY_FLEX_ADDRESS,
+  supportedToken: ibcUsk,
+  updatable: true,
+  flexible: true,
+  featured: false,
+}
+
+export const flexibleVendingIbcKujiMinter: MinterInfo = {
+  id: 'flexible-vending-ibc-kuji-minter',
+  factoryAddress: VENDING_IBC_KUJI_FACTORY_FLEX_ADDRESS,
+  supportedToken: ibcKuji,
+  updatable: false,
+  flexible: true,
+  featured: false,
+}
+
+export const flexibleVendingIbcHuahuaMinter: MinterInfo = {
+  id: 'flexible-vending-ibc-huahua-minter',
+  factoryAddress: VENDING_IBC_HUAHUA_FACTORY_FLEX_ADDRESS,
+  supportedToken: ibcHuahua,
+  updatable: false,
+  flexible: true,
+  featured: false,
+}
+
+export const flexibleVendingIbcCrbrusMinter: MinterInfo = {
+  id: 'flexible-vending-ibc-crbrus-minter',
+  factoryAddress: VENDING_IBC_CRBRUS_FACTORY_FLEX_ADDRESS,
+  supportedToken: ibcCrbrus,
+  updatable: false,
+  flexible: true,
+  featured: false,
+}
+
+export const flexibleVendingStrdstMinter: MinterInfo = {
+  id: 'flexible-vending-native-strdst-minter',
+  factoryAddress: VENDING_NATIVE_STRDST_FLEX_FACTORY_ADDRESS,
+  supportedToken: nativeStardust,
+  updatable: false,
+  flexible: true,
+  featured: false,
+}
+
+export const flexibleVendingBrnchMinter: MinterInfo = {
+  id: 'flexible-vending-native-brnch-minter',
+  factoryAddress: VENDING_NATIVE_BRNCH_FLEX_FACTORY_ADDRESS,
+  supportedToken: nativeBrnch,
+  updatable: false,
+  flexible: true,
+  featured: false,
 }
 
 export const flexibleVendingMinterList = [
   flexibleVendingStarsMinter,
+  flexibleFeaturedVendingStarsMinter,
   flexibleVendingUpdatableStarsMinter,
   flexibleVendingIbcAtomMinter,
   flexibleVendingUpdatableIbcAtomMinter,
   flexibleVendingIbcUsdcMinter,
   flexibleVendingUpdatableIbcUsdcMinter,
+  flexibleVendingIbcNbtcMinter,
+  flexibleVendingUpdatableIbcNbtcMinter,
+  flexibleVendingIbcUskMinter,
+  flexibleVendingUpdatableIbcUskMinter,
+  flexibleVendingIbcKujiMinter,
+  flexibleVendingIbcHuahuaMinter,
+  flexibleVendingIbcCrbrusMinter,
+  flexibleVendingStrdstMinter,
+  flexibleVendingBrnchMinter,
 ]

config/network.ts

@@ -5,6 +5,7 @@ export const mainnetConfig: AppConfig = {
   chainName: 'Stargaze',
   addressPrefix: 'stars',
   rpcUrl: 'https://rpc.stargaze-apis.com/',
+  httpUrl: 'https://rest.stargaze-apis.com/',
   feeToken: 'ustars',
   stakingToken: 'ustars',
   coinMap: {

config/token.ts

@@ -1,3 +1,5 @@
+import { NETWORK } from 'utils/constants'
+
 export interface TokenInfo {
   id: string
   denom: string
@@ -23,16 +25,100 @@ export const ibcAtom: TokenInfo = {
 
 export const ibcUsdc: TokenInfo = {
   id: 'ibc-usdc',
-  denom: 'ibc/D189335C6E4A68B513C10AB227BF1C1D38C746766278BA3EEB4FB14124F1D858',
+  denom:
+    NETWORK === 'mainnet'
+      ? 'ibc/4A1C18CA7F50544760CF306189B810CE4C1CB156C7FC870143D401FE7280E591'
+      : 'factory/stars1paqkeyluuw47pflgwwqaaj8y679zj96aatg5a7/uusdc',
   displayName: 'USDC',
   decimalPlaces: 6,
 }
+export const ibcUsk: TokenInfo = {
+  id: 'ibc-usk',
+  denom:
+    NETWORK === 'mainnet'
+      ? 'ibc/938CEB62ABCBA6366AA369A8362E310B2A0B1A54835E4F3FF01D69D860959128'
+      : 'factory/stars153w5xhuqu3et29lgqk4dsynj6gjn96lr33wx4e/uusk',
+  displayName: 'USK',
+  decimalPlaces: 6,
+}
+
+export const ibcKuji: TokenInfo = {
+  id: 'ibc-kuji',
+  denom:
+    NETWORK === 'mainnet'
+      ? 'ibc/0E57658B71E9CC4BB0F6FE3E01712966713B49E6FD292E6B66E3F111B103D361'
+      : 'factory/stars153w5xhuqu3et29lgqk4dsynj6gjn96lr33wx4e/ukuji',
+  displayName: 'KUJI',
+  decimalPlaces: 6,
+}
 
 export const ibcFrnz: TokenInfo = {
   id: 'ibc-frnz',
-  denom: 'ibc/7FA7EC64490E3BDE5A1A28CBE73CC0AD22522794957BC891C46321E3A6074DB9',
+  denom:
+    NETWORK === 'mainnet'
+      ? 'ibc/9C40A8368C0E1CAA4144DBDEBBCE2E7A5CC2D128F0A9F785ECB71ECFF575114C'
+      : 'factory/stars1paqkeyluuw47pflgwwqaaj8y679zj96aatg5a7/ufrienzies',
   displayName: 'FRNZ',
   decimalPlaces: 6,
 }
 
-export const tokensList = [stars, ibcAtom, ibcUsdc, ibcFrnz]
+export const ibcNbtc: TokenInfo = {
+  id: 'ibc-nBTC',
+  denom: NETWORK === 'mainnet' ? 'Not available' : 'factory/stars153w5xhuqu3et29lgqk4dsynj6gjn96lr33wx4e/unbtc',
+  displayName: 'nBTC',
+  decimalPlaces: 6,
+}
+
+export const ibcHuahua: TokenInfo = {
+  id: 'ibc-huahua',
+  denom:
+    NETWORK === 'mainnet'
+      ? 'ibc/CAD8A9F306CAAC55731C66930D6BEE539856DD12E59061C965E44D82AA26A0E7'
+      : 'factory/stars153w5xhuqu3et29lgqk4dsynj6gjn96lr33wx4e/uhuahua',
+  displayName: 'HUAHUA',
+  decimalPlaces: 6,
+}
+
+export const ibcCrbrus: TokenInfo = {
+  id: 'ibc-crbrus',
+  denom:
+    NETWORK === 'mainnet'
+      ? 'ibc/71CEEB5CC09F75A3ACDC417108C14514351B6B2A540ACE9B37A80BF930845134'
+      : 'factory/stars153w5xhuqu3et29lgqk4dsynj6gjn96lr33wx4e/uCRBRUS',
+  displayName: 'CRBRUS',
+  decimalPlaces: 6,
+}
+
+export const nativeStardust: TokenInfo = {
+  id: 'native-strdst',
+  denom:
+    NETWORK === 'mainnet'
+      ? 'factory/stars16da2uus9zrsy83h23ur42v3lglg5rmyrpqnju4/dust'
+      : 'factory/stars18vxuarvh44wxltxqsyac36972nvaqc377sdh40/dust',
+  displayName: 'STRDST',
+  decimalPlaces: 6,
+}
+
+export const nativeBrnch: TokenInfo = {
+  id: 'native-brnch',
+  denom:
+    NETWORK === 'mainnet'
+      ? 'factory/stars16da2uus9zrsy83h23ur42v3lglg5rmyrpqnju4/uBRNCH'
+      : 'factory/stars153w5xhuqu3et29lgqk4dsynj6gjn96lr33wx4e/uBRNCH',
+  displayName: 'BRNCH',
+  decimalPlaces: 6,
+}
+
+export const tokensList = [
+  stars,
+  ibcAtom,
+  ibcUsdc,
+  ibcUsk,
+  ibcFrnz,
+  ibcNbtc,
+  ibcKuji,
+  ibcHuahua,
+  ibcCrbrus,
+  nativeStardust,
+  nativeBrnch,
+]

contexts/collection.ts

@@ -1,4 +1,4 @@
-import create from 'zustand'
+import { create } from 'zustand'
 
 export const useCollectionStore = create(() => ({
   name: 'Example',

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'
@@ -16,8 +18,7 @@ import type { UseWhiteListContractProps } from 'contracts/whitelist'
 import { useWhiteListContract } from 'contracts/whitelist'
 import type { ReactNode, VFC } from 'react'
 import { Fragment, useEffect } from 'react'
-import type { State } from 'zustand'
-import create from 'zustand'
+import { create } from 'zustand'
 
 import type { UseSplitsContractProps } from '../contracts/splits/useContract'
 import { useSplitsContract } from '../contracts/splits/useContract'
@@ -25,7 +26,7 @@ import { useSplitsContract } from '../contracts/splits/useContract'
 /**
  * Contracts store type definitions
  */
-export interface ContractsStore extends State {
+export interface ContractsStore {
   sg721: UseSG721ContractProps | null
   vendingMinter: UseVendingMinterContractProps | null
   baseMinter: UseBaseMinterContractProps | null
@@ -36,6 +37,7 @@ export interface ContractsStore extends State {
   openEditionFactory: UseOpenEditionFactoryContractProps | null
   badgeHub: UseBadgeHubContractProps | null
   splits: UseSplitsContractProps | null
+  royaltyRegistry: UseRoyaltyRegistryContractProps | null
 }
 
 /**
@@ -52,6 +54,7 @@ export const defaultValues: ContractsStore = {
   openEditionFactory: null,
   badgeHub: null,
   splits: null,
+  royaltyRegistry: null,
 }
 
 /**
@@ -85,6 +88,7 @@ const ContractsSubscription: VFC = () => {
   const openEditionFactory = useOpenEditionFactoryContract()
   const badgeHub = useBadgeHubContract()
   const splits = useSplitsContract()
+  const royaltyRegistry = useRoyaltyRegistryContract()
 
   useEffect(() => {
     useContracts.setState({
@@ -98,8 +102,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
 }

contexts/globalSettings.ts

@@ -0,0 +1,11 @@
+import { create } from 'zustand'
+
+export type Timezone = 'UTC' | 'Local'
+
+export const useGlobalSettings = create(() => ({
+  timezone: 'UTC' as Timezone,
+}))
+
+export const setTimezone = (timezone: Timezone) => {
+  useGlobalSettings.setState({ timezone })
+}

contexts/log.ts

@@ -1,4 +1,4 @@
-import create from 'zustand'
+import { create } from 'zustand'
 
 export interface LogItem {
   id: string

contexts/sidebar.ts

@@ -1,4 +1,4 @@
-import create from 'zustand'
+import { create } from 'zustand'
 
 export const useSidebarStore = create(() => ({ isOpen: true }))
 

contexts/wallet.tsx

@@ -1,289 +0,0 @@
-import { SigningCosmWasmClient } from '@cosmjs/cosmwasm-stargate'
-import { Decimal } from '@cosmjs/math'
-import type { OfflineSigner } from '@cosmjs/proto-signing'
-import type { Coin } from '@cosmjs/stargate'
-import type { AppConfig } from 'config'
-import { getConfig, keplrConfig } from 'config'
-import type { ReactNode } from 'react'
-import { useEffect } from 'react'
-import { toast } from 'react-hot-toast'
-import { createTrackedSelector } from 'react-tracked'
-import { NETWORK } from 'utils/constants'
-import type { State } from 'zustand'
-import create from 'zustand'
-import { subscribeWithSelector } from 'zustand/middleware'
-
-export interface KeplrWalletStore extends State {
-  accountNumber: number
-  address: string
-  balance: Coin[]
-  client: SigningCosmWasmClient | undefined
-  config: AppConfig
-  initialized: boolean
-  initializing: boolean
-  name: string
-  network: string
-  signer: OfflineSigner | undefined
-
-  readonly clear: () => void
-
-  readonly connect: (walletChange?: boolean | 'focus') => Promise<void>
-
-  readonly disconnect: () => void | Promise<void>
-
-  readonly getClient: () => SigningCosmWasmClient
-  readonly getSigner: () => OfflineSigner
-
-  readonly init: (signer?: OfflineSigner) => void
-
-  readonly refreshBalance: (address?: string, balance?: Coin[]) => Promise<void>
-
-  readonly setNetwork: (network: string) => void
-
-  readonly updateSigner: (singer: OfflineSigner) => void
-
-  readonly setQueryClient: () => void
-}
-
-/**
- * Compatibility export for references still using `WalletContextType`
- *
- * @deprecated replace with {@link KeplrWalletStore}
- */
-export type WalletContextType = KeplrWalletStore
-
-/**
- * Keplr wallet store default values as a separate variable for reusability
- */
-const defaultStates = {
-  accountNumber: 0,
-  address: '',
-  balance: [],
-  client: undefined,
-  config: getConfig(NETWORK),
-  initialized: false,
-  initializing: true,
-  name: '',
-  network: NETWORK,
-  signer: undefined,
-}
-
-/**
- * Entrypoint for keplr wallet store using {@link defaultStates}
- */
-export const useWalletStore = create(
-  subscribeWithSelector<KeplrWalletStore>((set, get) => ({
-    ...defaultStates,
-    clear: () => set({ ...defaultStates }),
-    connect: async (walletChange = false) => {
-      try {
-        if (walletChange !== 'focus') set({ initializing: true })
-        const { config, init } = get()
-        const signer = await loadKeplrWallet(config)
-        init(signer)
-        if (walletChange) set({ initializing: false })
-      } catch (err: any) {
-        toast.error(err?.message, { style: { maxWidth: 'none' } })
-        set({ initializing: false })
-      }
-    },
-    disconnect: () => {
-      window.localStorage.clear()
-      get().clear()
-      set({ initializing: false })
-    },
-    getClient: () => get().client!,
-    getSigner: () => get().signer!,
-    init: (signer) => set({ signer }),
-    refreshBalance: async (address = get().address, balance = get().balance) => {
-      const { client, config } = get()
-      if (!client) return
-      balance.length = 0
-      for (const denom in config.coinMap) {
-        // eslint-disable-next-line no-await-in-loop
-        const coin = await client.getBalance(address, denom)
-        if (coin) balance.push(coin)
-      }
-      set({ balance })
-    },
-    setNetwork: (network) => set({ network }),
-    updateSigner: (signer) => set({ signer }),
-    setQueryClient: async () => {
-      try {
-        const client = (await createQueryClient()) as SigningCosmWasmClient
-        set({ client })
-      } catch (err: any) {
-        toast.error(err?.message, { style: { maxWidth: 'none' } })
-        set({ initializing: false })
-      }
-    },
-  })),
-)
-
-/**
- * Proxied keplr wallet store which only rerenders on called state values.
- *
- * Recommended if only consuming state; to set states, use {@link useWalletStore.setState}.
- *
- * @example
- *
- * ```ts
- * // this will rerender if any state values has changed
- * const { name } = useWalletStore()
- *
- * // this will rerender if only `name` has changed
- * const { name } = useWallet()
- * ```
- */
-export const useWallet = createTrackedSelector<KeplrWalletStore>(useWalletStore)
-
-/**
- * Keplr wallet store provider to easily mount {@link WalletSubscription}
- * to listen/subscribe various state changes.
- *
- */
-export const WalletProvider = ({ children }: { children: ReactNode }) => {
-  return (
-    <>
-      {children}
-      <WalletSubscription />
-    </>
-  )
-}
-
-/**
- * Keplr wallet subscriptions (side effects)
- */
-const WalletSubscription = () => {
-  /**
-   * Dispatch reconnecting wallet on first mount and register events to refresh
-   * on keystore change and window refocus.
-   *
-   */
-  useEffect(() => {
-    const walletAddress = window.localStorage.getItem('wallet_address')
-    if (walletAddress) {
-      void useWalletStore.getState().connect()
-    } else {
-      useWalletStore.setState({ initializing: false })
-      useWalletStore.getState().setQueryClient()
-    }
-
-    const listenChange = () => {
-      void useWalletStore.getState().connect(true)
-    }
-    const listenFocus = () => {
-      if (walletAddress) void useWalletStore.getState().connect('focus')
-    }
-
-    window.addEventListener('keplr_keystorechange', listenChange)
-    window.addEventListener('focus', listenFocus)
-
-    return () => {
-      window.removeEventListener('keplr_keystorechange', listenChange)
-      window.removeEventListener('focus', listenFocus)
-    }
-  }, [])
-
-  /**
-   * Watch signer changes to initialize client state.
-   *
-   */
-  useEffect(() => {
-    return useWalletStore.subscribe(
-      (x) => x.signer,
-      // eslint-disable-next-line @typescript-eslint/no-misused-promises
-      async (signer) => {
-        try {
-          if (!signer) {
-            useWalletStore.setState({
-              client: (await createQueryClient()) as SigningCosmWasmClient,
-            })
-          } else {
-            useWalletStore.setState({
-              client: await createClient({ signer }),
-            })
-          }
-        } catch (error) {
-          console.log(error)
-        }
-      },
-    )
-  }, [])
-
-  /**
-   * Watch client changes to refresh balance and sync wallet states.
-   *
-   */
-  useEffect(() => {
-    return useWalletStore.subscribe(
-      (x) => x.client,
-      // eslint-disable-next-line @typescript-eslint/no-misused-promises
-      async (client) => {
-        const { config, refreshBalance, signer } = useWalletStore.getState()
-        if (!signer || !client) return
-        if (!window.keplr) {
-          throw new Error('window.keplr not found')
-        }
-        const balance: Coin[] = []
-        const address = (await signer.getAccounts())[0].address
-        const account = await client.getAccount(address)
-        const key = await window.keplr.getKey(config.chainId)
-        await refreshBalance(address, balance)
-        window.localStorage.setItem('wallet_address', address)
-        useWalletStore.setState({
-          accountNumber: account?.accountNumber || 0,
-          address,
-          balance,
-          initialized: true,
-          initializing: false,
-          name: key.name || '',
-        })
-      },
-    )
-  }, [])
-
-  return null
-}
-
-/**
- * Function to create signing client based on {@link useWalletStore} resolved
- * config state.
- *
- * @param arg - Object argument requiring `signer`
- */
-const createClient = ({ signer }: { signer: OfflineSigner }) => {
-  const { config } = useWalletStore.getState()
-  return SigningCosmWasmClient.connectWithSigner(config.rpcUrl, signer, {
-    gasPrice: {
-      amount: Decimal.fromUserInput('0.0025', 100),
-      denom: config.feeToken,
-    },
-  })
-}
-
-const createQueryClient = () => {
-  const { config } = useWalletStore.getState()
-  return SigningCosmWasmClient.connect(config.rpcUrl)
-}
-
-/**
- * Function to load keplr wallet signer.
- *
- * @param config - Application configuration
- */
-const loadKeplrWallet = async (config: AppConfig) => {
-  if (!window.getOfflineSigner || !window.keplr || !window.getOfflineSignerAuto) {
-    throw new Error('Keplr extension is not available')
-  }
-
-  await window.keplr.experimentalSuggestChain(keplrConfig(config))
-  await window.keplr.enable(config.chainId)
-
-  const signer = await window.getOfflineSignerAuto(config.chainId)
-  Object.assign(signer, {
-    signAmino: (signer as any).signAmino ?? (signer as any).sign,
-  })
-
-  return signer
-}

contracts/badgeHub/useContract.ts

@@ -1,7 +1,7 @@
 import type { Coin } from '@cosmjs/proto-signing'
 import type { logs } from '@cosmjs/stargate'
-import { useWallet } from 'contexts/wallet'
 import { useCallback, useEffect, useState } from 'react'
+import { useWallet } from 'utils/wallet'
 
 import type { BadgeHubContract, BadgeHubInstance, BadgeHubMessages, MigrateResponse } from './contract'
 import { badgeHub as initContract } from './contract'
@@ -50,9 +50,19 @@ export function useBadgeHubContract(): UseBadgeHubContractProps {
   }, [])
 
   useEffect(() => {
-    const BadgeHubBaseContract = initContract(wallet.getClient(), wallet.address)
-    setBadgeHub(BadgeHubBaseContract)
-  }, [wallet])
+    if (!wallet.isWalletConnected) {
+      return
+    }
+
+    const load = async () => {
+      const client = await wallet.getSigningCosmWasmClient()
+      const BadgeHubBaseContract = initContract(client, wallet.address || '')
+      setBadgeHub(BadgeHubBaseContract)
+    }
+
+    load().catch(console.error)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [wallet.isWalletConnected, wallet.address])
 
   const updateContractAddress = (contractAddress: string) => {
     setAddress(contractAddress)
@@ -65,7 +75,10 @@ export function useBadgeHubContract(): UseBadgeHubContractProps {
           reject(new Error('Contract is not initialized.'))
           return
         }
-        badgeHub.instantiate(wallet.address, codeId, initMsg, label, admin).then(resolve).catch(reject)
+        badgeHub
+          .instantiate(wallet.address || '', codeId, initMsg, label, admin)
+          .then(resolve)
+          .catch(reject)
       })
     },
     [badgeHub, wallet],
@@ -79,7 +92,10 @@ export function useBadgeHubContract(): UseBadgeHubContractProps {
           return
         }
         console.log(wallet.address, contractAddress, codeId)
-        badgeHub.migrate(wallet.address, contractAddress, codeId, migrateMsg).then(resolve).catch(reject)
+        badgeHub
+          .migrate(wallet.address || '', contractAddress, codeId, migrateMsg)
+          .then(resolve)
+          .catch(reject)
       })
     },
     [badgeHub, wallet],

contracts/baseFactory/useContract.ts

@@ -1,5 +1,5 @@
-import { useWallet } from 'contexts/wallet'
 import { useCallback, useEffect, useState } from 'react'
+import { useWallet } from 'utils/wallet'
 
 import type { BaseFactoryContract, BaseFactoryInstance, BaseFactoryMessages } from './contract'
 import { baseFactory as initContract } from './contract'
@@ -22,9 +22,19 @@ export function useBaseFactoryContract(): UseBaseFactoryContractProps {
   }, [])
 
   useEffect(() => {
-    const BaseFactoryBaseContract = initContract(wallet.getClient(), wallet.address)
-    setBaseFactory(BaseFactoryBaseContract)
-  }, [wallet])
+    if (!wallet.isWalletConnected) {
+      return
+    }
+
+    const load = async () => {
+      const client = await wallet.getSigningCosmWasmClient()
+      const BaseFactoryBaseContract = initContract(client, wallet.address || '')
+      setBaseFactory(BaseFactoryBaseContract)
+    }
+
+    load().catch(console.error)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [wallet.isWalletConnected, wallet.address])
 
   const updateContractAddress = (contractAddress: string) => {
     setAddress(contractAddress)

contracts/baseMinter/contract.ts

@@ -33,13 +33,13 @@ export interface BaseMinterInstance {
   //Execute
   mint: (senderAddress: string, tokenUri: string) => Promise<string>
   updateStartTradingTime: (senderAddress: string, time?: Timestamp) => Promise<string>
-  batchMint: (senderAddress: string, recipient: string, batchCount: number) => Promise<string>
+  batchMint: (senderAddress: string, recipient: string, batchCount: number, startFrom: number) => Promise<string>
 }
 
 export interface BaseMinterMessages {
   mint: (tokenUri: string) => MintMessage
   updateStartTradingTime: (time: Timestamp) => UpdateStartTradingTimeMessage
-  batchMint: (recipient: string, batchNumber: number) => CustomMessage
+  batchMint: (recipient: string, batchNumber: number, startFrom: number) => CustomMessage
 }
 
 export interface MintMessage {
@@ -178,7 +178,12 @@ export const baseMinter = (client: SigningCosmWasmClient, txSigner: string): Bas
       return res.transactionHash
     }
 
-    const batchMint = async (senderAddress: string, baseUri: string, batchCount: number): Promise<string> => {
+    const batchMint = async (
+      senderAddress: string,
+      baseUri: string,
+      batchCount: number,
+      startFrom: number,
+    ): Promise<string> => {
       const txHash = await getConfig().then(async (response) => {
         const factoryParameters = await toast.promise(getFactoryParameters(response?.config?.factory), {
           loading: 'Querying Factory Parameters...',
@@ -198,7 +203,7 @@ export const baseMinter = (client: SigningCosmWasmClient, txSigner: string): Bas
         const executeContractMsgs: MsgExecuteContractEncodeObject[] = []
         for (let i = 0; i < batchCount; i++) {
           const msg = {
-            mint: { token_uri: `${baseUri}/${i + 1}` },
+            mint: { token_uri: `${baseUri}/${i + startFrom}` },
           }
           const executeContractMsg: MsgExecuteContractEncodeObject = {
             typeUrl: '/cosmwasm.wasm.v1.MsgExecuteContract',
@@ -282,10 +287,10 @@ export const baseMinter = (client: SigningCosmWasmClient, txSigner: string): Bas
       }
     }
 
-    const batchMint = (baseUri: string, batchCount: number): CustomMessage => {
+    const batchMint = (baseUri: string, batchCount: number, startFrom: number): CustomMessage => {
       const msg: Record<string, unknown>[] = []
       for (let i = 0; i < batchCount; i++) {
-        msg.push({ mint: { token_uri: `${baseUri}/${i + 1}` } })
+        msg.push({ mint: { token_uri: `${baseUri}/${i + startFrom}` } })
       }
       return {
         sender: txSigner,

contracts/baseMinter/useContract.ts

@@ -1,7 +1,7 @@
 import type { Coin } from '@cosmjs/proto-signing'
 import type { logs } from '@cosmjs/stargate'
-import { useWallet } from 'contexts/wallet'
 import { useCallback, useEffect, useState } from 'react'
+import { useWallet } from 'utils/wallet'
 
 import type { BaseMinterContract, BaseMinterInstance, BaseMinterMessages, MigrateResponse } from './contract'
 import { baseMinter as initContract } from './contract'
@@ -38,9 +38,19 @@ export function useBaseMinterContract(): UseBaseMinterContractProps {
   }, [])
 
   useEffect(() => {
-    const BaseMinterBaseContract = initContract(wallet.getClient(), wallet.address)
-    setBaseMinter(BaseMinterBaseContract)
-  }, [wallet])
+    if (!wallet.isWalletConnected) {
+      return
+    }
+
+    const load = async () => {
+      const client = await wallet.getSigningCosmWasmClient()
+      const BaseMinterBaseContract = initContract(client, wallet.address || '')
+      setBaseMinter(BaseMinterBaseContract)
+    }
+
+    load().catch(console.error)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [wallet.isWalletConnected, wallet.address])
 
   const updateContractAddress = (contractAddress: string) => {
     setAddress(contractAddress)
@@ -53,7 +63,10 @@ export function useBaseMinterContract(): UseBaseMinterContractProps {
           reject(new Error('Contract is not initialized.'))
           return
         }
-        baseMinter.instantiate(wallet.address, codeId, initMsg, label, admin).then(resolve).catch(reject)
+        baseMinter
+          .instantiate(wallet.address || '', codeId, initMsg, label, admin)
+          .then(resolve)
+          .catch(reject)
       })
     },
     [baseMinter, wallet],
@@ -67,7 +80,10 @@ export function useBaseMinterContract(): UseBaseMinterContractProps {
           return
         }
         console.log(wallet.address, contractAddress, codeId)
-        baseMinter.migrate(wallet.address, contractAddress, codeId, migrateMsg).then(resolve).catch(reject)
+        baseMinter
+          .migrate(wallet.address || '', contractAddress, codeId, migrateMsg)
+          .then(resolve)
+          .catch(reject)
       })
     },
     [baseMinter, wallet],

contracts/openEditionFactory/useContract.ts

@@ -1,6 +1,6 @@
 import type { logs } from '@cosmjs/stargate'
-import { useWallet } from 'contexts/wallet'
 import { useCallback, useEffect, useState } from 'react'
+import { useWallet } from 'utils/wallet'
 
 import type { OpenEditionFactoryContract, OpenEditionFactoryInstance, OpenEditionFactoryMessages } from './contract'
 import { openEditionFactory as initContract } from './contract'
@@ -41,9 +41,19 @@ export function useOpenEditionFactoryContract(): UseOpenEditionFactoryContractPr
   }, [])
 
   useEffect(() => {
-    const OpenEditionFactoryBaseContract = initContract(wallet.getClient(), wallet.address)
-    setOpenEditionFactory(OpenEditionFactoryBaseContract)
-  }, [wallet])
+    if (!wallet.isWalletConnected) {
+      return
+    }
+
+    const load = async () => {
+      const client = await wallet.getSigningCosmWasmClient()
+      const OpenEditionFactoryBaseContract = initContract(client, wallet.address || '')
+      setOpenEditionFactory(OpenEditionFactoryBaseContract)
+    }
+
+    load().catch(console.error)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [wallet.isWalletConnected, wallet.address])
 
   const updateContractAddress = (contractAddress: string) => {
     setAddress(contractAddress)

contracts/openEditionMinter/useContract.ts

@@ -1,7 +1,7 @@
 import type { Coin } from '@cosmjs/proto-signing'
 import type { logs } from '@cosmjs/stargate'
-import { useWallet } from 'contexts/wallet'
 import { useCallback, useEffect, useState } from 'react'
+import { useWallet } from 'utils/wallet'
 
 import type {
   MigrateResponse,
@@ -55,9 +55,19 @@ export function useOpenEditionMinterContract(): UseOpenEditionMinterContractProp
   }, [])
 
   useEffect(() => {
-    const OpenEditionMinterBaseContract = initContract(wallet.getClient(), wallet.address)
-    setOpenEditionMinter(OpenEditionMinterBaseContract)
-  }, [wallet])
+    if (!wallet.isWalletConnected) {
+      return
+    }
+
+    const load = async () => {
+      const client = await wallet.getSigningCosmWasmClient()
+      const OpenEditionMinterBaseContract = initContract(client, wallet.address || '')
+      setOpenEditionMinter(OpenEditionMinterBaseContract)
+    }
+
+    load().catch(console.error)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [wallet.isWalletConnected, wallet.address])
 
   const updateContractAddress = (contractAddress: string) => {
     setAddress(contractAddress)
@@ -70,7 +80,10 @@ export function useOpenEditionMinterContract(): UseOpenEditionMinterContractProp
           reject(new Error('Contract is not initialized.'))
           return
         }
-        openEditionMinter.instantiate(wallet.address, codeId, initMsg, label, admin).then(resolve).catch(reject)
+        openEditionMinter
+          .instantiate(wallet.address || '', codeId, initMsg, label, admin)
+          .then(resolve)
+          .catch(reject)
       })
     },
     [openEditionMinter, wallet],
@@ -84,7 +97,10 @@ export function useOpenEditionMinterContract(): UseOpenEditionMinterContractProp
           return
         }
         console.log(wallet.address, contractAddress, codeId)
-        openEditionMinter.migrate(wallet.address, contractAddress, codeId, migrateMsg).then(resolve).catch(reject)
+        openEditionMinter
+          .migrate(wallet.address || '', contractAddress, codeId, migrateMsg)
+          .then(resolve)
+          .catch(reject)
       })
     },
     [openEditionMinter, wallet],

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 Default Collection Royalty',
+    description: 'Set default collection royalty for unknown protocols',
+  },
+  {
+    id: 'update_collection_royalty_default',
+    name: 'Update Default Collection Royalty',
+    description: 'Update default collection royalty for unknown protocols',
+  },
+  {
+    id: 'set_collection_royalty_protocol',
+    name: 'Set Protocol Collection Royalty',
+    description: 'Set collection royalty for a specific protocol',
+  },
+  {
+    id: 'update_collection_royalty_protocol',
+    name: 'Update Protocol Collection Royalty',
+    description: 'Update collection royalty for a specific 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,112 @@
+/* eslint-disable eslint-comments/disable-enable-pair */
+
+import { useCallback, useEffect, useState } from 'react'
+import { useWallet } from 'utils/wallet'
+
+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(() => {
+    if (!wallet.isWalletConnected) {
+      return
+    }
+
+    const load = async () => {
+      const client = await wallet.getSigningCosmWasmClient()
+      const royaltyRegistryContract = initContract(client, wallet.address || '')
+      setRoyaltyRegistry(royaltyRegistryContract)
+    }
+
+    load().catch(console.error)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [wallet.isWalletConnected, wallet.address])
+
+  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,
+  }
+}

contracts/sg721/contract.ts

@@ -3,6 +3,7 @@ import { toBase64, toUtf8 } from '@cosmjs/encoding'
 import type { Coin, logs } from '@cosmjs/stargate'
 import { coin } from '@cosmjs/stargate'
 import { MsgExecuteContract } from 'cosmjs-types/cosmwasm/wasm/v1/tx'
+import type { AirdropAllocation } from 'utils/isValidAccountsFile'
 
 import type { RoyaltyInfo } from '../vendingMinter/contract'
 
@@ -86,6 +87,7 @@ export interface SG721Instance {
   burn: (tokenId: string) => Promise<string>
   batchBurn: (tokenIds: string) => Promise<string>
   batchTransfer: (recipient: string, tokenIds: string) => Promise<string>
+  batchTransferMultiAddress: (senderAddress: string, tokenRecipients: AirdropAllocation[]) => Promise<string>
   updateTokenMetadata: (tokenId: string, tokenURI: string) => Promise<string>
   batchUpdateTokenMetadata: (tokenIds: string, tokenURI: string, jsonExtensions: boolean) => Promise<string>
   freezeTokenMetadata: () => Promise<string>
@@ -103,6 +105,7 @@ export interface Sg721Messages {
   burn: (tokenId: string) => BurnMessage
   batchBurn: (tokenIds: string) => BatchBurnMessage
   batchTransfer: (recipient: string, tokenIds: string) => BatchTransferMessage
+  batchTransferMultiAddress: (tokenRecipients: AirdropAllocation[]) => BatchTransferMultiAddressMessage
   updateCollectionInfo: (collectionInfo: CollectionInfo) => UpdateCollectionInfoMessage
   freezeCollectionInfo: () => FreezeCollectionInfoMessage
   updateTokenMetadata: (tokenId: string, tokenURI: string) => UpdateTokenMetadataMessage
@@ -227,6 +230,13 @@ export interface BatchTransferMessage {
   funds: Coin[]
 }
 
+export interface BatchTransferMultiAddressMessage {
+  sender: string
+  contract: string
+  msg: Record<string, unknown>[]
+  funds: Coin[]
+}
+
 export interface UpdateTokenMetadataMessage {
   sender: string
   contract: string
@@ -601,6 +611,37 @@ export const SG721 = (client: SigningCosmWasmClient, txSigner: string): SG721Con
       return res.transactionHash
     }
 
+    const batchTransferMultiAddress = async (
+      senderAddress: string,
+      recipients: AirdropAllocation[],
+    ): Promise<string> => {
+      const executeContractMsgs: MsgExecuteContractEncodeObject[] = []
+      for (let i = 0; i < recipients.length; i++) {
+        const msg = {
+          transfer_nft: { recipient: recipients[i].address, token_id: recipients[i].tokenId as string },
+        }
+        const executeContractMsg: MsgExecuteContractEncodeObject = {
+          typeUrl: '/cosmwasm.wasm.v1.MsgExecuteContract',
+          value: MsgExecuteContract.fromPartial({
+            sender: senderAddress,
+            contract: contractAddress,
+            msg: toUtf8(JSON.stringify(msg)),
+          }),
+        }
+
+        executeContractMsgs.push(executeContractMsg)
+      }
+
+      const res = await client.signAndBroadcast(
+        senderAddress,
+        executeContractMsgs,
+        'auto',
+        'batch transfer to multiple recipients',
+      )
+
+      return res.transactionHash
+    }
+
     // eslint-disable-next-line @typescript-eslint/no-shadow
     const updateCollectionInfo = async (collectionInfo: CollectionInfo): Promise<string> => {
       const res = await client.execute(
@@ -719,7 +760,7 @@ export const SG721 = (client: SigningCosmWasmClient, txSigner: string): SG721Con
         },
         'auto',
         '',
-        [coin('500000000', 'ustars')],
+        [coin('2000000000', 'ustars')],
       )
       return res.transactionHash
     }
@@ -748,6 +789,7 @@ export const SG721 = (client: SigningCosmWasmClient, txSigner: string): SG721Con
       burn,
       batchBurn,
       batchTransfer,
+      batchTransferMultiAddress,
       updateCollectionInfo,
       freezeCollectionInfo,
       updateTokenMetadata,
@@ -950,6 +992,19 @@ export const SG721 = (client: SigningCosmWasmClient, txSigner: string): SG721Con
       }
     }
 
+    const batchTransferMultiAddress = (recipients: AirdropAllocation[]): BatchTransferMultiAddressMessage => {
+      const msg: Record<string, unknown>[] = []
+      for (let i = 0; i < recipients.length; i++) {
+        msg.push({ transfer_nft: { recipient: recipients[i].address, token_id: recipients[i].tokenId } })
+      }
+      return {
+        sender: txSigner,
+        contract: contractAddress,
+        msg,
+        funds: [],
+      }
+    }
+
     const batchUpdateTokenMetadata = (
       tokenIds: string,
       baseURI: string,
@@ -1018,7 +1073,7 @@ export const SG721 = (client: SigningCosmWasmClient, txSigner: string): SG721Con
         msg: {
           enable_updatable: {},
         },
-        funds: [coin('500000000', 'ustars')],
+        funds: [coin('2000000000', 'ustars')],
       }
     }
 
@@ -1055,6 +1110,7 @@ export const SG721 = (client: SigningCosmWasmClient, txSigner: string): SG721Con
       burn,
       batchBurn,
       batchTransfer,
+      batchTransferMultiAddress,
       updateCollectionInfo,
       freezeCollectionInfo,
       updateTokenMetadata,

contracts/sg721/useContract.ts

@@ -1,6 +1,6 @@
 import type { Coin } from '@cosmjs/proto-signing'
-import { useWallet } from 'contexts/wallet'
 import { useCallback, useEffect, useState } from 'react'
+import { useWallet } from 'utils/wallet'
 
 import type { MigrateResponse, SG721Contract, SG721Instance, Sg721Messages } from './contract'
 import { SG721 as initContract } from './contract'
@@ -35,9 +35,19 @@ export function useSG721Contract(): UseSG721ContractProps {
   }, [])
 
   useEffect(() => {
-    const contract = initContract(wallet.getClient(), wallet.address)
-    setSG721(contract)
-  }, [wallet])
+    if (!wallet.isWalletConnected) {
+      return
+    }
+
+    const load = async () => {
+      const client = await wallet.getSigningCosmWasmClient()
+      const contract = initContract(client, wallet.address || '')
+      setSG721(contract)
+    }
+
+    load().catch(console.error)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [wallet.isWalletConnected, wallet.address])
 
   const updateContractAddress = (contractAddress: string) => {
     setAddress(contractAddress)
@@ -50,7 +60,9 @@ export function useSG721Contract(): UseSG721ContractProps {
           reject(new Error('Contract is not initialized.'))
           return
         }
-        SG721.instantiate(wallet.address, codeId, initMsg, label, admin).then(resolve).catch(reject)
+        SG721.instantiate(wallet.address || '', codeId, initMsg, label, admin)
+          .then(resolve)
+          .catch(reject)
       })
     },
     [SG721, wallet],
@@ -64,7 +76,9 @@ export function useSG721Contract(): UseSG721ContractProps {
           return
         }
         console.log(wallet.address, contractAddress, codeId)
-        SG721.migrate(wallet.address, contractAddress, codeId, migrateMsg).then(resolve).catch(reject)
+        SG721.migrate(wallet.address || '', contractAddress, codeId, migrateMsg)
+          .then(resolve)
+          .catch(reject)
       })
     },
     [SG721, wallet],

contracts/splits/useContract.ts

@@ -1,7 +1,7 @@
 /* eslint-disable eslint-comments/disable-enable-pair */
 
-import { useWallet } from 'contexts/wallet'
 import { useCallback, useEffect, useState } from 'react'
+import { useWallet } from 'utils/wallet'
 
 import type { InstantiateResponse, MigrateResponse, SplitsContract, SplitsInstance, SplitsMessages } from './contract'
 import { Splits as initContract } from './contract'
@@ -34,9 +34,19 @@ export function useSplitsContract(): UseSplitsContractProps {
   }, [])
 
   useEffect(() => {
-    const splitsContract = initContract(wallet.getClient(), wallet.address)
-    setSplits(splitsContract)
-  }, [wallet])
+    if (!wallet.isWalletConnected) {
+      return
+    }
+
+    const load = async () => {
+      const client = await wallet.getSigningCosmWasmClient()
+      const contract = initContract(client, wallet.address || '')
+      setSplits(contract)
+    }
+
+    load().catch(console.error)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [wallet.isWalletConnected, wallet.address])
 
   const updateContractAddress = (contractAddress: string) => {
     setAddress(contractAddress)
@@ -63,7 +73,10 @@ export function useSplitsContract(): UseSplitsContractProps {
           return
         }
         console.log(wallet.address, contractAddress, codeId)
-        splits.migrate(wallet.address, contractAddress, codeId, migrateMsg).then(resolve).catch(reject)
+        splits
+          .migrate(wallet.address || '', contractAddress, codeId, migrateMsg)
+          .then(resolve)
+          .catch(reject)
       })
     },
     [splits, wallet],

contracts/vendingFactory/useContract.ts

@@ -1,6 +1,6 @@
 import type { logs } from '@cosmjs/stargate'
-import { useWallet } from 'contexts/wallet'
 import { useCallback, useEffect, useState } from 'react'
+import { useWallet } from 'utils/wallet'
 
 import type { VendingFactoryContract, VendingFactoryInstance, VendingFactoryMessages } from './contract'
 import { vendingFactory as initContract } from './contract'
@@ -41,9 +41,19 @@ export function useVendingFactoryContract(): UseVendingFactoryContractProps {
   }, [])
 
   useEffect(() => {
-    const VendingFactoryBaseContract = initContract(wallet.getClient(), wallet.address)
-    setVendingFactory(VendingFactoryBaseContract)
-  }, [wallet])
+    if (!wallet.isWalletConnected) {
+      return
+    }
+
+    const load = async () => {
+      const client = await wallet.getSigningCosmWasmClient()
+      const contract = initContract(client, wallet.address || '')
+      setVendingFactory(contract)
+    }
+
+    load().catch(console.error)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [wallet.isWalletConnected, wallet.address])
 
   const updateContractAddress = (contractAddress: string) => {
     setAddress(contractAddress)

contracts/vendingMinter/useContract.ts

@@ -1,7 +1,7 @@
 import type { Coin } from '@cosmjs/proto-signing'
 import type { logs } from '@cosmjs/stargate'
-import { useWallet } from 'contexts/wallet'
 import { useCallback, useEffect, useState } from 'react'
+import { useWallet } from 'utils/wallet'
 
 import type { MigrateResponse, VendingMinterContract, VendingMinterInstance, VendingMinterMessages } from './contract'
 import { vendingMinter as initContract } from './contract'
@@ -50,9 +50,19 @@ export function useVendingMinterContract(): UseVendingMinterContractProps {
   }, [])
 
   useEffect(() => {
-    const VendingMinterBaseContract = initContract(wallet.getClient(), wallet.address)
-    setVendingMinter(VendingMinterBaseContract)
-  }, [wallet])
+    if (!wallet.isWalletConnected) {
+      return
+    }
+
+    const load = async () => {
+      const client = await wallet.getSigningCosmWasmClient()
+      const contract = initContract(client, wallet.address || '')
+      setVendingMinter(contract)
+    }
+
+    load().catch(console.error)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [wallet.isWalletConnected, wallet.address])
 
   const updateContractAddress = (contractAddress: string) => {
     setAddress(contractAddress)
@@ -65,7 +75,10 @@ export function useVendingMinterContract(): UseVendingMinterContractProps {
           reject(new Error('Contract is not initialized.'))
           return
         }
-        vendingMinter.instantiate(wallet.address, codeId, initMsg, label, admin).then(resolve).catch(reject)
+        vendingMinter
+          .instantiate(wallet.address || '', codeId, initMsg, label, admin)
+          .then(resolve)
+          .catch(reject)
       })
     },
     [vendingMinter, wallet],
@@ -79,7 +92,10 @@ export function useVendingMinterContract(): UseVendingMinterContractProps {
           return
         }
         console.log(wallet.address, contractAddress, codeId)
-        vendingMinter.migrate(wallet.address, contractAddress, codeId, migrateMsg).then(resolve).catch(reject)
+        vendingMinter
+          .migrate(wallet.address || '', contractAddress, codeId, migrateMsg)
+          .then(resolve)
+          .catch(reject)
       })
     },
     [vendingMinter, wallet],

contracts/whitelist/messages/query.ts

@@ -32,10 +32,12 @@ export interface DispatchQueryProps {
   messages: WhiteListInstance | undefined
   type: QueryType
   address: string
+  startAfter?: string
+  limit?: number
 }
 
 export const dispatchQuery = (props: DispatchQueryProps) => {
-  const { messages, type, address } = props
+  const { messages, type, address, startAfter, limit } = props
   switch (type) {
     case 'has_started':
       return messages?.hasStarted()
@@ -44,7 +46,7 @@ export const dispatchQuery = (props: DispatchQueryProps) => {
     case 'is_active':
       return messages?.isActive()
     case 'members':
-      return messages?.members()
+      return messages?.members(startAfter, limit)
     case 'admin_list':
       return messages?.adminList()
     case 'has_member':

contracts/whitelist/useContract.ts

@@ -1,5 +1,5 @@
-import { useWallet } from 'contexts/wallet'
 import { useCallback, useEffect, useState } from 'react'
+import { useWallet } from 'utils/wallet'
 
 import type { InstantiateResponse, WhiteListContract, WhiteListInstance, WhitelistMessages } from './contract'
 import { WhiteList as initContract } from './contract'
@@ -30,9 +30,19 @@ export function useWhiteListContract(): UseWhiteListContractProps {
   }, [])
 
   useEffect(() => {
-    const whiteListContract = initContract(wallet.getClient(), wallet.address)
-    setWhiteList(whiteListContract)
-  }, [wallet])
+    if (!wallet.isWalletConnected) {
+      return
+    }
+
+    const load = async () => {
+      const client = await wallet.getSigningCosmWasmClient()
+      const contract = initContract(client, wallet.address || '')
+      setWhiteList(contract)
+    }
+
+    load().catch(console.error)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [wallet.isWalletConnected, wallet.address])
 
   const updateContractAddress = (contractAddress: string) => {
     setAddress(contractAddress)

env.d.ts

@@ -16,6 +16,8 @@ declare namespace NodeJS {
 
     readonly NEXT_PUBLIC_SG721_CODE_ID: string
     readonly NEXT_PUBLIC_SG721_UPDATABLE_CODE_ID: string
+    readonly NEXT_PUBLIC_STRDST_SG721_CODE_ID: string
+    readonly NEXT_PUBLIC_BASE_FACTORY_SG721_CODE_ID: string
     readonly NEXT_PUBLIC_OPEN_EDITION_SG721_CODE_ID: string
     readonly NEXT_PUBLIC_OPEN_EDITION_SG721_UPDATABLE_CODE_ID: string
     readonly NEXT_PUBLIC_WHITELIST_CODE_ID: string
@@ -23,29 +25,70 @@ declare namespace NodeJS {
     readonly NEXT_PUBLIC_VENDING_MINTER_CODE_ID: string
     readonly NEXT_PUBLIC_VENDING_MINTER_FLEX_CODE_ID: string
     readonly NEXT_PUBLIC_VENDING_FACTORY_ADDRESS: string
+    readonly NEXT_PUBLIC_FEATURED_VENDING_FACTORY_ADDRESS: string
     readonly NEXT_PUBLIC_VENDING_FACTORY_UPDATABLE_ADDRESS: string
     readonly NEXT_PUBLIC_VENDING_FACTORY_FLEX_ADDRESS: string
+    readonly NEXT_PUBLIC_FEATURED_VENDING_FACTORY_FLEX_ADDRESS: string
     readonly NEXT_PUBLIC_VENDING_FACTORY_UPDATABLE_FLEX_ADDRESS: string
     readonly NEXT_PUBLIC_VENDING_IBC_ATOM_FACTORY_ADDRESS: string
     readonly NEXT_PUBLIC_VENDING_IBC_ATOM_UPDATABLE_FACTORY_ADDRESS: string
     readonly NEXT_PUBLIC_VENDING_IBC_USDC_FACTORY_ADDRESS: string
     readonly NEXT_PUBLIC_VENDING_IBC_USDC_UPDATABLE_FACTORY_ADDRESS: string
+    readonly NEXT_PUBLIC_VENDING_IBC_NBTC_FACTORY_ADDRESS: string
+    readonly NEXT_PUBLIC_VENDING_IBC_NBTC_UPDATABLE_FACTORY_ADDRESS: string
+    readonly NEXT_PUBLIC_VENDING_IBC_USK_FACTORY_ADDRESS: string
+    readonly NEXT_PUBLIC_VENDING_IBC_USK_UPDATABLE_FACTORY_ADDRESS: string
+    readonly NEXT_PUBLIC_VENDING_IBC_KUJI_FACTORY_ADDRESS: string
+    readonly NEXT_PUBLIC_VENDING_IBC_KUJI_UPDATABLE_FACTORY_ADDRESS: string
+    readonly NEXT_PUBLIC_VENDING_IBC_HUAHUA_FACTORY_ADDRESS: string
+    readonly NEXT_PUBLIC_VENDING_IBC_HUAHUA_UPDATABLE_FACTORY_ADDRESS: string
+    readonly NEXT_PUBLIC_VENDING_IBC_CRBRUS_FACTORY_ADDRESS: string
+    readonly NEXT_PUBLIC_VENDING_IBC_CRBRUS_UPDATABLE_FACTORY_ADDRESS: string
     readonly NEXT_PUBLIC_VENDING_IBC_ATOM_FACTORY_FLEX_ADDRESS: string
     readonly NEXT_PUBLIC_VENDING_IBC_ATOM_UPDATABLE_FACTORY_FLEX_ADDRESS: string
     readonly NEXT_PUBLIC_VENDING_IBC_USDC_FACTORY_FLEX_ADDRESS: string
     readonly NEXT_PUBLIC_VENDING_IBC_USDC_UPDATABLE_FACTORY_FLEX_ADDRESS: string
+    readonly NEXT_PUBLIC_VENDING_IBC_NBTC_FACTORY_FLEX_ADDRESS: string
+    readonly NEXT_PUBLIC_VENDING_IBC_NBTC_UPDATABLE_FACTORY_FLEX_ADDRESS: string
+    readonly NEXT_PUBLIC_VENDING_IBC_USK_FACTORY_FLEX_ADDRESS: string
+    readonly NEXT_PUBLIC_VENDING_IBC_USK_UPDATABLE_FACTORY_FLEX_ADDRESS: string
+    readonly NEXT_PUBLIC_VENDING_IBC_KUJI_FACTORY_FLEX_ADDRESS: string
+    readonly NEXT_PUBLIC_VENDING_IBC_KUJI_UPDATABLE_FACTORY_FLEX_ADDRESS: string
+    readonly NEXT_PUBLIC_VENDING_IBC_HUAHUA_FACTORY_FLEX_ADDRESS: string
+    readonly NEXT_PUBLIC_VENDING_IBC_HUAHUA_UPDATABLE_FACTORY_FLEX_ADDRESS: string
+    readonly NEXT_PUBLIC_VENDING_IBC_CRBRUS_FACTORY_FLEX_ADDRESS: string
+    readonly NEXT_PUBLIC_VENDING_IBC_CRBRUS_UPDATABLE_FACTORY_FLEX_ADDRESS: string
+    readonly NEXT_PUBLIC_VENDING_NATIVE_STARDUST_FACTORY_ADDRESS: string
+    readonly NEXT_PUBLIC_VENDING_NATIVE_STARDUST_UPDATABLE_FACTORY_ADDRESS: string
+    readonly NEXT_PUBLIC_VENDING_NATIVE_STRDST_FLEX_FACTORY_ADDRESS: string
+    readonly NEXT_PUBLIC_VENDING_NATIVE_BRNCH_FACTORY_ADDRESS: string
+    readonly NEXT_PUBLIC_VENDING_NATIVE_BRNCH_UPDATABLE_FACTORY_ADDRESS: string
+    readonly NEXT_PUBLIC_VENDING_NATIVE_BRNCH_FLEX_FACTORY_ADDRESS: string
     readonly NEXT_PUBLIC_OPEN_EDITION_FACTORY_ADDRESS: string
     readonly NEXT_PUBLIC_OPEN_EDITION_UPDATABLE_FACTORY_ADDRESS: string
     readonly NEXT_PUBLIC_OPEN_EDITION_IBC_ATOM_FACTORY_ADDRESS: string
     readonly NEXT_PUBLIC_OPEN_EDITION_UPDATABLE_IBC_ATOM_FACTORY_ADDRESS: string
     readonly NEXT_PUBLIC_OPEN_EDITION_IBC_USDC_FACTORY_ADDRESS: string
     readonly NEXT_PUBLIC_OPEN_EDITION_UPDATABLE_IBC_USDC_FACTORY_ADDRESS: string
+    readonly NEXT_PUBLIC_OPEN_EDITION_IBC_NBTC_FACTORY_ADDRESS: string
+    readonly NEXT_PUBLIC_OPEN_EDITION_UPDATABLE_IBC_NBTC_FACTORY_ADDRESS: string
     readonly NEXT_PUBLIC_OPEN_EDITION_IBC_FRNZ_FACTORY_ADDRESS: string
     readonly NEXT_PUBLIC_OPEN_EDITION_UPDATABLE_IBC_FRNZ_FACTORY_ADDRESS: string
+    readonly NEXT_PUBLIC_OPEN_EDITION_IBC_USK_FACTORY_ADDRESS: string
+    readonly NEXT_PUBLIC_OPEN_EDITION_UPDATABLE_IBC_USK_FACTORY_ADDRESS: string
+    readonly NEXT_PUBLIC_OPEN_EDITION_IBC_KUJI_FACTORY_ADDRESS: string
+    readonly NEXT_PUBLIC_OPEN_EDITION_UPDATABLE_IBC_KUJI_FACTORY_ADDRESS: string
+    readonly NEXT_PUBLIC_OPEN_EDITION_IBC_HUAHUA_FACTORY_ADDRESS: string
+    readonly NEXT_PUBLIC_OPEN_EDITION_IBC_CRBRUS_FACTORY_ADDRESS: string
+    readonly NEXT_PUBLIC_OPEN_EDITION_UPDATABLE_IBC_HUAHUA_FACTORY_ADDRESS: string
+    readonly NEXT_PUBLIC_OPEN_EDITION_NATIVE_STRDST_FACTORY_ADDRESS: string
+    readonly NEXT_PUBLIC_OPEN_EDITION_NATIVE_BRNCH_FACTORY_ADDRESS: string
     readonly NEXT_PUBLIC_OPEN_EDITION_MINTER_CODE_ID: string
     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_INFINITY_SWAP_PROTOCOL_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
@@ -61,12 +104,13 @@ declare namespace NodeJS {
     readonly NEXT_PUBLIC_STARGAZE_WEBSITE_URL: string
     readonly NEXT_PUBLIC_WEBSITE_URL: string
     readonly NEXT_PUBLIC_SYNC_COLLECTIONS_API_URL: string
+
+    readonly NEXT_PUBLIC_MEILISEARCH_HOST: string
+    readonly NEXT_PUBLIC_MEILISEARCH_API_KEY: string
   }
 }
 
-type KeplrWindow = import('@keplr-wallet/types/src/window').Window
-
-declare interface Window extends KeplrWindow {
+declare interface Window {
   confetti?: (obj: any) => void
 }
 

hooks/useSearch.ts

@@ -0,0 +1,85 @@
+/* eslint-disable eslint-comments/disable-enable-pair */
+/* eslint-disable @typescript-eslint/no-inferrable-types */
+/* eslint-disable @typescript-eslint/no-shadow */
+/* eslint-disable no-return-await */
+/* eslint-disable import/no-default-export */
+import { useQuery } from 'react-query'
+import { MEILISEARCH_API_KEY, MEILISEARCH_HOST } from 'utils/constants'
+
+export default function useSearch(query: string, includeUids: string[] = [], limit: number = 4) {
+  return useQuery<SearchResult[] | null>(
+    ['globalSearch', query],
+    async () => await getSearchResults(query, includeUids, limit),
+  )
+}
+
+async function getSearchResults(query: string, includeUids: string[], limit: number) {
+  let queries = [
+    {
+      indexUid: 'collections',
+      sort: query === '' ? ['score_1d:desc'] : [],
+      q: query ?? '',
+      limit,
+    },
+    {
+      indexUid: 'names',
+      q: query ?? '',
+      limit,
+    },
+  ]
+  if (includeUids.length) {
+    queries = queries.filter((query) => includeUids.includes(query.indexUid))
+  }
+
+  try {
+    const response = (await fetch(`${MEILISEARCH_HOST}/multi-search`, {
+      method: 'POST',
+      headers: {
+        Authorization: `Bearer ${MEILISEARCH_API_KEY}`,
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        queries,
+      }),
+    }).then((res) => res.json())) as SearchResponse
+
+    return response.results
+  } catch (e) {
+    console.log('error', e)
+    return null
+  }
+}
+
+export interface SearchResult {
+  indexUid: string
+  hits: Hit[]
+  estimatedTotalHits: number
+  limit: number
+  offset: number
+  processingTimeMs: number
+  query: string
+}
+
+export interface SearchResponse {
+  results: SearchResult[]
+}
+
+export interface Hit {
+  created_by: string
+  description: string
+  id: string
+  collection_uri: string
+  image_url: string
+  minting: boolean
+  minter: string
+  name: string
+  thumbnail_url: string
+  tokens_count: number
+  type: string
+  // name
+  address: string
+  profile_picture: string
+  profile_picture_thumbnail: string
+  twitter_acct: string
+  verified: boolean
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "stargaze-studio",
-  "version": "0.7.3",
+  "version": "0.8.7",
   "workspaces": [
     "packages/*"
   ],
@@ -13,16 +13,19 @@
   },
   "dependencies": {
     "@aws-sdk/client-s3": "^3",
-    "@cosmjs/cosmwasm-stargate": "^0",
-    "@cosmjs/encoding": "^0",
-    "@cosmjs/math": "^0",
-    "@cosmjs/proto-signing": "^0",
-    "@cosmjs/stargate": "^0",
+    "@cosmjs/cosmwasm-stargate": "0.32.2",
+    "@cosmjs/encoding": "0.32.2",
+    "@cosmjs/math": "0.32.2",
+    "@cosmjs/proto-signing": "0.32.2",
+    "@cosmjs/stargate": "0.32.2",
+    "cosmjs-types": "0.9.0",
+    "@cosmos-kit/keplr": "^2.4.4",
+    "@cosmos-kit/leap": "^2.4.3",
+    "@cosmos-kit/leap-metamask-cosmos-snap": "^0.3.3",
+    "@cosmos-kit/react": "^2.9.3",
     "@fontsource/jetbrains-mono": "^4",
     "@fontsource/roboto": "^4",
-    "@headlessui/react": "^1",
-    "jscrypto": "^1.0.3",
-    "@keplr-wallet/cosmos": "^0.9.16",
+    "@leapwallet/cosmos-snap-provider": "0.1.24",
     "@pinata/sdk": "^1.1.26",
     "@popperjs/core": "^2",
     "@svgr/webpack": "^6",
@@ -30,10 +33,15 @@
     "@tailwindcss/line-clamp": "^0",
     "@typeform/embed-react": "2.21.0",
     "axios": "^0",
+    "chain-registry": "^1.20.0",
     "clsx": "^1",
     "compare-versions": "^4",
     "daisyui": "^2.19.0",
     "html-to-image": "1.11.11",
+    "@headlessui/react": "1.6.0",
+    "@headlessui/tailwindcss": "0.2.0",
+    "@heroicons/react": "2.0.18",
+    "jscrypto": "^1.0.3",
     "match-sorter": "^6",
     "next": "^12",
     "next-seo": "^4",
@@ -51,10 +59,10 @@
     "scheduler": "^0",
     "secp256k1": "^4.0.3",
     "tailwindcss-opentype": "1.1.0",
-    "zustand": "^3"
+    "zustand": "^4"
   },
   "devDependencies": {
-    "@stargazezone/types": "^0.7.2",
+    "@stargazezone/types": "0.9.0",
     "@types/node": "^14",
     "@types/react": "^18",
     "@types/react-datetime-picker": "^3",
@@ -65,6 +73,7 @@
     "object-sizeof": "^1.6.0",
     "postcss": "^8",
     "tailwindcss": "^3",
+    "tailwind-merge": "1.14.0",
     "typescript": "^4"
   },
   "eslintConfig": {

pages/_app.tsx

@@ -4,9 +4,9 @@ import '../styles/globals.css'
 import '../styles/datepicker.css'
 
 import { Layout } from 'components/Layout'
+import { WalletProvider } from 'components/WalletProvider'
 import { queryClient } from 'config/react-query'
 import { ContractsProvider } from 'contexts/contracts'
-import { WalletProvider } from 'contexts/wallet'
 import type { AppProps } from 'next/app'
 import { Toaster } from 'react-hot-toast'
 import { QueryClientProvider } from 'react-query'

pages/authz/grant.tsx

@@ -0,0 +1,366 @@
+/* eslint-disable eslint-comments/disable-enable-pair */
+/* eslint-disable @typescript-eslint/no-unnecessary-condition */
+/* eslint-disable no-nested-ternary */
+
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable tailwindcss/classnames-order */
+
+import { coins, GasPrice, SigningStargateClient } from '@cosmjs/stargate'
+import { Alert } from 'components/Alert'
+import { Button } from 'components/Button'
+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 { InputDateTime } from 'components/InputDateTime'
+import { LinkTabs } from 'components/LinkTabs'
+import { authzLinkTabs } from 'components/LinkTabs.data'
+import { getConfig } from 'config'
+import type { Msg } from 'config/authz'
+import {
+  AuthzExecuteContractGrantMsg,
+  AuthzGenericGrantMsg,
+  AuthzMigrateContractGrantMsg,
+  AuthzSendGrantMsg,
+} from 'config/authz'
+import { useGlobalSettings } from 'contexts/globalSettings'
+import type { NextPage } from 'next'
+import { NextSeo } from 'next-seo'
+import { useState } from 'react'
+import toast from 'react-hot-toast'
+import { NETWORK } from 'utils/constants'
+import { withMetadata } from 'utils/layout'
+import { useWallet } from 'utils/wallet'
+
+export type AuthorizationMode = 'Grant' | 'Revoke'
+export type GrantAuthorizationType = 'Generic' | 'Send' | 'Execute Smart Contract' | 'Migrate Smart Contract'
+export type GenericAuthorizationType =
+  | 'MsgDelegate'
+  | 'MsgUndelegate'
+  | 'MsgBeginRedelegate'
+  | 'MsgWithdrawDelegatorReward'
+  | 'MsgVote'
+  | 'MsgSend'
+  | 'MsgExecuteContract'
+  | 'MsgMigrateContract'
+  | 'MsgStoreCode'
+
+const Grant: NextPage = () => {
+  const wallet = useWallet()
+  const { timezone } = useGlobalSettings()
+
+  const [authMode, setAuthMode] = useState<AuthorizationMode>('Grant')
+  const [authType, setAuthType] = useState<GrantAuthorizationType>('Generic')
+  const [genericAuthType, setGenericAuthType] = useState<GenericAuthorizationType>('MsgSend')
+  const [expiration, setExpiration] = useState<Date | undefined>()
+  const [transactionHash, setTransactionHash] = useState<string | undefined>(undefined)
+  const [isLoading, setIsLoading] = useState(false)
+
+  const granteeAddressState = useInputState({
+    id: 'grantee-address',
+    name: 'granteeAddress',
+    title: 'Grantee Address',
+    placeholder: 'stars1...',
+    subtitle: 'The address to grant authorization to',
+  })
+
+  const spendLimitDenomState = useInputState({
+    id: 'spend-limit-denom',
+    name: 'spendLimitDenom',
+    title: 'Spend Limit Denom',
+    placeholder: `ustars`,
+    subtitle: 'The spend limit denom',
+  })
+
+  const spendLimitState = useNumberInputState({
+    id: 'spend-limit',
+    name: 'spendLimit',
+    title: 'Spend Limit',
+    placeholder: `1000000`,
+    subtitle: 'The spend limit',
+  })
+
+  const maxFundsLimitDenomState = useInputState({
+    id: 'max-funds-limit-denom',
+    name: 'maxFundsLimitDenom',
+    title: 'Max Funds Limit Denom',
+    placeholder: `ustars`,
+    subtitle: 'The denom for max funds limit',
+  })
+
+  const maxFundsLimitState = useNumberInputState({
+    id: 'max-funds-limit',
+    name: 'maxFundsLimit',
+    title: 'Max Funds Limit',
+    placeholder: `1000000`,
+    subtitle: 'The max funds limit for contract execution (leave blank for no limit)',
+  })
+
+  const allowListState = useInputState({
+    id: 'allow-list',
+    name: 'allowList',
+    title: 'Allow List',
+    placeholder: `stars1..., stars1...`,
+    subtitle: 'Comma separated list of addresses to allow transactions to',
+  })
+
+  const contractAddressState = useInputState({
+    id: 'contract-address',
+    name: 'contractAddress',
+    title: 'Contract Address',
+    placeholder: `stars1...`,
+    subtitle: 'The contract address to authorize execution on',
+  })
+
+  const allowedMessageKeysState = useInputState({
+    id: 'allowed-message-keys',
+    name: 'allowedMessageKeys',
+    title: 'Allowed Message Keys',
+    placeholder: `mint_to, burn, transfer`,
+    subtitle: 'Comma separated list of allowed message keys (leave blank to allow all)',
+  })
+
+  const callsRemainingState = useNumberInputState({
+    id: 'calls-remaining',
+    name: 'callsRemaining',
+    title: 'Calls Remaining',
+    placeholder: `10`,
+    subtitle: 'The allowed number of contract execution calls (leave blank for no limit)',
+  })
+
+  const messageToSign = () => {
+    if (authType === 'Generic') {
+      if (genericAuthType === 'MsgSend') {
+        return AuthzGenericGrantMsg(
+          wallet.address || '',
+          granteeAddressState.value,
+          '/cosmos.bank.v1beta1.MsgSend',
+          (expiration?.getTime() as number) / 1000 || 0,
+        )
+      }
+      if (genericAuthType === 'MsgDelegate') {
+        return AuthzGenericGrantMsg(
+          wallet.address || '',
+          granteeAddressState.value,
+          '/cosmos.staking.v1beta1.MsgDelegate',
+          (expiration?.getTime() as number) / 1000 || 0,
+        )
+      }
+      if (genericAuthType === 'MsgUndelegate') {
+        return AuthzGenericGrantMsg(
+          wallet.address || '',
+          granteeAddressState.value,
+          '/cosmos.staking.v1beta1.MsgUndelegate',
+          (expiration?.getTime() as number) / 1000 || 0,
+        )
+      }
+      if (genericAuthType === 'MsgBeginRedelegate') {
+        return AuthzGenericGrantMsg(
+          wallet.address || '',
+          granteeAddressState.value,
+          '/cosmos.staking.v1beta1.MsgBeginRedelegate',
+          (expiration?.getTime() as number) / 1000 || 0,
+        )
+      }
+      if (genericAuthType === 'MsgWithdrawDelegatorReward') {
+        return AuthzGenericGrantMsg(
+          wallet.address || '',
+          granteeAddressState.value,
+          '/cosmos.distribution.v1beta1.MsgWithdrawDelegatorReward',
+          (expiration?.getTime() as number) / 1000 || 0,
+        )
+      }
+      if (genericAuthType === 'MsgVote') {
+        return AuthzGenericGrantMsg(
+          wallet.address || '',
+          granteeAddressState.value,
+          '/cosmos.gov.v1beta1.MsgVote',
+          (expiration?.getTime() as number) / 1000 || 0,
+        )
+      }
+      if (genericAuthType === 'MsgExecuteContract') {
+        return AuthzGenericGrantMsg(
+          wallet.address || '',
+          granteeAddressState.value,
+          '/cosmwasm.wasm.v1.MsgExecuteContract',
+          (expiration?.getTime() as number) / 1000 || 0,
+        )
+      }
+      if (genericAuthType === 'MsgMigrateContract') {
+        return AuthzGenericGrantMsg(
+          wallet.address || '',
+          granteeAddressState.value,
+          '/cosmwasm.wasm.v1.MsgMigrateContract',
+          (expiration?.getTime() as number) / 1000 || 0,
+        )
+      }
+      if (genericAuthType === 'MsgStoreCode') {
+        return AuthzGenericGrantMsg(
+          wallet.address || '',
+          granteeAddressState.value,
+          '/cosmwasm.wasm.v1.MsgStoreCode',
+          (expiration?.getTime() as number) / 1000 || 0,
+        )
+      }
+    } else if (authType === 'Send') {
+      return AuthzSendGrantMsg(
+        wallet.address || '',
+        granteeAddressState.value,
+        spendLimitDenomState.value,
+        spendLimitState.value,
+        (expiration?.getTime() as number) / 1000 || 0,
+        allowListState.value ? allowListState.value.split(',').map((address) => address.trim()) : [],
+      )
+    } else if (authType === 'Execute Smart Contract') {
+      return AuthzExecuteContractGrantMsg(
+        wallet.address || '',
+        granteeAddressState.value,
+        contractAddressState.value,
+        (expiration?.getTime() as number) / 1000 || 0,
+        callsRemainingState.value ? callsRemainingState.value : undefined,
+        maxFundsLimitState.value > 0 ? coins(maxFundsLimitState.value, maxFundsLimitDenomState.value) : undefined,
+        allowedMessageKeysState.value ? allowedMessageKeysState.value.split(',').map((key) => key.trim()) : undefined,
+      )
+    } else if (authType === 'Migrate Smart Contract') {
+      return AuthzMigrateContractGrantMsg(
+        wallet.address || '',
+        granteeAddressState.value,
+        contractAddressState.value,
+        (expiration?.getTime() as number) / 1000 || 0,
+        callsRemainingState.value ? callsRemainingState.value : undefined,
+        maxFundsLimitState.value > 0 ? coins(maxFundsLimitState.value, maxFundsLimitDenomState.value) : undefined,
+        allowedMessageKeysState.value ? allowedMessageKeysState.value.split(',').map((key) => key.trim()) : undefined,
+      )
+    }
+  }
+  const handleSendMessage = async () => {
+    try {
+      if (!wallet.isWalletConnected) return toast.error('Please connect your wallet.')
+      setTransactionHash(undefined)
+      setIsLoading(true)
+      const offlineSigner = wallet.getOfflineSignerDirect()
+      const stargateClient = await SigningStargateClient.connectWithSigner(getConfig(NETWORK).rpcUrl, offlineSigner, {
+        gasPrice: GasPrice.fromString('0.025ustars'),
+      })
+
+      const response = await stargateClient.signAndBroadcast(wallet.address || '', [messageToSign() as Msg], 'auto')
+      setTransactionHash(response.transactionHash)
+      toast.success(`${authType} authorization success.`, { style: { maxWidth: 'none' } })
+      setIsLoading(false)
+    } catch (error: any) {
+      toast.error(error.message, { style: { maxWidth: 'none' } })
+      setIsLoading(false)
+      setTransactionHash(undefined)
+      console.error('Error: ', error)
+    }
+  }
+
+  return (
+    <section className="px-4 pt-4 pb-16 mx-auto space-y-8 ml-8 w-full">
+      <NextSeo title="Authorization" />
+      <ContractPageHeader
+        description="Here you can grant and revoke authorizations."
+        link="https://docs.stargaze.zone/developers/authz"
+        title="Authorization"
+      />
+      <LinkTabs activeIndex={0} data={authzLinkTabs} />
+      <div className="flex flex-col w-1/4">
+        <span className="text-xl font-bold text-white">Authorization Type</span>
+        <select
+          className="mt-2 pt-2 pb-2 px-4 placeholder:text-white/50 bg-white/10 rounded border-2 border-white/20 focus:ring focus:ring-plumbus-20"
+          onChange={(e) => setAuthType(e.target.value as GrantAuthorizationType)}
+          value={authType}
+        >
+          <option value="Generic">Generic</option>
+          <option value="Send">Send</option>
+          <option value="Execute Smart Contract">Execute Smart Contract</option>
+          <option value="Migrate Smart Contract">Migrate Smart Contract</option>
+        </select>
+      </div>
+      <Conditional test={authType === 'Generic'}>
+        <div className="flex flex-col w-1/4">
+          <span className="text-lg font-bold text-white">Generic Authorization Type</span>
+          <select
+            className="mt-2 pt-2 pb-2 px-4 placeholder:text-white/50 bg-white/10 rounded border-2 border-white/20 focus:ring focus:ring-plumbus-20"
+            onChange={(e) => setGenericAuthType(e.target.value as GenericAuthorizationType)}
+            value={genericAuthType}
+          >
+            <option value="MsgSend">Send</option>
+            <option value="MsgDelegate">Delegate</option>
+            <option value="MsgUndelegate">Undelegate</option>
+            <option value="MsgBeginRedelegate">Redelegate</option>
+            <option value="MsgWithdrawDelegatorReward">Withdraw Delegator Reward</option>
+            <option value="MsgVote">Vote</option>
+            <option value="MsgExecuteContract">Execute Contract</option>
+            <option value="MsgMigrateContract">Migrate Contract</option>
+            <option value="MsgStoreCode">Store Code</option>
+          </select>
+        </div>
+      </Conditional>
+      <TextInput className="w-2/5" {...granteeAddressState} />
+      <Conditional test={authType === 'Send'}>
+        <div className="flex flex-row">
+          <NumberInput className="w-1/4" {...spendLimitState} />
+          <TextInput className="w-1/4 ml-2" {...spendLimitDenomState} />
+        </div>
+        {/* Needs cosmos-sdk v0.47 */}
+        {/* <TextInput className="w-2/5" {...allowListState} /> */}
+      </Conditional>
+      <Conditional test={authType === 'Execute Smart Contract' || authType === 'Migrate Smart Contract'}>
+        <AddressInput className="w-2/5" {...contractAddressState} />
+        <TextInput className="w-2/5" {...allowedMessageKeysState} />
+        <NumberInput className="w-2/5" {...callsRemainingState} />
+        <div className="flex flex-row">
+          <NumberInput className="w-2/5" {...maxFundsLimitState} />
+          <TextInput className="w-1/4 ml-2" {...maxFundsLimitDenomState} />
+        </div>
+      </Conditional>
+
+      <FormControl
+        className="w-1/4"
+        htmlId="expiration"
+        subtitle={`Expiration time for the authorization ${timezone === 'Local' ? '(local)' : '(UTC)'}`}
+        title="Expiration Time (Optional)"
+      >
+        <InputDateTime
+          minDate={
+            timezone === 'Local' ? new Date() : new Date(Date.now() + new Date().getTimezoneOffset() * 60 * 1000)
+          }
+          onChange={(date) =>
+            date
+              ? setExpiration(
+                  timezone === 'Local' ? date : new Date(date?.getTime() - new Date().getTimezoneOffset() * 60 * 1000),
+                )
+              : setExpiration(undefined)
+          }
+          value={
+            timezone === 'Local'
+              ? expiration
+              : expiration
+              ? new Date(expiration.getTime() + new Date().getTimezoneOffset() * 60 * 1000)
+              : undefined
+          }
+        />
+      </FormControl>
+
+      <Button
+        className="px-4 py-2 font-bold text-white bg-stargaze rounded-md"
+        isLoading={isLoading}
+        onClick={() => {
+          void handleSendMessage()
+        }}
+      >
+        {' '}
+        {authMode === 'Grant' ? 'Grant Authorization' : 'Revoke Authorization'}
+      </Button>
+      {transactionHash && (
+        <Alert className="justify-center items-center space-y-2 w-3/4" type="info">
+          {`Transaction Hash: ${transactionHash}`}
+        </Alert>
+      )}
+    </section>
+  )
+}
+
+export default withMetadata(Grant, { center: false })

pages/authz/index.tsx

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

pages/authz/revoke.tsx

@@ -0,0 +1,144 @@
+/* eslint-disable eslint-comments/disable-enable-pair */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+import { GasPrice, SigningStargateClient } from '@cosmjs/stargate'
+import { Alert } from 'components/Alert'
+import { Button } from 'components/Button'
+import { ContractPageHeader } from 'components/ContractPageHeader'
+import { TextInput } from 'components/forms/FormInput'
+import { useInputState } from 'components/forms/FormInput.hooks'
+import { LinkTabs } from 'components/LinkTabs'
+import { authzLinkTabs } from 'components/LinkTabs.data'
+import { getConfig } from 'config'
+import type { NextPage } from 'next'
+import { NextSeo } from 'next-seo'
+import { useState } from 'react'
+import toast from 'react-hot-toast'
+import { NETWORK } from 'utils/constants'
+import { withMetadata } from 'utils/layout'
+import { useWallet } from 'utils/wallet'
+
+const RevokeAuthorization: NextPage = () => {
+  const wallet = useWallet()
+
+  const [transactionHash, setTransactionHash] = useState<string | undefined>(undefined)
+  const [isLoading, setIsLoading] = useState(false)
+
+  const granteeAddressState = useInputState({
+    id: 'grantee-address',
+    name: 'granteeAddress',
+    title: 'Grantee Address',
+    subtitle: 'Address to revoke message authorization',
+    placeholder: 'stars1...',
+  })
+
+  const messageState = useInputState({
+    id: 'message',
+    name: 'message',
+    title: 'Message',
+    subtitle: 'Message to revoke authorization for',
+    placeholder: '/cosmos.bank.v1beta1.MsgSend',
+    defaultValue: '/cosmos.bank.v1beta1.MsgSend',
+  })
+
+  const revokeAuthorization = async (granteeAddress: string, msg: string) => {
+    try {
+      if (!wallet.isWalletConnected) throw new Error('Wallet not connected.')
+      setTransactionHash(undefined)
+      setIsLoading(true)
+      const offlineSigner = wallet.getOfflineSignerDirect()
+      const stargateClient = await SigningStargateClient.connectWithSigner(getConfig(NETWORK).rpcUrl, offlineSigner, {
+        gasPrice: GasPrice.fromString('0.25ustars'),
+      })
+
+      const response = await stargateClient.signAndBroadcast(
+        wallet.address || '',
+        [
+          {
+            typeUrl: '/cosmos.authz.v1beta1.MsgRevoke',
+            value: {
+              granter: wallet.address,
+              grantee: granteeAddress,
+              msgTypeUrl: msg,
+            },
+          },
+        ],
+        {
+          amount: [{ amount: '500000', denom: 'ustars' }],
+          gas: '200000',
+        },
+      )
+      setTransactionHash(response.transactionHash)
+      if (response.rawLog?.includes('failed')) toast.error(response.rawLog, { style: { maxWidth: 'none' } })
+      else toast.success(`Revoke authorization success.`, { style: { maxWidth: 'none' } })
+      setIsLoading(false)
+    } catch (e: any) {
+      console.log(e)
+      setIsLoading(false)
+      setTransactionHash(undefined)
+      toast.error(e.message, { style: { maxWidth: 'none' } })
+    }
+  }
+
+  return (
+    <section className="px-4 pt-4 pb-16 mx-auto ml-8 space-y-8 w-full">
+      <NextSeo title="Authorization" />
+      <ContractPageHeader
+        description="Here you can grant and revoke authorizations."
+        link="https://docs.stargaze.zone/developers/authz"
+        title="Authorization"
+      />
+      <LinkTabs activeIndex={1} data={authzLinkTabs} />
+      <div className="flex flex-col w-2/5">
+        <span className="font-bold text-white">Authorization Type</span>
+        <select
+          className="py-2 px-4 mt-2 bg-black rounded-md border-2 border-white"
+          onChange={(e) => messageState.onChange(e.target.value)}
+        >
+          <option className="bg-black" value="/cosmos.bank.v1beta1.MsgSend">
+            /cosmos.bank.v1beta1.MsgSend
+          </option>
+          <option className="bg-black" value="/cosmos.staking.v1beta1.MsgDelegate">
+            /cosmos.staking.v1beta1.MsgDelegate
+          </option>
+          <option className="bg-black" value="/cosmos.staking.v1beta1.MsgUndelegate">
+            /cosmos.staking.v1beta1.MsgUndelegate
+          </option>
+          <option className="bg-black" value="/cosmos.staking.v1beta1.MsgBeginRedelegate">
+            /cosmos.staking.v1beta1.MsgBeginRedelegate
+          </option>
+          <option className="bg-black" value="/cosmos.distribution.v1beta1.MsgWithdrawDelegatorReward">
+            /cosmos.distribution.v1beta1.MsgWithdrawDelegatorReward
+          </option>
+          <option className="bg-black" value="/cosmos.gov.v1beta1.MsgVote">
+            /cosmos.gov.v1beta1.MsgVote
+          </option>
+          <option className="bg-black" value="/cosmwasm.wasm.v1.MsgExecuteContract">
+            /cosmwasm.wasm.v1.MsgExecuteContract
+          </option>
+          <option className="bg-black" value="/cosmwasm.wasm.v1.MsgMigrateContract">
+            /cosmwasm.wasm.v1.MsgMigrateContract
+          </option>
+          <option className="bg-black" value="/cosmwasm.wasm.v1.MsgStoreCode">
+            /cosmwasm.wasm.v1.MsgStoreCode
+          </option>
+        </select>
+      </div>
+      <TextInput className="w-2/5" {...granteeAddressState} />
+      {/* <TextInput className="w-1/3" {...messageState} /> */}
+      <Button
+        className="text-white bg-stargaze btn"
+        isLoading={isLoading}
+        onClick={() => void revokeAuthorization(granteeAddressState.value, messageState.value)}
+        type="button"
+      >
+        Revoke Authorization
+      </Button>
+      {transactionHash && (
+        <Alert className="justify-center items-center space-y-2 w-3/4" type="info">
+          {`Transaction Hash: ${transactionHash}`}
+        </Alert>
+      )}
+    </section>
+  )
+}
+export default withMetadata(RevokeAuthorization, { center: false })

pages/badges/actions.tsx

@@ -9,7 +9,6 @@ import { ContractPageHeader } from 'components/ContractPageHeader'
 import { AddressInput, NumberInput } from 'components/forms/FormInput'
 import { useInputState } from 'components/forms/FormInput.hooks'
 import { useContracts } from 'contexts/contracts'
-import { useWallet } from 'contexts/wallet'
 import type { NextPage } from 'next'
 import { useRouter } from 'next/router'
 import { NextSeo } from 'next-seo'
@@ -18,6 +17,7 @@ import toast from 'react-hot-toast'
 import { useDebounce } from 'utils/debounce'
 import { withMetadata } from 'utils/layout'
 import { links } from 'utils/links'
+import { useWallet } from 'utils/wallet'
 
 import { BadgeActions } from '../../components/badges/actions/Action'
 import { useNumberInputState } from '../../components/forms/FormInput.hooks'
@@ -82,8 +82,8 @@ const BadgeActionsPage: NextPage = () => {
 
   useEffect(() => {
     async function getMintRule() {
-      if (wallet.client && debouncedBadgeHubContractState.length > 0 && debouncedBadgeIdState > 0) {
-        const client = wallet.client
+      if (wallet.isWalletConnected && debouncedBadgeHubContractState.length > 0 && debouncedBadgeIdState > 0) {
+        const client = await wallet.getCosmWasmClient()
         const data = await toast.promise(
           client.queryContractSmart(debouncedBadgeHubContractState, {
             badge: {
@@ -117,7 +117,8 @@ const BadgeActionsPage: NextPage = () => {
         setMintRule('not_resolved')
         console.log('Unable to retrieve Mint Rule. Defaulting to "by_key".')
       })
-  }, [debouncedBadgeHubContractState, debouncedBadgeIdState, wallet.client])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [debouncedBadgeHubContractState, debouncedBadgeIdState, wallet.isWalletConnected])
 
   return (
     <section className="py-6 px-12 space-y-4">

pages/badges/create.tsx

@@ -24,7 +24,6 @@ import { useInputState } from 'components/forms/FormInput.hooks'
 import { Tooltip } from 'components/Tooltip'
 import { useContracts } from 'contexts/contracts'
 import { addLogItem } from 'contexts/log'
-import { useWallet } from 'contexts/wallet'
 import type { Badge } from 'contracts/badgeHub'
 import type { DispatchExecuteArgs as BadgeHubDispatchExecuteArgs } from 'contracts/badgeHub/messages/execute'
 import { dispatchExecute as badgeHubDispatchExecute } from 'contracts/badgeHub/messages/execute'
@@ -41,11 +40,13 @@ import * as secp256k1 from 'secp256k1'
 import { upload } from 'services/upload'
 import { copy } from 'utils/clipboard'
 import { BADGE_HUB_ADDRESS, BLOCK_EXPLORER_URL, NETWORK } from 'utils/constants'
+import { getAssetType } from 'utils/getAssetType'
 import { withMetadata } from 'utils/layout'
 import { links } from 'utils/links'
 import { uid } from 'utils/random'
 import { resolveAddress } from 'utils/resolveAddress'
 import { truncateMiddle } from 'utils/text'
+import { useWallet } from 'utils/wallet'
 
 import { generateKeyPairs } from '../../utils/hash'
 
@@ -180,22 +181,25 @@ const BadgeCreationPage: NextPage = () => {
 
   const createNewBadge = async () => {
     try {
-      if (!wallet.initialized) throw new Error('Wallet not connected')
+      if (!wallet.isWalletConnected) throw new Error('Wallet not connected')
       if (!badgeHubContract) throw new Error('Contract not found')
       setCreatingBadge(true)
       const coverUrl = await handleImageUrl()
-
       const badge = {
         manager: badgeDetails?.manager as string,
         metadata: {
           name: badgeDetails?.name || undefined,
-          description: badgeDetails?.description || undefined,
+          description: badgeDetails?.description?.replaceAll('\\n', '\n') || undefined,
           image: coverUrl || undefined,
           image_data: badgeDetails?.image_data || undefined,
           external_url: badgeDetails?.external_url || undefined,
           attributes: badgeDetails?.attributes || undefined,
           background_color: badgeDetails?.background_color || undefined,
-          animation_url: badgeDetails?.animation_url || undefined,
+          animation_url: badgeDetails?.animation_url
+            ? badgeDetails.animation_url
+            : imageUploadDetails?.assetFile && getAssetType(imageUploadDetails.assetFile.name) === 'video'
+            ? coverUrl
+            : undefined,
           youtube_url: badgeDetails?.youtube_url || undefined,
         },
         transferrable: badgeDetails?.transferrable as boolean,
@@ -216,7 +220,7 @@ const BadgeCreationPage: NextPage = () => {
       const payload: BadgeHubDispatchExecuteArgs = {
         contract: BADGE_HUB_ADDRESS,
         messages: badgeHubMessages,
-        txSigner: wallet.address,
+        txSigner: wallet.address || '',
         badge,
         type: 'create_badge',
       }
@@ -241,7 +245,7 @@ const BadgeCreationPage: NextPage = () => {
             setBadgeId(data.split(':')[1])
             const res = await toast.promise(
               badgeHubContract.use(BADGE_HUB_ADDRESS)?.addKeys(
-                wallet.address,
+                wallet.address || '',
                 Number(data.split(':')[1]),
                 generatedKeyPairs.map((key) => key.publicKey),
               ) as Promise<string>,
@@ -272,7 +276,7 @@ const BadgeCreationPage: NextPage = () => {
   }
 
   const checkImageUploadDetails = () => {
-    if (!wallet.initialized) throw new Error('Wallet not connected.')
+    if (!wallet.isWalletConnected) throw new Error('Wallet not connected.')
     if (!imageUploadDetails) {
       throw new Error('Please specify the image related details.')
     }
@@ -355,7 +359,7 @@ const BadgeCreationPage: NextPage = () => {
   }
 
   const checkwalletBalance = () => {
-    if (!wallet.initialized) throw new Error('Wallet not connected.')
+    if (!wallet.isWalletConnected) throw new Error('Wallet not connected.')
     // TODO: estimate creation cost and check wallet balance
   }
   useEffect(() => {

pages/badges/myBadges.tsx

@@ -7,7 +7,6 @@ import { Alert } from 'components/Alert'
 import { Anchor } from 'components/Anchor'
 import { Conditional } from 'components/Conditional'
 import { ContractPageHeader } from 'components/ContractPageHeader'
-import { useWallet } from 'contexts/wallet'
 import type { NextPage } from 'next'
 import { NextSeo } from 'next-seo'
 import { useCallback, useEffect, useState } from 'react'
@@ -15,6 +14,7 @@ import { FaSlidersH, FaUser } from 'react-icons/fa'
 import { API_URL, BADGE_HUB_ADDRESS, STARGAZE_URL } from 'utils/constants'
 import { withMetadata } from 'utils/layout'
 import { links } from 'utils/links'
+import { useWallet } from 'utils/wallet'
 
 const BadgeList: NextPage = () => {
   const wallet = useWallet()
@@ -23,7 +23,7 @@ const BadgeList: NextPage = () => {
   useEffect(() => {
     const fetchBadges = async () => {
       await axios
-        .get(`${API_URL}/api/v1beta/badges/${wallet.address}`)
+        .get(`${API_URL}/api/v1beta/badges/${wallet.address || ''}`)
         .then((response) => {
           const badgeData = response.data
           setMyBadges(badgeData)
@@ -90,7 +90,7 @@ const BadgeList: NextPage = () => {
                         <Anchor
                           className="text-xl text-plumbus"
                           external
-                          href={`${STARGAZE_URL}/profile/${wallet.address}`}
+                          href={`${STARGAZE_URL}/profile/${wallet.address || ''}`}
                         >
                           <FaUser />
                         </Anchor>

pages/collections/actions.tsx

@@ -6,15 +6,16 @@ import { ContractPageHeader } from 'components/ContractPageHeader'
 import { AddressInput } from 'components/forms/FormInput'
 import { useInputState } from 'components/forms/FormInput.hooks'
 import { useContracts } from 'contexts/contracts'
-import { useWallet } from 'contexts/wallet'
 import type { NextPage } from 'next'
 import { useRouter } from 'next/router'
 import { NextSeo } from 'next-seo'
 import { useEffect, useMemo, useState } from 'react'
 import toast from 'react-hot-toast'
+import { ROYALTY_REGISTRY_ADDRESS } from 'utils/constants'
 import { useDebounce } from 'utils/debounce'
 import { withMetadata } from 'utils/layout'
 import { links } from 'utils/links'
+import { useWallet } from 'utils/wallet'
 
 import type { MinterType, Sg721Type } from '../../components/collections/actions/Combobox'
 
@@ -24,6 +25,7 @@ const CollectionActionsPage: NextPage = () => {
     vendingMinter: vendingMinterContract,
     openEditionMinter: openEditionMinterContract,
     sg721: sg721Contract,
+    royaltyRegistry: royaltyRegistryContract,
   } = useContracts()
   const wallet = useWallet()
 
@@ -66,6 +68,11 @@ const CollectionActionsPage: NextPage = () => {
     [sg721Contract, sg721ContractState.value],
   )
 
+  const royaltyRegistryMessages = useMemo(
+    () => royaltyRegistryContract?.use(ROYALTY_REGISTRY_ADDRESS),
+    [royaltyRegistryContract],
+  )
+
   const sg721ContractAddress = sg721ContractState.value
   const minterContractAddress = minterContractState.value
 
@@ -93,8 +100,8 @@ const CollectionActionsPage: NextPage = () => {
 
   useEffect(() => {
     async function getMinterContractType() {
-      if (wallet.client && debouncedMinterContractState.length > 0) {
-        const client = wallet.client
+      if (wallet.isWalletConnected && debouncedMinterContractState.length > 0) {
+        const client = await wallet.getCosmWasmClient()
         const data = await toast.promise(
           client.queryContractRaw(
             debouncedMinterContractState,
@@ -126,12 +133,13 @@ const CollectionActionsPage: NextPage = () => {
         setMinterType('vending')
         console.log('Unable to retrieve contract type. Defaulting to "vending".')
       })
-  }, [debouncedMinterContractState, wallet.client])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [debouncedMinterContractState, wallet.isWalletConnected])
 
   useEffect(() => {
     async function getSg721ContractType() {
-      if (wallet.client && debouncedSg721ContractState.length > 0) {
-        const client = wallet.client
+      if (wallet.isWalletConnected && debouncedSg721ContractState.length > 0) {
+        const client = await wallet.getCosmWasmClient()
         const data = await toast.promise(
           client.queryContractRaw(
             debouncedSg721ContractState,
@@ -161,7 +169,8 @@ const CollectionActionsPage: NextPage = () => {
         setSg721Type('base')
         console.log('Unable to retrieve contract type. Defaulting to "base".')
       })
-  }, [debouncedSg721ContractState, wallet.client])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [debouncedSg721ContractState, wallet.isWalletConnected])
 
   return (
     <section className="py-6 px-12 space-y-4">
@@ -227,6 +236,7 @@ const CollectionActionsPage: NextPage = () => {
                   minterContractAddress={minterContractState.value}
                   minterType={minterType}
                   openEditionMinterMessages={openEditionMinterMessages}
+                  royaltyRegistryMessages={royaltyRegistryMessages}
                   sg721ContractAddress={sg721ContractState.value}
                   sg721Messages={sg721Messages}
                   sg721Type={sg721Type}
@@ -238,6 +248,8 @@ const CollectionActionsPage: NextPage = () => {
                   minterContractAddress={minterContractState.value}
                   minterType={minterType}
                   openEditionMinterMessages={openEditionMinterMessages}
+                  royaltyRegistryContractAddress={ROYALTY_REGISTRY_ADDRESS}
+                  royaltyRegistryMessages={royaltyRegistryMessages}
                   sg721ContractAddress={sg721ContractState.value}
                   sg721Messages={sg721Messages}
                   vendingMinterMessages={vendingMinterMessages}

pages/collections/create.tsx

@@ -30,6 +30,7 @@ import type { RoyaltyDetailsDataProps } from 'components/collections/creation/Ro
 import type { UploadDetailsDataProps } from 'components/collections/creation/UploadDetails'
 import type { WhitelistDetailsDataProps } from 'components/collections/creation/WhitelistDetails'
 import { Conditional } from 'components/Conditional'
+import { FormControl } from 'components/FormControl'
 import { LoadingModal } from 'components/LoadingModal'
 import type { OpenEditionMinterCreatorDataProps } from 'components/openEdition/OpenEditionMinterCreator'
 import { OpenEditionMinterCreator } from 'components/openEdition/OpenEditionMinterCreator'
@@ -37,19 +38,20 @@ import { flexibleVendingMinterList, openEditionMinterList, vendingMinterList } f
 import type { TokenInfo } from 'config/token'
 import { useContracts } from 'contexts/contracts'
 import { addLogItem } from 'contexts/log'
-import { useWallet } from 'contexts/wallet'
 import type { DispatchExecuteArgs as BaseFactoryDispatchExecuteArgs } from 'contracts/baseFactory/messages/execute'
 import { dispatchExecute as baseFactoryDispatchExecute } from 'contracts/baseFactory/messages/execute'
 import type { DispatchExecuteArgs as VendingFactoryDispatchExecuteArgs } from 'contracts/vendingFactory/messages/execute'
 import { dispatchExecute as vendingFactoryDispatchExecute } from 'contracts/vendingFactory/messages/execute'
 import type { NextPage } from 'next'
 import { NextSeo } from 'next-seo'
+import type { ChangeEvent } from 'react'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { toast } from 'react-hot-toast'
 import { upload } from 'services/upload'
 import { compareFileArrays } from 'utils/compareFileArrays'
 import {
   BASE_FACTORY_ADDRESS,
+  BASE_FACTORY_SG721_CODE_ID,
   BASE_FACTORY_UPDATABLE_ADDRESS,
   BLOCK_EXPLORER_URL,
   NETWORK,
@@ -58,6 +60,7 @@ import {
   SG721_CODE_ID,
   SG721_UPDATABLE_CODE_ID,
   STARGAZE_URL,
+  STRDST_SG721_CODE_ID,
   SYNC_COLLECTIONS_API_URL,
   VENDING_FACTORY_ADDRESS,
   VENDING_FACTORY_FLEX_ADDRESS,
@@ -69,6 +72,7 @@ import { checkTokenUri } from 'utils/isValidTokenUri'
 import { withMetadata } from 'utils/layout'
 import { links } from 'utils/links'
 import { uid } from 'utils/random'
+import { useWallet } from 'utils/wallet'
 
 import type { MinterType } from '../../components/collections/actions/Combobox'
 import type { UploadMethod } from '../../components/collections/creation/UploadDetails'
@@ -90,6 +94,17 @@ const CollectionCreationPage: NextPage = () => {
   const scrollRef = useRef<HTMLDivElement>(null)
   const sidetabRef = useRef<any>(null)
 
+  const [importedDetails, setImportedDetails] = useState<{
+    minterType: MinterType
+    collectionDetails: CollectionDetailsDataProps
+    uploadDetails: UploadDetailsDataProps
+    mintingDetails: MintingDetailsDataProps
+    whitelistDetails: WhitelistDetailsDataProps
+    royaltyDetails: RoyaltyDetailsDataProps
+    baseMinterDetails: BaseMinterDetailsDataProps
+    openEditionMinterDetails: OpenEditionMinterDetailsDataProps
+  }>()
+
   const [uploadDetails, setUploadDetails] = useState<UploadDetailsDataProps | null>(null)
   const [collectionDetails, setCollectionDetails] = useState<CollectionDetailsDataProps | null>(null)
   const [baseMinterDetails, setBaseMinterDetails] = useState<BaseMinterDetailsDataProps | null>(null)
@@ -124,16 +139,18 @@ const CollectionCreationPage: NextPage = () => {
 
   const vendingFactoryMessages = useMemo(
     () => vendingFactoryContract?.use(vendingFactoryAddress as string),
-    [vendingFactoryContract, wallet.address],
+    [vendingFactoryContract, wallet.address, vendingFactoryAddress, wallet.isWalletConnected],
   )
 
   const baseFactoryMessages = useMemo(
     () => baseFactoryContract?.use(BASE_FACTORY_ADDRESS),
-    [baseFactoryContract, wallet.address],
+    [baseFactoryContract, wallet.address, wallet.isWalletConnected],
   )
 
+  const [isFeaturedCollection, setIsFeaturedCollection] = useState<boolean>(false)
   const [uploading, setUploading] = useState(false)
   const [isMintingComplete, setIsMintingComplete] = useState(false)
+  const [initialParametersFetched, setInitialParametersFetched] = useState(false)
   const [creatingCollection, setCreatingCollection] = useState(false)
   const [readyToCreateVm, setReadyToCreateVm] = useState(false)
   const [readyToCreateBm, setReadyToCreateBm] = useState(false)
@@ -144,6 +161,7 @@ const CollectionCreationPage: NextPage = () => {
   const [baseTokenUri, setBaseTokenUri] = useState<string | null>(null)
   const [coverImageUrl, setCoverImageUrl] = useState<string | null>(null)
   const [transactionHash, setTransactionHash] = useState<string | null>(null)
+  const [isMatchingVendingFactoryPresent, setIsMatchingVendingFactoryPresent] = useState<boolean>(true)
 
   const performVendingMinterChecks = () => {
     try {
@@ -396,7 +414,7 @@ const CollectionCreationPage: NextPage = () => {
 
   const uploadAndMint = async () => {
     try {
-      if (!wallet.initialized) throw new Error('Wallet not connected')
+      if (!wallet.isWalletConnected) throw new Error('Wallet not connected')
       if (!baseMinterContract) throw new Error('Contract not found')
       setCreatingCollection(true)
       setIsMintingComplete(false)
@@ -422,7 +440,7 @@ const CollectionCreationPage: NextPage = () => {
                 .use(baseMinterDetails?.existingBaseMinter as string)
 
                 ?.mint(
-                  wallet.address,
+                  wallet.address || '',
                   `ipfs://${baseUri}/${(uploadDetails.baseMinterMetadataFile as File).name.substring(
                     0,
                     (uploadDetails.baseMinterMetadataFile as File).name.lastIndexOf('.'),
@@ -434,7 +452,12 @@ const CollectionCreationPage: NextPage = () => {
             setBaseTokenUri(baseUri)
             const result = await baseMinterContract
               .use(baseMinterDetails?.existingBaseMinter as string)
-              ?.batchMint(wallet.address, `ipfs://${baseUri}`, uploadDetails.assetFiles.length)
+              ?.batchMint(
+                wallet.address || '',
+                `ipfs://${baseUri}`,
+                uploadDetails.assetFiles.length,
+                parseInt(uploadDetails.assetFiles[0].name.split('.')[0]),
+              )
             console.log(result)
             return result
           })
@@ -459,7 +482,7 @@ const CollectionCreationPage: NextPage = () => {
         setUploading(false)
         await baseMinterContract
           .use(baseMinterDetails?.existingBaseMinter as string)
-          ?.mint(wallet.address, `${uploadDetails?.baseTokenURI?.trim()}`)
+          ?.mint(wallet.address || '', `${uploadDetails?.baseTokenURI?.trim()}`)
           .then((result) => {
             toast.success(`Token minted & added to the collection successfully! Tx Hash: ${result}`, {
               style: { maxWidth: 'none' },
@@ -487,7 +510,7 @@ const CollectionCreationPage: NextPage = () => {
   }
 
   const instantiateWhitelist = async () => {
-    if (!wallet.initialized) throw new Error('Wallet not connected')
+    if (!wallet.isWalletConnected) throw new Error('Wallet not connected')
     if (!whitelistContract) throw new Error('Contract not found')
 
     const standardMsg = {
@@ -528,7 +551,7 @@ const CollectionCreationPage: NextPage = () => {
   }
 
   const instantiateVendingMinter = async (baseUri: string, coverImageUri: string, whitelist?: string) => {
-    if (!wallet.initialized) throw new Error('Wallet not connected')
+    if (!wallet.isWalletConnected) throw new Error('Wallet not connected')
     if (!vendingFactoryContract) throw new Error('Contract not found')
 
     let royaltyInfo = null
@@ -554,12 +577,24 @@ const CollectionCreationPage: NextPage = () => {
           whitelist,
         },
         collection_params: {
-          code_id: collectionDetails?.updatable ? SG721_UPDATABLE_CODE_ID : SG721_CODE_ID,
+          code_id: collectionDetails?.updatable
+            ? SG721_UPDATABLE_CODE_ID
+            : mintingDetails?.selectedMintToken?.displayName === 'STRDST' ||
+              mintingDetails?.selectedMintToken?.displayName === 'USK' ||
+              mintingDetails?.selectedMintToken?.displayName === 'USDC' ||
+              mintingDetails?.selectedMintToken?.displayName === 'nBTC' ||
+              mintingDetails?.selectedMintToken?.displayName === 'KUJI' ||
+              mintingDetails?.selectedMintToken?.displayName === 'HUAHUA' ||
+              mintingDetails?.selectedMintToken?.displayName === 'BRNCH' ||
+              mintingDetails?.selectedMintToken?.displayName === 'CRBRUS' ||
+              isFeaturedCollection
+            ? STRDST_SG721_CODE_ID
+            : SG721_CODE_ID,
           name: collectionDetails?.name,
           symbol: collectionDetails?.symbol,
           info: {
             creator: wallet.address,
-            description: collectionDetails?.description,
+            description: collectionDetails?.description.replaceAll('\\n', '\n'),
             image: `${
               uploadDetails?.uploadMethod === 'new'
                 ? `ipfs://${coverImageUri}/${collectionDetails?.imageFile[0].name as string}`
@@ -577,7 +612,7 @@ const CollectionCreationPage: NextPage = () => {
     const payload: VendingFactoryDispatchExecuteArgs = {
       contract: vendingFactoryAddress as string,
       messages: vendingFactoryMessages,
-      txSigner: wallet.address,
+      txSigner: wallet.address || '',
       msg,
       funds: [
         coin(
@@ -599,7 +634,7 @@ const CollectionCreationPage: NextPage = () => {
   }
 
   const instantiateBaseMinter = async (baseUri: string, coverImageUri: string) => {
-    if (!wallet.initialized) throw new Error('Wallet not connected')
+    if (!wallet.isWalletConnected) throw new Error('Wallet not connected')
     if (!baseFactoryContract) throw new Error('Contract not found')
     if (!baseMinterContract) throw new Error('Contract not found')
 
@@ -615,12 +650,12 @@ const CollectionCreationPage: NextPage = () => {
       create_minter: {
         init_msg: null,
         collection_params: {
-          code_id: collectionDetails?.updatable ? SG721_UPDATABLE_CODE_ID : SG721_CODE_ID,
+          code_id: collectionDetails?.updatable ? SG721_UPDATABLE_CODE_ID : BASE_FACTORY_SG721_CODE_ID,
           name: collectionDetails?.name,
           symbol: collectionDetails?.symbol,
           info: {
             creator: wallet.address,
-            description: collectionDetails?.description,
+            description: collectionDetails?.description.replaceAll('\\n', '\n'),
             image: `${
               uploadDetails?.uploadMethod === 'new'
                 ? `ipfs://${coverImageUri}/${collectionDetails?.imageFile[0].name as string}`
@@ -638,7 +673,7 @@ const CollectionCreationPage: NextPage = () => {
     const payload: BaseFactoryDispatchExecuteArgs = {
       contract: collectionDetails?.updatable ? BASE_FACTORY_UPDATABLE_ADDRESS : BASE_FACTORY_ADDRESS,
       messages: baseFactoryMessages,
-      txSigner: wallet.address,
+      txSigner: wallet.address || '',
       msg,
       funds: [
         coin(
@@ -656,7 +691,7 @@ const CollectionCreationPage: NextPage = () => {
         if (uploadDetails?.assetFiles.length === 1 || uploadDetails?.uploadMethod === 'existing') {
           await toast
             .promise(
-              baseMinterContract.use(data.baseMinterAddress)?.mint(wallet.address, baseUri) as Promise<string>,
+              baseMinterContract.use(data.baseMinterAddress)?.mint(wallet.address || '', baseUri) as Promise<string>,
               {
                 loading: 'Minting token...',
                 success: (result) => {
@@ -679,7 +714,12 @@ const CollectionCreationPage: NextPage = () => {
             .promise(
               baseMinterContract
                 .use(data.baseMinterAddress)
-                ?.batchMint(wallet.address, baseUri, uploadDetails?.assetFiles.length as number) as Promise<string>,
+                ?.batchMint(
+                  wallet.address || '',
+                  baseUri,
+                  uploadDetails?.assetFiles.length as number,
+                  parseInt(uploadDetails?.assetFiles[0].name.split('.')[0] as string),
+                ) as Promise<string>,
               {
                 loading: 'Minting tokens...',
                 success: (result) => {
@@ -720,7 +760,19 @@ const CollectionCreationPage: NextPage = () => {
         uploadDetails.pinataApiKey as string,
         uploadDetails.pinataSecretKey as string,
       )
-        .then((assetUri: string) => {
+        .then(async (assetUri: string) => {
+          let thumbnailUri: string | undefined
+          if (uploadDetails.thumbnailFiles && uploadDetails.thumbnailFiles.length > 0) {
+            thumbnailUri = await upload(
+              uploadDetails.thumbnailFiles,
+              uploadDetails.uploadService,
+              'thumbnail',
+              uploadDetails.nftStorageApiKey as string,
+              uploadDetails.pinataApiKey as string,
+              uploadDetails.pinataSecretKey as string,
+            )
+          }
+          console.log('Thumbnail URI: ', thumbnailUri)
           if (minterType === 'vending' || (minterType === 'base' && uploadDetails.assetFiles.length > 1)) {
             const fileArray: File[] = []
             let reader: FileReader
@@ -733,23 +785,42 @@ const CollectionCreationPage: NextPage = () => {
                 if (
                   getAssetType(uploadDetails.assetFiles[i].name) === 'audio' ||
                   getAssetType(uploadDetails.assetFiles[i].name) === 'video' ||
-                  getAssetType(uploadDetails.assetFiles[i].name) === 'html'
+                  getAssetType(uploadDetails.assetFiles[i].name) === 'html' ||
+                  getAssetType(uploadDetails.assetFiles[i].name) === 'document'
                 ) {
                   data.animation_url = `ipfs://${assetUri}/${uploadDetails.assetFiles[i].name}`
                 }
-                if (getAssetType(uploadDetails.assetFiles[i].name) !== 'html')
-                  data.image = `ipfs://${assetUri}/${uploadDetails.assetFiles[i].name}`
-
+                data.image = `ipfs://${
+                  thumbnailUri &&
+                  (uploadDetails.thumbnailCompatibleAssetFileNames as string[]).includes(
+                    uploadDetails.assetFiles[i].name.split('.')[0],
+                  )
+                    ? thumbnailUri
+                    : assetUri
+                }/${
+                  thumbnailUri &&
+                  (uploadDetails.thumbnailCompatibleAssetFileNames as string[]).includes(
+                    uploadDetails.assetFiles[i].name.split('.')[0],
+                  )
+                    ? uploadDetails.thumbnailFiles?.find(
+                        (thumbnailFile) =>
+                          thumbnailFile.name.split('.')[0] === uploadDetails.assetFiles[i].name.split('.')[0],
+                      )?.name
+                    : uploadDetails.assetFiles[i].name
+                }`
+                if (data.description) {
+                  // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+                  data.description = data.description.replaceAll('\\n', '\n')
+                }
                 const metadataFileBlob = new Blob([JSON.stringify(data)], {
                   type: 'application/json',
                 })
 
                 const updatedMetadataFile = new File(
                   [metadataFileBlob],
-                  uploadDetails.metadataFiles[i].name.substring(
-                    0,
-                    uploadDetails.metadataFiles[i].name.lastIndexOf('.'),
-                  ),
+                  uploadDetails.metadataFiles[i].name
+                    .substring(0, uploadDetails.metadataFiles[i].name.lastIndexOf('.'))
+                    .replaceAll('#', ''),
                   {
                     type: 'application/json',
                   },
@@ -783,24 +854,33 @@ const CollectionCreationPage: NextPage = () => {
               if (
                 getAssetType(uploadDetails.assetFiles[0].name) === 'audio' ||
                 getAssetType(uploadDetails.assetFiles[0].name) === 'video' ||
-                getAssetType(uploadDetails.assetFiles[0].name) === 'html'
+                getAssetType(uploadDetails.assetFiles[0].name) === 'html' ||
+                getAssetType(uploadDetails.assetFiles[0].name) === 'document'
               ) {
                 data.animation_url = `ipfs://${assetUri}/${uploadDetails.assetFiles[0].name}`
               }
-              if (getAssetType(uploadDetails.assetFiles[0].name) !== 'html')
-                data.image = `ipfs://${assetUri}/${uploadDetails.assetFiles[0].name}`
+              data.image = `ipfs://${
+                uploadDetails.thumbnailFiles && uploadDetails.thumbnailFiles.length > 0 ? thumbnailUri : assetUri
+              }/${
+                uploadDetails.thumbnailFiles && uploadDetails.thumbnailFiles.length > 0
+                  ? uploadDetails.thumbnailFiles[0].name
+                  : uploadDetails.assetFiles[0].name
+              }`
 
               const metadataFileBlob = new Blob([JSON.stringify(data)], {
                 type: 'application/json',
               })
 
+              if (data.description) {
+                // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+                data.description = data.description.replaceAll('\\n', '\n')
+              }
               console.log('Name: ', (uploadDetails.baseMinterMetadataFile as File).name)
               const updatedMetadataFile = new File(
                 [metadataFileBlob],
-                (uploadDetails.baseMinterMetadataFile as File).name.substring(
-                  0,
-                  (uploadDetails.baseMinterMetadataFile as File).name.lastIndexOf('.'),
-                ),
+                (uploadDetails.baseMinterMetadataFile as File).name
+                  .substring(0, (uploadDetails.baseMinterMetadataFile as File).name.lastIndexOf('.'))
+                  .replaceAll('#', ''),
                 {
                   type: 'application/json',
                 },
@@ -829,7 +909,7 @@ const CollectionCreationPage: NextPage = () => {
   }
 
   const checkUploadDetails = () => {
-    if (!wallet.initialized) throw new Error('Wallet not connected.')
+    if (!wallet.isWalletConnected) throw new Error('Wallet not connected.')
     if (!uploadDetails) {
       throw new Error('Please select assets and metadata')
     }
@@ -951,6 +1031,10 @@ const CollectionCreationPage: NextPage = () => {
       (!isValidAddress(mintingDetails.paymentAddress) || !mintingDetails.paymentAddress.startsWith('stars1'))
     )
       throw new Error('Invalid payment address')
+    if (!isMatchingVendingFactoryPresent)
+      throw new Error(
+        `No matching vending factory contract found for the selected parameters (Mint Price Denom: ${mintingDetails.selectedMintToken?.displayName}, Whitelist Type: ${whitelistDetails?.whitelistType}, Featured Collection: ${isFeaturedCollection})`,
+      )
   }
 
   const checkWhitelistDetails = async () => {
@@ -1038,8 +1122,8 @@ const CollectionCreationPage: NextPage = () => {
         }
         throw new Error('Invalid royalty payment address')
       }
-      const contractInfoResponse = await wallet.client
-        ?.queryContractRaw(
+      const contractInfoResponse = await (await wallet.getCosmWasmClient())
+        .queryContractRaw(
           royaltyDetails.paymentAddress.trim(),
           toUtf8(Buffer.from(Buffer.from('contract_info').toString('hex'), 'hex').toString()),
         )
@@ -1051,16 +1135,15 @@ const CollectionCreationPage: NextPage = () => {
       if (contractInfoResponse !== undefined) {
         const contractInfo = JSON.parse(new TextDecoder().decode(contractInfoResponse as Uint8Array))
         // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-        if (contractInfo && !contractInfo.contract.includes('splits'))
-          throw new Error('The provided royalty payment address does not belong to a splits contract.')
+        if (contractInfo && (contractInfo.contract.includes('minter') || contractInfo.contract.includes('sg721')))
+          throw new Error('The provided royalty payment address does not belong to a compatible contract.')
         else console.log(contractInfo)
       }
     }
   }
 
   const fetchInitialFactoryParameters = async () => {
-    const client = wallet.client
-    if (!client) return
+    const client = await wallet.getCosmWasmClient()
     if (BASE_FACTORY_ADDRESS) {
       const baseFactoryParameters = await client
         .queryContractSmart(BASE_FACTORY_ADDRESS, { params: {} })
@@ -1115,7 +1198,6 @@ const CollectionCreationPage: NextPage = () => {
       setVendingMinterFlexCreationFee(vendingFactoryFlexParameters?.params?.creation_fee?.amount)
       setMinimumFlexMintPrice(vendingFactoryFlexParameters?.params?.min_mint_price?.amount)
     }
-
     if (OPEN_EDITION_FACTORY_ADDRESS) {
       const openEditionFactoryParameters = await client
         .queryContractSmart(OPEN_EDITION_FACTORY_ADDRESS, { params: {} })
@@ -1136,11 +1218,11 @@ const CollectionCreationPage: NextPage = () => {
       setOpenEditionMinterUpdatableCreationFee(openEditionUpdatableFactoryParameters?.params?.creation_fee?.amount)
       setMinimumOpenEditionUpdatableMintPrice(openEditionUpdatableFactoryParameters?.params?.min_mint_price?.amount)
     }
+    setInitialParametersFetched(true)
   }
 
   const fetchOpenEditionFactoryParameters = useCallback(async () => {
-    const client = wallet.client
-    if (!client) return
+    const client = await wallet.getCosmWasmClient()
     const factoryForSelectedDenom = openEditionMinterList.find(
       (minter) =>
         minter.supportedToken === openEditionMinterDetails?.mintingDetails?.selectedMintToken &&
@@ -1175,7 +1257,7 @@ const CollectionCreationPage: NextPage = () => {
         })
       setOpenEditionMinterUpdatableCreationFee(openEditionUpdatableFactoryParameters?.params?.creation_fee?.amount)
       if (openEditionMinterDetails?.collectionDetails?.updatable) {
-        setMinimumOpenEditionMintPrice(openEditionUpdatableFactoryParameters?.params?.min_mint_price?.amount)
+        setMinimumOpenEditionUpdatableMintPrice(openEditionUpdatableFactoryParameters?.params?.min_mint_price?.amount)
         setMintTokenFromOpenEditionFactory(
           tokensList.find(
             (token) => token.denom === openEditionUpdatableFactoryParameters?.params?.min_mint_price?.denom,
@@ -1183,24 +1265,27 @@ const CollectionCreationPage: NextPage = () => {
         )
       }
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     openEditionMinterDetails?.mintingDetails?.selectedMintToken,
     openEditionMinterDetails?.collectionDetails?.updatable,
-    wallet.client,
+    wallet.isWalletConnected,
   ])
 
   const fetchVendingFactoryParameters = useCallback(async () => {
-    const client = wallet.client
-    if (!client) return
+    const client = await wallet.getCosmWasmClient()
     const vendingFactoryForSelectedDenom = vendingMinterList
       .concat(flexibleVendingMinterList)
       .find(
         (minter) =>
           minter.supportedToken === mintingDetails?.selectedMintToken &&
           minter.updatable === collectionDetails?.updatable &&
-          minter.flexible === (whitelistDetails?.whitelistType === 'flex'),
+          minter.flexible === (whitelistDetails?.whitelistType === 'flex') &&
+          minter.featured === isFeaturedCollection,
       )?.factoryAddress
+
     if (vendingFactoryForSelectedDenom) {
+      setIsMatchingVendingFactoryPresent(true)
       setVendingFactoryAddress(vendingFactoryForSelectedDenom)
       const vendingFactoryParameters = await client
         .queryContractSmart(vendingFactoryForSelectedDenom, { params: {} })
@@ -1222,17 +1307,20 @@ const CollectionCreationPage: NextPage = () => {
       setMintTokenFromVendingFactory(
         tokensList.find((token) => token.denom === vendingFactoryParameters?.params?.min_mint_price?.denom),
       )
+    } else if (mintingDetails?.selectedMintToken && whitelistDetails?.whitelistState) {
+      setIsMatchingVendingFactoryPresent(false)
     }
   }, [
     collectionDetails?.updatable,
     mintingDetails?.selectedMintToken,
-    wallet.client,
+    wallet.isWalletConnected,
     whitelistDetails?.whitelistState,
     whitelistDetails?.whitelistType,
+    isFeaturedCollection,
   ])
 
   const checkwalletBalance = async () => {
-    const walletBalance = await wallet.client?.getBalance(wallet.address, 'ustars').then((balance) => {
+    await (await wallet.getCosmWasmClient()).getBalance(wallet.address || '', 'ustars').then((balance) => {
       if (minterType === 'vending' && whitelistDetails?.whitelistState === 'new' && whitelistDetails.memberLimit) {
         const amountNeeded =
           Math.ceil(Number(whitelistDetails.memberLimit) / 1000) * 100000000 +
@@ -1268,6 +1356,68 @@ const CollectionCreationPage: NextPage = () => {
     })
   }
 
+  const exportDetails = () => {
+    const details = {
+      minterType,
+      collectionDetails,
+      uploadDetails,
+      mintingDetails,
+      whitelistDetails,
+      royaltyDetails,
+      baseMinterDetails,
+      openEditionMinterDetails,
+      vendingMinterContractAddress,
+      baseTokenUri: `${baseTokenUri?.startsWith('ipfs://') ? baseTokenUri : `ipfs://${baseTokenUri}`}`,
+      coverImageUrl:
+        uploadDetails?.uploadMethod === 'new'
+          ? `ipfs://${coverImageUrl}/${collectionDetails?.imageFile[0]?.name as string}`
+          : `${coverImageUrl}`,
+    }
+    const element = document.createElement('a')
+    const file = new Blob([JSON.stringify(details)], { type: 'text/plain' })
+    element.href = URL.createObjectURL(file)
+    element.download = `${
+      minterType === 'vending'
+        ? collectionDetails?.name
+          ? `${collectionDetails.name}-`
+          : ''
+        : openEditionMinterDetails?.collectionDetails
+        ? `${openEditionMinterDetails.collectionDetails.name}-`
+        : ''
+    }configuration-${new Date().toLocaleString().replaceAll(',', '_')}.json`
+    document.body.appendChild(element) // Required for this to work in FireFox
+    element.click()
+  }
+  const importDetails = (event: ChangeEvent<HTMLInputElement>) => {
+    if (event.target.files === null || event.target.files.length === 0) return toast.error('No files selected.')
+    const file = event.target.files[0]
+    const reader = new FileReader()
+    reader.onload = (e) => {
+      const contents = e.target?.result
+      const details = JSON.parse(contents as string)
+      setMinterType(details.minterType)
+      if (details.vendingMinterContractAddress) {
+        details.uploadDetails.uploadMethod = 'existing'
+        details.uploadDetails.baseTokenURI = details.baseTokenUri
+        details.uploadDetails.imageUrl = details.coverImageUrl
+      }
+      if (details.openEditionMinterDetails?.openEditionMinterContractAddress) {
+        details.openEditionMinterDetails.offChainMetadataUploadDetails.uploadMethod = 'existing'
+        details.openEditionMinterDetails.offChainMetadataUploadDetails.tokenURI =
+          details.openEditionMinterDetails.tokenUri
+        details.openEditionMinterDetails.offChainMetadataUploadDetails.imageUrl =
+          details.openEditionMinterDetails.coverImageUrl
+      }
+      if (NETWORK === 'mainnet') {
+        if (details.collectionDetails.updatable) details.collectionDetails.updatable = false
+        if (details.collectionDetails.updatable) details.openEditionMinterDetails.collectionDetails.updatable = false
+      }
+
+      setImportedDetails(details)
+    }
+    reader.readAsText(file)
+  }
+
   const syncCollections = useCallback(async () => {
     const collectionAddress =
       minterType === 'openEdition' ? openEditionMinterCreatorData?.sg721ContractAddress : sg721ContractAddress
@@ -1319,8 +1469,11 @@ const CollectionCreationPage: NextPage = () => {
   }, [minterType, baseMinterDetails?.baseMinterAcquisitionMethod, uploadDetails?.uploadMethod])
 
   useEffect(() => {
-    void fetchInitialFactoryParameters()
-  }, [wallet.client])
+    if (!initialParametersFetched) {
+      void fetchInitialFactoryParameters()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [wallet.isWalletConnected])
 
   useEffect(() => {
     void fetchOpenEditionFactoryParameters()
@@ -1359,6 +1512,7 @@ const CollectionCreationPage: NextPage = () => {
           on how to create your collection
         </p>
       </div>
+
       <div className="mx-10" ref={scrollRef}>
         <Conditional
           test={minterType === 'openEdition' && openEditionMinterCreatorData?.openEditionMinterContractAddress !== null}
@@ -1411,9 +1565,7 @@ const CollectionCreationPage: NextPage = () => {
                 <Anchor
                   className="text-white"
                   external
-                  href={`${STARGAZE_URL}/launchpad/${
-                    openEditionMinterCreatorData?.openEditionMinterContractAddress as string
-                  }`}
+                  href={`${STARGAZE_URL}/launchpad/${openEditionMinterCreatorData?.sg721ContractAddress as string}`}
                 >
                   View on Launchpad
                 </Anchor>
@@ -1564,7 +1716,7 @@ const CollectionCreationPage: NextPage = () => {
                     <Anchor
                       className="text-white"
                       external
-                      href={`${STARGAZE_URL}/launchpad/${vendingMinterContractAddress as string}`}
+                      href={`${STARGAZE_URL}/launchpad/${sg721ContractAddress as string}`}
                     >
                       View on Launchpad
                     </Anchor>
@@ -1597,7 +1749,8 @@ const CollectionCreationPage: NextPage = () => {
           className={clsx(
             'mx-10 mt-5',
             'grid before:absolute relative grid-cols-3 grid-flow-col items-stretch rounded',
-            'before:inset-x-0 before:bottom-0 before:border-white/25',
+            'before:inset-x-0 before:bottom-0  before:border-white/25',
+            minterType !== 'base' ? 'rounded-none border-b-2 border-white/25' : 'border-0',
           )}
         >
           <div
@@ -1671,6 +1824,22 @@ const CollectionCreationPage: NextPage = () => {
         </div>
       </div>
 
+      <Conditional test={minterType !== 'base'}>
+        <FormControl className={clsx('py-4 px-10 w-full')} title="Import Creation Configuration">
+          <div className="flex flex-row justify-between mt-5 space-x-2">
+            <input
+              accept="application/json"
+              className="py-4 px-4 w-1/3 rounded-sm border-[1px] border-zinc-500 border-dashed"
+              onChange={(e) => importDetails(e)}
+              type="file"
+            />
+            <Button className="mt-3 h-1/2 w-1/8" onClick={() => exportDetails()}>
+              Export Creation Configuration
+            </Button>
+          </div>
+        </FormControl>
+      </Conditional>
+
       {minterType === 'base' && (
         <div>
           <BaseMinterDetails minterType={minterType} onChange={setBaseMinterDetails} />
@@ -1678,6 +1847,7 @@ const CollectionCreationPage: NextPage = () => {
       )}
       <Conditional test={minterType === 'openEdition'}>
         <OpenEditionMinterCreator
+          importedOpenEditionMinterDetails={importedDetails?.openEditionMinterDetails}
           minimumMintPrice={minimumOpenEditionMintPrice as string}
           minimumUpdatableMintPrice={minimumOpenEditionUpdatableMintPrice as string}
           mintTokenFromFactory={mintTokenFromOpenEditionFactory}
@@ -1692,11 +1862,28 @@ const CollectionCreationPage: NextPage = () => {
         <Conditional test={minterType === 'vending' || minterType === 'base'}>
           <UploadDetails
             baseMinterAcquisitionMethod={baseMinterDetails?.baseMinterAcquisitionMethod}
+            importedUploadDetails={importedDetails?.uploadDetails}
             minterType={minterType}
             onChange={setUploadDetails}
           />
         </Conditional>
 
+        <Conditional test={minterType === 'vending'}>
+          <div className="flex-row p-2 mb-3 w-full rounded border-2 border-white/20 form-control">
+            <label className="justify-start ml-8 w-2/5 cursor-pointer label">
+              <span className="mr-2 font-bold">Is this a featured collection?</span>
+              <input
+                checked={isFeaturedCollection}
+                className={`${isFeaturedCollection ? `bg-stargaze` : `bg-gray-600`} checkbox`}
+                onClick={() => {
+                  setIsFeaturedCollection(!isFeaturedCollection)
+                }}
+                type="checkbox"
+              />
+            </label>
+          </div>
+        </Conditional>
+
         <Conditional
           test={
             minterType === 'vending' ||
@@ -1712,6 +1899,7 @@ const CollectionCreationPage: NextPage = () => {
             >
               <CollectionDetails
                 coverImageUrl={coverImageUrl as string}
+                importedCollectionDetails={importedDetails?.collectionDetails}
                 minterType={minterType}
                 onChange={setCollectionDetails}
                 uploadMethod={uploadDetails?.uploadMethod as UploadMethod}
@@ -1719,6 +1907,8 @@ const CollectionCreationPage: NextPage = () => {
             </Conditional>
             <Conditional test={minterType === 'vending'}>
               <MintingDetails
+                importedMintingDetails={importedDetails?.mintingDetails}
+                isPresale={whitelistDetails?.whitelistState === 'new'}
                 minimumMintPrice={
                   whitelistDetails?.whitelistState !== 'none' && whitelistDetails?.whitelistType === 'flex'
                     ? Number(minimumFlexMintPrice) / 1000000
@@ -1730,6 +1920,7 @@ const CollectionCreationPage: NextPage = () => {
                 numberOfTokens={uploadDetails?.assetFiles.length}
                 onChange={setMintingDetails}
                 uploadMethod={uploadDetails?.uploadMethod as UploadMethod}
+                whitelistStartDate={whitelistDetails?.startTime}
               />
             </Conditional>
           </div>
@@ -1743,6 +1934,13 @@ const CollectionCreationPage: NextPage = () => {
             <Alert className="mt-4" type="info">
               Setting the unit price as 0 for public minting may render the collection vulnerable for bot attacks.
               Please consider creating a whitelist of addresses that can mint for free instead.
+              <br />
+              <div className="flex flex-row justify-start">
+                <span className="mt-2 mr-2">You may export a list of active Stargaze addresses using</span>
+                <AnchorButton className="font-bold text-white hover:underline" external href="/snapshots/chain">
+                  Snapshots
+                </AnchorButton>
+              </div>
             </Alert>
           </Conditional>
         </Conditional>
@@ -1755,10 +1953,14 @@ const CollectionCreationPage: NextPage = () => {
         >
           <div className="my-6">
             <Conditional test={minterType === 'vending'}>
-              <WhitelistDetails mintingTokenFromFactory={mintTokenFromVendingFactory} onChange={setWhitelistDetails} />
+              <WhitelistDetails
+                importedWhitelistDetails={importedDetails?.whitelistDetails}
+                mintingTokenFromFactory={mintTokenFromVendingFactory}
+                onChange={setWhitelistDetails}
+              />
               <div className="my-6" />
             </Conditional>
-            <RoyaltyDetails onChange={setRoyaltyDetails} />
+            <RoyaltyDetails importedRoyaltyDetails={importedDetails?.royaltyDetails} onChange={setRoyaltyDetails} />
           </div>
         </Conditional>
         <Conditional test={readyToCreateVm && minterType === 'vending'}>

pages/collections/myCollections.tsx

@@ -11,16 +11,16 @@ import { Anchor } from 'components/Anchor'
 import { Conditional } from 'components/Conditional'
 import { ContractPageHeader } from 'components/ContractPageHeader'
 import { Tooltip } from 'components/Tooltip'
-import { useWallet } from 'contexts/wallet'
 import type { NextPage } from 'next'
 import { NextSeo } from 'next-seo'
 import { useCallback, useEffect, useState } from 'react'
-import { FaCopy, FaRocket, FaSlidersH, FaStore } from 'react-icons/fa'
+import { FaCopy, FaList, FaRocket, FaSlidersH, FaStore } from 'react-icons/fa'
 import { copy } from 'utils/clipboard'
 import { API_URL, STARGAZE_URL } from 'utils/constants'
 import { withMetadata } from 'utils/layout'
 import { links } from 'utils/links'
 import { truncateMiddle } from 'utils/text'
+import { useWallet } from 'utils/wallet'
 
 const CollectionList: NextPage = () => {
   const wallet = useWallet()
@@ -30,8 +30,8 @@ const CollectionList: NextPage = () => {
   const [myOpenEditionCollections, setMyOpenEditionCollections] = useState<any[]>([])
 
   async function getMinterContractType(minterContractAddress: string) {
-    if (wallet.client && minterContractAddress.length > 0) {
-      const client = wallet.client
+    if (wallet.isWalletConnected && minterContractAddress.length > 0) {
+      const client = await wallet.getCosmWasmClient()
       const data = await client.queryContractRaw(
         minterContractAddress,
         toUtf8(Buffer.from(Buffer.from('contract_info').toString('hex'), 'hex').toString()),
@@ -48,10 +48,16 @@ const CollectionList: NextPage = () => {
     if (myCollections.length > 0) {
       myCollections.map(async (collection: any) => {
         await getMinterContractType(collection.minter)
-          .then((contractType) => {
+          .then(async (contractType) => {
             if (contractType?.includes('sg-base-minter')) {
               setMyOneOfOneCollections((prevState) => [...prevState, collection])
             } else if (contractType?.includes('sg-minter') || contractType?.includes('flex')) {
+              const minterConfig = await (await wallet.getCosmWasmClient())
+                .queryContractSmart(collection.minter, { config: {} })
+                .catch(() => {
+                  console.log('Unable to retrieve minter config')
+                })
+              if (minterConfig?.whitelist) collection.whitelist = minterConfig.whitelist
               setMyStandardCollections((prevState) => [...prevState, collection])
             } else if (contractType?.includes('open-edition')) {
               setMyOpenEditionCollections((prevState) => [...prevState, collection])
@@ -171,6 +177,31 @@ const CollectionList: NextPage = () => {
                                 </Tooltip>
                               </span>
                             </div>
+                            <Conditional test={collection.whitelist}>
+                              <div className="flex flex-row items-center space-x-3">
+                                Whitelist:
+                                <span className="ml-2">
+                                  <Tooltip
+                                    backgroundColor="bg-blue-500"
+                                    label="Click to copy the whitelist contract address"
+                                  >
+                                    <button
+                                      className="group flex space-x-2 font-mono text-base text-white/80 hover:underline"
+                                      onClick={() => void copy(collection.whitelist as string)}
+                                      type="button"
+                                    >
+                                      <span>
+                                        {truncateMiddle(
+                                          collection.whitelist ? (collection.whitelist as string) : '',
+                                          36,
+                                        )}
+                                      </span>
+                                      <FaCopy className="opacity-0 group-hover:opacity-100" />
+                                    </button>
+                                  </Tooltip>
+                                </span>
+                              </div>
+                            </Conditional>
                           </td>
                           <th className="bg-black">
                             <div className="flex items-center space-x-8">
@@ -187,6 +218,14 @@ const CollectionList: NextPage = () => {
                               >
                                 <FaRocket />
                               </Anchor>
+                              <Conditional test={collection.whitelist}>
+                                <Anchor
+                                  className="text-xl text-white"
+                                  href={`/contracts/whitelist/execute/?contractAddress=${collection.whitelist}`}
+                                >
+                                  <FaList />
+                                </Anchor>
+                              </Conditional>
                             </div>
                           </th>
                         </tr>

pages/contracts/badgeHub/execute.tsx

@@ -27,7 +27,7 @@ import { Tooltip } from 'components/Tooltip'
 import { TransactionHash } from 'components/TransactionHash'
 import { WhitelistUpload } from 'components/WhitelistUpload'
 import { useContracts } from 'contexts/contracts'
-import { useWallet } from 'contexts/wallet'
+import { useGlobalSettings } from 'contexts/globalSettings'
 import type { Badge } from 'contracts/badgeHub'
 import type { DispatchExecuteArgs } from 'contracts/badgeHub/messages/execute'
 import { dispatchExecute, isEitherType, previewExecutePayload } from 'contracts/badgeHub/messages/execute'
@@ -52,6 +52,7 @@ import { withMetadata } from 'utils/layout'
 import { links } from 'utils/links'
 import { resolveAddress } from 'utils/resolveAddress'
 import { truncateMiddle } from 'utils/text'
+import { useWallet } from 'utils/wallet'
 
 import { TextInput } from '../../../components/forms/FormInput'
 import { MetadataAttributes } from '../../../components/forms/MetadataAttributes'
@@ -63,6 +64,7 @@ const BadgeHubExecutePage: NextPage = () => {
   const wallet = useWallet()
   const [lastTx, setLastTx] = useState('')
   const [badge, setBadge] = useState<Badge>()
+  const { timezone } = useGlobalSettings()
 
   const [timestamp, setTimestamp] = useState<Date | undefined>(undefined)
   const [transferrable, setTransferrable] = useState<boolean>(false)
@@ -247,7 +249,10 @@ const BadgeHubExecutePage: NextPage = () => {
   const showPubkeyField = isEitherType(type, ['mint_by_keys'])
   const showPrivateKeyField = isEitherType(type, ['mint_by_key', 'mint_by_keys'])
 
-  const messages = useMemo(() => contract?.use(contractState.value), [contract, wallet.address, contractState.value])
+  const messages = useMemo(
+    () => contract?.use(contractState.value),
+    [contract, wallet.address, contractState.value, wallet.isWalletConnected],
+  )
   const payload: DispatchExecuteArgs = {
     badge: {
       manager: badge?.manager || managerState.value,
@@ -321,7 +326,7 @@ const BadgeHubExecutePage: NextPage = () => {
     editFee,
     contract: contractState.value,
     messages,
-    txSigner: wallet.address,
+    txSigner: wallet.address || '',
     type,
   }
   const { isLoading, mutate } = useMutation(
@@ -330,14 +335,15 @@ const BadgeHubExecutePage: NextPage = () => {
       if (!type) {
         throw new Error('Please select message type!')
       }
-      if (!wallet.initialized) {
+      if (!wallet.isWalletConnected) {
         throw new Error('Please connect your wallet.')
       }
       if (contractState.value === '') {
         throw new Error('Please enter the contract address.')
       }
-      if (wallet.client && type === 'edit_badge') {
-        const feeRateRaw = await wallet.client.queryContractRaw(
+      if (type === 'edit_badge') {
+        const client = await wallet.getCosmWasmClient()
+        const feeRateRaw = await client.queryContractRaw(
           contractAddress,
           toUtf8(Buffer.from(Buffer.from('fee_rate').toString('hex'), 'hex').toString()),
         )
@@ -345,7 +351,7 @@ const BadgeHubExecutePage: NextPage = () => {
 
         await toast
           .promise(
-            wallet.client.queryContractSmart(contractAddress, {
+            client.queryContractSmart(contractAddress, {
               badge: { id: badgeIdState.value },
             }),
             {
@@ -486,6 +492,9 @@ const BadgeHubExecutePage: NextPage = () => {
     if (contractAddress.length > 0) {
       void router.replace({ query: { contractAddress } })
     }
+    if (contractAddress.length === 0) {
+      void router.replace({ query: {} })
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [contractAddress])
 
@@ -896,8 +905,32 @@ const BadgeHubExecutePage: NextPage = () => {
           </FormControl>
           <div className="pt-9">
             <Conditional test={showBadgeField}>
-              <FormControl htmlId="expiry-date" subtitle="Badge minting expiry date" title="Expiry Date">
-                <InputDateTime minDate={new Date()} onChange={(date) => setTimestamp(date)} value={timestamp} />
+              <FormControl
+                htmlId="expiry-date"
+                subtitle={`Badge minting expiry date ${timezone === 'Local' ? '(local)' : '(UTC)'}`}
+                title="Expiry Date"
+              >
+                <InputDateTime
+                  minDate={
+                    timezone === 'Local'
+                      ? new Date()
+                      : new Date(Date.now() + new Date().getTimezoneOffset() * 60 * 1000)
+                  }
+                  onChange={(date) =>
+                    setTimestamp(
+                      timezone === 'Local'
+                        ? date
+                        : new Date(date.getTime() - new Date().getTimezoneOffset() * 60 * 1000),
+                    )
+                  }
+                  value={
+                    timezone === 'Local'
+                      ? timestamp
+                      : timestamp
+                      ? new Date(timestamp.getTime() + new Date().getTimezoneOffset() * 60 * 1000)
+                      : undefined
+                  }
+                />
               </FormControl>
             </Conditional>
             {showBadgeField && <NumberInput className="mt-2" {...maxSupplyState} />}