Use cosmos kit

README.md

@@ -38,12 +38,13 @@ You don’t need to install or configure cosmjs, keplr, nextjs, webpack or Babel
 
 Everything is preconfigured, ready-to-go, so you can focus on your code!
 
-- ⚡️ Connect easily to 15+ wallets via [Cosmos Kit](https://github.com/cosmology-tech/cosmos-kit) — including Ledger, Keplr, Cosmostation, Leap, Trust Wallet, XDEFI, Exodus, Wallet Connect and more!
+- ⚡️ Connect easily to 20+ wallets via [Cosmos Kit](https://github.com/cosmology-tech/cosmos-kit) — including Ledger, Keplr, Cosmostation, Leap, Trust Wallet, OKX, XDEFI, Exodus, Wallet Connect and more!
 - ⚛️ Sign and broadcast with [cosmjs](https://github.com/cosmos/cosmjs) stargate + cosmwasm signers
+- 🎨 Build awesome UI with [Interchain UI](https://cosmology.zone/products/interchain-ui) and [Explore Components](https://cosmology.zone/explore)
 - 🛠 Render pages with [next.js](https://nextjs.org/) hybrid static & server rendering
-- 🎨 Build awesome UI with [Cosmos Kit UI](https://CosmosKit.com/explore) and [Chakra UI](https://chakra-ui.com/docs/components)
 - 📝 Leverage [chain-registry](https://github.com/cosmology-tech/chain-registry) for Chain and Asset info for all Cosmos chains
 
+
 ## Education & Resources
 
 🎥 [Checkout our videos](https://cosmology.zone/learn) to learn to learn more about `create-cosmos-app` and tooling for building frontends in the Cosmos!

examples/asset-list-chakra/components/asset-list/AmountInput.tsx

@@ -8,7 +8,7 @@ import {
   useColorModeValue,
   Skeleton,
 } from '@chakra-ui/react';
-import { ChainName } from '@cosmos-kit/core';
+import { ChainName } from 'cosmos-kit';
 import BigNumber from 'bignumber.js';
 import React, { useMemo } from 'react';
 import { useBalance, useChainUtils } from '../../hooks';

examples/asset-list-chakra/components/asset-list/AssetListSection.tsx

@@ -10,7 +10,7 @@ import AssetsOverview from './AssetsOverview';
 import ChainAssetsList from './ChainAssetsList';
 import { useChain } from '@cosmos-kit/react';
 import { useAssets } from '../../hooks';
-import { ChainName } from '@cosmos-kit/core';
+import { ChainName } from 'cosmos-kit';
 
 interface IProps {
   chainName: ChainName;

examples/asset-list-chakra/components/asset-list/AssetsOverview.tsx

@@ -14,7 +14,7 @@ import { PrettyAsset, Transfer, TransferInfo } from './types';
 import { useChainUtils, useTotalAssets } from '../../hooks';
 import { useChain } from '@cosmos-kit/react';
 import BigNumber from 'bignumber.js';
-import { ChainName } from '@cosmos-kit/core';
+import { ChainName } from 'cosmos-kit';
 
 interface IProps {
   assets: PrettyAsset[];

examples/asset-list-chakra/components/asset-list/ChainAssetsList.tsx

@@ -16,7 +16,7 @@ import React, { useMemo, useState } from 'react';
 import { PrettyAsset, PriceHash, Transfer, TransferInfo } from './types';
 import { SimpleButton } from './Buttons';
 import TransferModal from './TransferModal';
-import { ChainName } from '@cosmos-kit/core';
+import { ChainName } from 'cosmos-kit';
 import { useChainUtils } from '../../hooks';
 import { truncDecimals, formatDollarValue } from '@/utils';
 

examples/asset-list-chakra/components/asset-list/DropdownInput.tsx

@@ -22,7 +22,7 @@ import {
 } from './types';
 import BigNumber from 'bignumber.js';
 import { useBalance, useChainUtils } from '../../hooks';
-import { ChainName } from '@cosmos-kit/core';
+import { ChainName } from 'cosmos-kit';
 import { truncDecimals } from '@/utils';
 
 interface IProps {

examples/asset-list-chakra/components/asset-list/DropdownTransferModal.tsx

@@ -24,7 +24,7 @@ import { useChainWallet, useManager } from '@cosmos-kit/react';
 import BigNumber from 'bignumber.js';
 import { StdFee, coins } from '@cosmjs/amino';
 import { useChainUtils, useTx } from '../../hooks';
-import { ChainName } from '@cosmos-kit/core';
+import { ChainName } from 'cosmos-kit';
 import { KeplrWalletName } from '@/config';
 import { ibc } from 'osmo-query';
 

examples/asset-list-chakra/components/asset-list/TransferModal.tsx

@@ -23,7 +23,7 @@ import { LargeButton } from './Buttons';
 import { PriceHash, TransferInfo } from './types';
 import { useChainWallet, useManager } from '@cosmos-kit/react';
 import BigNumber from 'bignumber.js';
-import { ChainName } from '@cosmos-kit/core';
+import { ChainName } from 'cosmos-kit';
 import { coins, StdFee } from '@cosmjs/amino';
 import { useChainUtils, useTx } from '../../hooks';
 import { KeplrWalletName } from '@/config';

examples/asset-list-chakra/components/wallet/AddressCard.tsx

@@ -7,7 +7,7 @@ import {
   useColorMode,
   Image,
 } from '@chakra-ui/react';
-import { WalletStatus } from '@cosmos-kit/core';
+import { WalletStatus } from 'cosmos-kit';
 import { FaCheckCircle } from 'react-icons/fa';
 import { FiCopy } from 'react-icons/fi';
 import React, { ReactNode, useEffect, useState } from 'react';
@@ -156,10 +156,10 @@ export const ConnectedShowAddress = ({
             hasCopied
               ? 'green.400'
               : handleChangeColorModeValue(
-                  colorMode,
-                  'gray.500',
-                  'whiteAlpha.400'
-                )
+                colorMode,
+                'gray.500',
+                'whiteAlpha.400'
+              )
           }
         />
       )}

examples/asset-list-chakra/components/wallet/Wallet.tsx

@@ -11,7 +11,7 @@ import {
 import { MouseEventHandler, useEffect, useMemo } from 'react';
 import { FiAlertTriangle } from 'react-icons/fi';
 
-import { ChainName } from '@cosmos-kit/core';
+import { ChainName } from 'cosmos-kit';
 import { defaultChainName } from '@/config';
 import {
   Connected,

examples/asset-list-chakra/components/wallet/WalletConnect.tsx

@@ -2,7 +2,7 @@ import React, { MouseEventHandler, ReactNode } from 'react';
 import { Button, Icon, Stack, Text, useColorModeValue } from '@chakra-ui/react';
 import { IoWallet } from 'react-icons/io5';
 import { FiAlertTriangle } from 'react-icons/fi';
-import { WalletStatus } from '@cosmos-kit/core';
+import { WalletStatus } from 'cosmos-kit';
 import { IconType } from 'react-icons';
 
 interface IConnectWalletButton {

examples/asset-list-chakra/components/wallet/WarnBlock.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
 import { Box, Stack, Text, useColorModeValue } from '@chakra-ui/react';
-import { WalletStatus } from '@cosmos-kit/core';
+import { WalletStatus } from 'cosmos-kit';
 
 export const WarnBlock = ({
   wordOfWarning,

examples/asset-list-chakra/hooks/useChainUtils.ts

@@ -7,7 +7,7 @@ import { CoinDenom, CoinSymbol, Exponent, PriceHash } from '../utils/types';
 import BigNumber from 'bignumber.js';
 import { Coin } from '@cosmjs/amino';
 import { PrettyAsset } from '../components';
-import { ChainName } from '@cosmos-kit/core';
+import { ChainName } from 'cosmos-kit';
 
 export const useChainUtils = (chainName: string) => {
   const { getChainRecord } = useManager();

examples/asset-list-chakra/package.json

@@ -11,6 +11,12 @@
     "locks:create": "generate-lockfile --lockfile ../../yarn.lock --package package.json --write yarn.lock --force",
     "locks": "npm run locks:remove && npm run locks:create"
   },
+  "resolutions": {
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "@types/react": "18.0.25",
+    "@types/react-dom": "18.0.9"
+  },
   "dependencies": {
     "@chain-registry/assets": "1.21.0",
     "@chain-registry/osmosis": "1.21.0",
@@ -21,20 +27,17 @@
     "@cosmjs/cosmwasm-stargate": "0.31.1",
     "@cosmjs/stargate": "0.31.1",
     "@cosmology-ui/react": "0.1.8-beta.30",
-    "@cosmos-kit/core": "^2.6.6",
-    "@cosmos-kit/cosmostation": "^2.3.11",
-    "@cosmos-kit/keplr": "^2.3.13",
-    "@cosmos-kit/leap": "^2.3.10",
-    "@cosmos-kit/react": "^2.8.4",
+    "@cosmos-kit/react": "2.10.5",
     "@emotion/styled": "11.10.6",
-    "@interchain-ui/react": "^1.20.4",
+    "@interchain-ui/react": "1.20.5",
     "@tanstack/react-query": "4.32.0",
     "bignumber.js": "9.1.1",
     "chain-registry": "1.20.0",
+    "cosmos-kit": "2.8.0",
     "chakra-react-select": "4.4.3",
     "fast-fuzzy": "1.12.0",
     "framer-motion": "9.0.7",
-    "next": "12.2.5",
+    "next": "^13",
     "osmo-query": "16.5.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -52,4 +55,4 @@
     "generate-lockfile": "0.0.12",
     "typescript": "4.9.3"
   }
-}
+}

examples/asset-list-chakra/pages/_app.tsx

@@ -1,17 +1,17 @@
 import '../styles/globals.css';
 import type { AppProps } from 'next/app';
-import { ChainProvider } from '@cosmos-kit/react';
+
 import { ChakraProvider } from '@chakra-ui/react';
-import { aminoTypes, registry } from '../config/defaults';
-import { wallets as keplr } from '@cosmos-kit/keplr';
-import { wallets as cosmostation } from '@cosmos-kit/cosmostation';
-import { wallets as leap } from '@cosmos-kit/leap';
 import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
 // import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 
+import { SignerOptions, wallets } from 'cosmos-kit';
+import { ChainProvider } from '@cosmos-kit/react';
 import { assets, chains } from 'chain-registry';
+
 import { GasPrice } from '@cosmjs/stargate';
-import { SignerOptions } from '@cosmos-kit/core';
+import { aminoTypes, registry } from '../config/defaults';
+
 import { ThemeProvider, defaultTheme } from '@cosmology-ui/react';
 import '@interchain-ui/react/styles';
 
@@ -49,15 +49,15 @@ function CreateCosmosApp({ Component, pageProps }: AppProps) {
         <ChainProvider
           chains={chains}
           assetLists={assets}
-          wallets={[...keplr, ...cosmostation, ...leap]}
+          wallets={wallets}
           walletConnectOptions={{
             signClient: {
               projectId: 'a8510432ebb71e6948cfd6cde54b70f7',
               relayUrl: 'wss://relay.walletconnect.org',
               metadata: {
                 name: 'CosmosKit Template',
                 description: 'CosmosKit dapp template',
-                url: 'https://docs.cosmoskit.com/',
+                url: 'https://docs.cosmology.zone/cosmos-kit/',
                 icons: [],
               },
             },

examples/asset-list-chakra/pages/multi-chain.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import NoSSR from 'react-no-ssr';
-import { ChainName } from '@cosmos-kit/core';
+import { ChainName } from 'cosmos-kit';
 import { AssetListSection, Layout, WalletSection } from '@/components';
 
 export default function MultiChain() {