index.tsx

import "../styles/globals.css";
import type { AppProps } from "next/app";
import { WalletProvider } from "@cosmos-kit/react";
import { ChakraProvider } from "@chakra-ui/react";
import { defaultTheme } from "../config";
import { wallets } from "@cosmos-kit/keplr";
import { assets, chains } from "chain-registry";
import { getSigningCosmosClientOptions } from "osmojs";
import { GasPrice } from "@cosmjs/stargate";
import { OfflineSigner, GeneratedType, Registry } from "@cosmjs/proto-signing";
import { AminoTypes, SigningStargateClient } from "@cosmjs/stargate";

import { SignerOptions } from "@cosmos-kit/core";
import { Chain } from "@chain-registry/types";

import {
  cosmosAminoConverters,
  cosmosProtoRegistry,
  cosmwasmAminoConverters,
  cosmwasmProtoRegistry,
  ibcProtoRegistry,
  ibcAminoConverters,
  osmosisAminoConverters,
  osmosisProtoRegistry,
} from "osmojs";
import { SigningCosmWasmClientOptions } from "@cosmjs/cosmwasm-stargate";

const protoRegistry: ReadonlyArray<[string, GeneratedType]> = [
  ...cosmosProtoRegistry,
  ...osmosisProtoRegistry,
  ...cosmwasmProtoRegistry,
  ...ibcProtoRegistry,
];

const aminoConverters = {
  ...cosmosAminoConverters,
  ...osmosisAminoConverters,
  ...cosmwasmAminoConverters,
  ...ibcAminoConverters,
};

const registry = new Registry(protoRegistry);
const aminoTypes = new AminoTypes(aminoConverters);

function CreateCosmosApp({ Component, pageProps }: AppProps) {
  const signerOptions: SignerOptions = {
    stargate: (_chain: Chain) => {
      return getSigningCosmosClientOptions();
    },
    cosmwasm: (chain: Chain): SigningCosmWasmClientOptions | undefined => {
      switch (chain.chain_name) {
        case "osmosis":
        case "osmosistestnet":
          return {
            gasPrice: GasPrice.fromString("0.0025uosmo"),
            registry,
            aminoTypes,
          };
      }
    },
  };

  return (
    <ChakraProvider theme={defaultTheme}>
      <WalletProvider
        chains={chains}
        assetLists={assets}
        wallets={wallets}
        signerOptions={signerOptions}
      >
        <Component {...pageProps} />
      </WalletProvider>
    </ChakraProvider>
  );
}

export default CreateCosmosApp;