CosmosKitProvider.tsx

import { ReactNode, useEffect } from "react";
import { ChainProvider } from "@cosmos-kit/react";
import { GasPrice } from "@cosmjs/stargate";
import { SignerOptions } from "@cosmos-kit/core";
import { Chain, AssetList } from "@chain-registry/types";
import { wallets } from "@cosmos-kit/keplr-extension";
import { getSigningPryzmClientOptions } from "@pryzm-finance/pryzmjs";
import { wallets as leap } from "@cosmos-kit/leap-extension";
import { wallets as station } from "@cosmos-kit/station";

type Props = {
  children: ReactNode;
};

const localChain: Chain = {
  chain_name: process.env.NEXT_PUBLIC_PRYZM_CHAIN_NAME,
  chain_id: process.env.NEXT_PUBLIC_PRYZM_CHAIN_ID,
  status: "live",
  network_type: "testnet",
  pretty_name: "Pryzm Testnet",
  bech32_prefix: "pryzm",
  slip44: 118,
  staking: {
    staking_tokens: [
      {
        denom: "upryzm",
      },
    ],
  },
  fees: {
    fee_tokens: [
      {
        denom: "upryzm",
        fixed_min_gas_price: 0,
        low_gas_price: 0.015,
        average_gas_price: 0.025,
        high_gas_price: 0.04,
      },
      {
        denom: "factory/pryzm15k9s9p0ar0cx27nayrgk6vmhyec3lj7vkry7rx/uusdsim",
        fixed_min_gas_price: 0,
        low_gas_price: 0.015,
        average_gas_price: 0.025,
        high_gas_price: 0.04,
      },
    ],
  },
};

const localAssets: AssetList = {
  chain_name: process.env.NEXT_PUBLIC_PRYZM_CHAIN_NAME,
  assets: [
    {
      description: "Pryzm token",
      denom_units: [
        {
          denom: "upryzm",
          exponent: 0,
        },
        {
          denom: "pryzm",
          exponent: 6,
        },
      ],
      base: "upryzm",
      name: "Pryzm",
      display: "pryzm",
      symbol: "PRYZM",
      logo_URIs: {
        png: "https://raw.githubusercontent.com/cosmos/chain-registry/master/testnets/pryzmtestnet/images/pryzm-logo.png",
        svg: "https://raw.githubusercontent.com/cosmos/chain-registry/master/testnets/pryzmtestnet/images/pryzm-logo.svg",
      },
      coingecko_id: "pryzm",
    },
    {
      description: "USDC Sim",
      denom_units: [
        {
          denom: "factory/pryzm15k9s9p0ar0cx27nayrgk6vmhyec3lj7vkry7rx/uusdsim",
          exponent: 0,
        },
      ],
      base: "factory/pryzm15k9s9p0ar0cx27nayrgk6vmhyec3lj7vkry7rx/uusdsim",
      name: "USDC Sim",
      display: "usdcsim",
      symbol: "USDCSIM",
      logo_URIs: {
        png: "https://raw.githubusercontent.com/cosmos/chain-registry/master/prism/images/prism-token.png",
        svg: "https://raw.githubusercontent.com/cosmos/chain-registry/master/prism/images/prism-token.svg",
      },
      coingecko_id: "usdcsim",
    },
  ],
};

const defaultConfig = {
  gasPrice: GasPrice.fromString(
    "0.015factory/pryzm15k9s9p0ar0cx27nayrgk6vmhyec3lj7vkry7rx/uusdsim"
  ),
};

const signerOptions: SignerOptions = {
  signingStargate: (_chain: Chain) => {
    const { registry, aminoTypes } = getSigningPryzmClientOptions();

    return {
      registry,
      aminoTypes,
      gasPrice: defaultConfig.gasPrice,
    };
  },
  // preferredSignType: (_chain: Chain) => {
  //   return "direct";
  // },
};

export const CosmosKitProvider = ({ children }: Props) => {
  useEffect(() => {
    // if (typeof window !== "undefined" && window.keplr != null) {
    //   window.keplr.defaultOptions = {
    //     sign: {
    //       preferNoSetFee: false,
    //     },
    //   };
    // }
  }, []);

  return (
    <ChainProvider
      chains={[localChain]}
      assetLists={[localAssets]}
      wallets={[...wallets, ...leap]}
      signerOptions={signerOptions}
      endpointOptions={{
        isLazy: true,
        endpoints: {
          [process.env.NEXT_PUBLIC_PRYZM_CHAIN_NAME]: {
            rpc: [process.env.NEXT_PUBLIC_PRYZM_CHAIN_RPC_ENDPOINT],
            rest: [process.env.NEXT_PUBLIC_PRYZM_CHAIN_ENDPOINT],
          },
        },
      }}
    >
      {children}
    </ChainProvider>
  );
};

useTx.ts

import { useState, useEffect } from "react";
import { useMutation } from "@tanstack/react-query";
import { useChain } from "@cosmos-kit/react";
import { connectWithSigner } from "@pryzm-finance/pryzmjs";
import { GasPrice, calculateFee } from "@cosmjs/stargate";

import type { Msg } from "modules/common/types";
import { usePryzmWebapp } from "modules/common/context";

export const useTx = (msgs: Msg[] | null) => {
  const { addNotification, removeNotification } = usePryzmWebapp();
  const [isLoading, setIsLoading] = useState(false);
  const {
    address,
    isWalletConnected,
    getOfflineSigner,
    signAndBroadcast,
    sign,
    estimateFee,
  } = useChain(process.env.NEXT_PUBLIC_PRYZM_CHAIN_NAME);

  const { mutateAsync: submit, ...rest } = useMutation({
    mutationFn: async () => {
      if (!isWalletConnected || !address) {
        throw new Error("Wallet is not connected");
      }

      if (!msgs || msgs.length === 0) {
        throw new Error("No messages to execute");
      }

      const signer = await getOfflineSigner();

      const signingClient = await connectWithSigner(
        process.env.NEXT_PUBLIC_PRYZM_CHAIN_RPC_ENDPOINT,
        signer
      );

      const gasEstimation = await signingClient.simulate(
        address,
        msgs,
        undefined
      );
      const feeWithMultiplier = calculateFee(
        Math.round(gasEstimation * 1.6),
        GasPrice.fromString(
          "0.015factory/pryzm15k9s9p0ar0cx27nayrgk6vmhyec3lj7vkry7rx/uusdsim"
        )
      );

      return signAndBroadcast(msgs, feeWithMultiplier);
    },
    onMutate: () => {
      setIsLoading(true);
      addNotification({ pending: true });
    },
    onSettled: () => {
      setIsLoading(false);
      removeNotification({ pending: true });
    },
  });

  return {
    submit,
    canSubmit: !!msgs && msgs.length > 0,
    isLoading,
    ...rest,
  };
};