Use Cosmos Kit with Keplr Extension support.

components/collections/actions/Action.tsx

@@ -18,7 +18,6 @@ import { JsonPreview } from 'components/JsonPreview'
 import { Tooltip } from 'components/Tooltip'
 import { TransactionHash } from 'components/TransactionHash'
 import { useGlobalSettings } from 'contexts/globalSettings'
-import { useWallet } from 'contexts/wallet'
 import type { BaseMinterInstance } from 'contracts/baseMinter'
 import type { OpenEditionMinterInstance } from 'contracts/openEditionMinter'
 import type { RoyaltyRegistryInstance } from 'contracts/royaltyRegistry'
@@ -32,6 +31,7 @@ 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'
@@ -246,7 +246,7 @@ export const CollectionActions = ({
     recipient: resolvedRecipientAddress,
     recipients: airdropArray,
     tokenRecipients: airdropAllocationArray,
-    txSigner: wallet.address,
+    txSigner: wallet.address || '',
     type,
     price: priceState.value.toString(),
     baseUri: baseURIState.value.trim().endsWith('/')
@@ -335,13 +335,15 @@ export const CollectionActions = ({
         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: {},
             }),
             {
@@ -373,7 +375,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 (
@@ -403,8 +407,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()),
           )

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'
@@ -56,7 +56,7 @@ export const BaseMinterDetails = ({ onChange, minterType, importedBaseMinterDeta
 
   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) => {
@@ -70,8 +70,8 @@ export const BaseMinterDetails = ({ onChange, minterType, importedBaseMinterDeta
   }
 
   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()),
@@ -129,8 +129,10 @@ export const BaseMinterDetails = ({ onChange, minterType, importedBaseMinterDeta
 
   const fetchSg721Address = async () => {
     if (debouncedExistingBaseMinterContract.length === 0) return
-    await wallet.client
-      ?.queryContractSmart(debouncedExistingBaseMinterContract, {
+    await (
+      await wallet.getCosmWasmClient()
+    )
+      .queryContractSmart(debouncedExistingBaseMinterContract, {
         config: {},
       })
       .then((response) => {
@@ -145,8 +147,10 @@ export const BaseMinterDetails = ({ onChange, minterType, importedBaseMinterDeta
 
   const fetchCollectionTokenCount = async () => {
     if (selectedCollectionAddress === undefined) return
-    await wallet.client
-      ?.queryContractSmart(selectedCollectionAddress, {
+    await (
+      await wallet.getCosmWasmClient()
+    )
+      .queryContractSmart(selectedCollectionAddress, {
         num_tokens: {},
       })
       .then((response) => {
@@ -164,7 +168,7 @@ export const BaseMinterDetails = ({ onChange, minterType, importedBaseMinterDeta
       setMyBaseMinterContracts([])
       existingBaseMinterState.onChange('')
       void displayToast()
-    } else if (baseMinterAcquisitionMethod === 'new' || !wallet.initialized) {
+    } else if (baseMinterAcquisitionMethod === 'new' || !wallet.isWalletConnected) {
       setMyBaseMinterContracts([])
       existingBaseMinterState.onChange('')
     }
@@ -194,7 +198,7 @@ export const BaseMinterDetails = ({ onChange, minterType, importedBaseMinterDeta
   }, [
     existingBaseMinterState.value,
     baseMinterAcquisitionMethod,
-    wallet.initialized,
+    wallet.isWalletConnected,
     selectedCollectionAddress,
     collectionTokenCount,
   ])
@@ -270,7 +274,7 @@ export const BaseMinterDetails = ({ onChange, minterType, importedBaseMinterDeta
             </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.
@@ -282,7 +286,7 @@ export const BaseMinterDetails = ({ onChange, minterType, importedBaseMinterDeta
                     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/MintingDetails.tsx

@@ -10,8 +10,8 @@ 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'
 

components/collections/creation/RoyaltyDetails.tsx

@@ -1,8 +1,8 @@
 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'

components/collections/creation/WhitelistDetails.tsx

@@ -10,9 +10,9 @@ import type { WhitelistFlexMember } from 'components/WhitelistFlexUpload'
 import { WhitelistFlexUpload } from 'components/WhitelistFlexUpload'
 import type { TokenInfo } from 'config/token'
 import { useGlobalSettings } from 'contexts/globalSettings'
-import { useWallet } from 'contexts/wallet'
 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'

components/collections/queries/Queries.tsx

@@ -12,8 +12,8 @@ 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'