Use Cosmos Kit with Keplr Extension support.

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

@@ -12,12 +12,12 @@ import { useInputState, useNumberInputState } from 'components/forms/FormInput.h
 import { useMetadataAttributesState } from 'components/forms/MetadataAttributes.hooks'
 import { InputDateTime } from 'components/InputDateTime'
 import { useGlobalSettings } from 'contexts/globalSettings'
-import { useWallet } from 'contexts/wallet'
 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'
@@ -47,7 +47,7 @@ export interface BadgeDetailsDataProps {
 }
 
 export const BadgeDetails = ({ metadataSize, onChange, uploadMethod }: BadgeDetailsProps) => {
-  const wallet = useWallet()
+  const { address = '', isWalletConnected, getCosmWasmClient } = useWallet()
   const { timezone } = useGlobalSettings()
   const [timestamp, setTimestamp] = useState<Date | undefined>(undefined)
   const [transferrable, setTransferrable] = useState<boolean>(false)
@@ -61,7 +61,7 @@ export const BadgeDetails = ({ metadataSize, onChange, uploadMethod }: BadgeDeta
     name: 'manager',
     title: 'Manager',
     subtitle: 'Badge Hub Manager',
-    defaultValue: wallet.address ? wallet.address : '',
+    defaultValue: address,
   })
 
   const nameState = useInputState({
@@ -247,8 +247,10 @@ export const BadgeDetails = ({ metadataSize, onChange, uploadMethod }: BadgeDeta
   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()),
           )
@@ -263,7 +265,7 @@ export const BadgeDetails = ({ metadataSize, onChange, uploadMethod }: BadgeDeta
       }
     }
     void retrieveFeeRate()
-  }, [wallet.client])
+  }, [isWalletConnected, getCosmWasmClient])
 
   return (
     <div>

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