fix: ts && any bugs

packages/vue/src/App.vue

@@ -18,8 +18,8 @@
 import ChainProvider from "./providers/ChainProvider.vue";
 import CustomModal from "./components/CustomModal.vue";
 import { assets as _assets, chains as _chains } from "chain-registry";
-// import { wallets as _wallets } from "@cosmos-kit/keplr";
 import { wallets as keplrExtension } from "@cosmos-kit/keplr-extension";
+// import { wallets as _wallets } from "@cosmos-kit/keplr";
 
 const chains = [..._chains];
 const wallets = [...keplrExtension];

packages/vue/src/composables/useChain.ts

@@ -9,20 +9,21 @@ import {
 } from "vue";
 import { ChainContext, ChainName, DisconnectOptions } from "@cosmos-kit/core";
 import { getChainWalletContext } from "../utils";
+import { WalletManagerContext } from "../types";
 
 const walletContextKey = "walletManager";
 
 export const useChain = (
   chainName: ChainName,
   sync = true
 ): Reactive<ChainContext> => {
-  const context = inject(walletContextKey);
+  const context = inject<WalletManagerContext>(walletContextKey);
 
   if (!context) {
     throw new Error("You have forgotten to use ChainProvider.");
   }
 
-  const { walletManager, isViewOpen }: any = context;
+  const { walletManager, isViewOpen } = context;
   let walletRepo = walletManager.getWalletRepo(chainName);
   walletRepo.activate();
 

packages/vue/src/composables/useChainWallet.ts

@@ -1,6 +1,7 @@
 import { inject, computed, onMounted, onUnmounted, reactive, watch } from "vue";
 import { ChainName, ChainWalletContext, WalletName } from "@cosmos-kit/core";
 import { getChainWalletContext } from "../utils";
+import { WalletManagerContext } from "../types";
 
 const walletContextKey = "walletManager";
 
@@ -9,7 +10,7 @@ export const useChainWallet = (
   walletName: WalletName,
   sync = true
 ) => {
-  const context = inject(walletContextKey);
+  const context = inject<WalletManagerContext>(walletContextKey);
 
   if (!context) {
     throw new Error("You have forgotten to use ChainProvider.");
@@ -20,14 +21,6 @@ export const useChainWallet = (
   const wallet = walletManager.getChainWallet(chainName, walletName);
   wallet.activate();
 
-  // const chainWalletContext = computed<ChainWalletContext | undefined>(() => {
-  //   if (wallet.chain) {
-  //     return getChainWalletContext(wallet.chain.chain_id, wallet, sync);
-  //   } else {
-  //     return void 0;
-  //   }
-  // });
-
   const state = reactive<ChainWalletContext | Record<string, any>>({});
 
   const getWalletContext = async () => {

packages/vue/src/composables/useChains.ts

@@ -1,11 +1,12 @@
 import { reactive, inject } from "vue";
 import { ChainContext, ChainName } from "@cosmos-kit/core";
 import { getChainWalletContext } from "../utils";
+import { WalletManagerContext } from "../types";
 
 const walletContextKey = "walletManager";
 
 export function useChains(chainNames: ChainName[], sync = true) {
-  const context = inject(walletContextKey);
+  const context = inject<WalletManagerContext>(walletContextKey);
 
   if (!context) {
     throw new Error("You have forgotten to use ChainProvider.");

packages/vue/src/composables/useManager.ts

@@ -1,10 +1,11 @@
 import { inject } from "vue";
 import { ManagerContext } from "@cosmos-kit/core";
+import { WalletManagerContext } from "../types";
 
 const walletContextKey = "walletManager";
 
 export const useManager = (): ManagerContext => {
-  const context = inject(walletContextKey);
+  const context = inject<WalletManagerContext>(walletContextKey);
 
   if (!context) {
     throw new Error("You have forgotten to use ChainProvider.");

packages/vue/src/composables/useWallet.ts

@@ -13,14 +13,15 @@ import {
   WalletStatus,
   State,
 } from "@cosmos-kit/core";
+import { WalletManagerContext } from "../types";
 
 const walletContextKey = "walletManager";
 
 export const useWallet = (
   walletName?: WalletName,
   activeOnly = true
 ): Reactive<WalletContext> => {
-  const context = inject(walletContextKey);
+  const context = inject<WalletManagerContext>(walletContextKey);
 
   if (!context) {
     throw new Error("You have forgotten to use ChainProvider.");

packages/vue/src/composables/useWalletClient.ts

@@ -1,12 +1,13 @@
 import { State, WalletClientContext, WalletName } from "@cosmos-kit/core";
 import { inject, onMounted, onUnmounted, reactive, Reactive } from "vue";
+import { WalletManagerContext } from "../types";
 
 const walletContextKey = "walletManager";
 
 export const useWalletClient = (
   walletName?: WalletName
 ): Reactive<WalletClientContext> => {
-  const context = inject(walletContextKey);
+  const context = inject<WalletManagerContext>(walletContextKey);
 
   if (!context) {
     throw new Error("You have forgot to use ChainProvider.");

packages/vue/src/providers/ChainProvider.vue

@@ -22,30 +22,52 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps } from "vue";
+import { defineProps, ref, watchEffect } from "vue";
+import { ThemeCustomizationProps } from "../types";
 import WalletManagerProvider from "./WalletManagerProvider.vue";
 import SelectedWalletRepoProvider from "./SelectedWalletRepoProvider.vue";
 import type { Chain, AssetList } from "@chain-registry/types";
-import {
+import type {
   ChainName,
-  LogLevel,
   MainWalletBase,
+  LogLevel,
   WalletModalProps,
+  WalletConnectOptions,
+  NameServiceName,
+  SignerOptions,
+  EndpointOptions,
+  SessionOptions,
+  ModalOptions,
 } from "@cosmos-kit/core";
 
+import { Logger } from "@cosmos-kit/core";
+
 const props = defineProps<{
   chains: (Chain | ChainName)[];
   assetLists?: AssetList[];
   wallets: MainWalletBase[];
   throwErrors?: boolean;
   subscribeConnectEvents?: boolean;
-  defaultNameService?: string;
-  walletConnectOptions?: any;
-  signerOptions?: any;
-  endpointOptions?: any;
-  sessionOptions?: any;
+  defaultNameService?: NameServiceName;
+  walletConnectOptions?: WalletConnectOptions;
+  signerOptions?: SignerOptions;
+  endpointOptions?: EndpointOptions;
+  sessionOptions?: SessionOptions;
   logLevel?: LogLevel;
   allowedIframeParentOrigins?: string[];
   walletModal?: (props: WalletModalProps) => JSX.Element;
+  modalViews?: any;
+  modalTheme?: ThemeCustomizationProps;
+  modalOptions?: ModalOptions;
 }>();
+
+const logger = ref(new Logger(props.logLevel || "WARN"));
+
+watchEffect(() => {
+  if (props.walletModal) {
+    logger.value.debug("Use custom wallet modal.");
+  } else {
+    logger.value.debug("You have forgot to use wallet modal.");
+  }
+});
 </script>

packages/vue/src/providers/SelectedWalletRepoProvider.vue

@@ -6,14 +6,11 @@
 <script setup lang="ts">
 import { ref, provide, defineProps } from "vue";
 
-// 定义上下文的值
-const selectedWalletRepo = ref<any | null>(null);
+const selectedWalletRepo = ref(null);
 
-// 更新选中的钱包 Repo
-const selectWalletRepo = (repo: any) => {
+const selectWalletRepo = (repo) => {
   selectedWalletRepo.value = repo;
 };
 
-// 提供上下文
 provide("selectedWalletRepo", { selectedWalletRepo, selectWalletRepo });
 </script>

packages/vue/src/providers/WalletManagerProvider.vue

@@ -12,19 +12,27 @@
 <script setup lang="ts">
 import {
   ref,
+  Ref,
   provide,
   reactive,
   defineProps,
   onMounted,
   onUnmounted,
 } from "vue";
+import { WalletManagerContext } from "../types";
 import { Logger, WalletManager, State, WalletRepo } from "@cosmos-kit/core";
 import type { AssetList, Chain } from "@chain-registry/types";
 import type {
   ChainName,
   MainWalletBase,
   LogLevel,
   WalletModalProps,
+  WalletConnectOptions,
+  NameServiceName,
+  SignerOptions,
+  EndpointOptions,
+  SessionOptions,
+  Data,
 } from "@cosmos-kit/core";
 
 const walletManagerKey = "walletManager";
@@ -35,11 +43,11 @@ const props = defineProps<{
   assetLists?: AssetList[];
   throwErrors?: boolean;
   subscribeConnectEvents?: boolean;
-  defaultNameService?: string;
-  walletConnectOptions?: any;
-  signerOptions?: any;
-  endpointOptions?: any;
-  sessionOptions?: any;
+  defaultNameService?: NameServiceName;
+  walletConnectOptions?: WalletConnectOptions;
+  signerOptions?: SignerOptions;
+  endpointOptions?: EndpointOptions;
+  sessionOptions?: SessionOptions;
   logLevel?: LogLevel;
   allowedIframeParentOrigins?: string[];
   walletModal?: (props: WalletModalProps) => JSX.Element;
@@ -64,7 +72,7 @@ const walletManager = new WalletManager(
 
 const isViewOpen = ref(false);
 const viewWalletRepo = ref<WalletRepo | undefined>();
-const data = ref<any>();
+const data = ref<Data>();
 const state = ref<State>(State.Init);
 const msg = ref<string | undefined>();
 const render = ref(0);
@@ -119,7 +127,7 @@ onUnmounted(() => {
   setViewOpen(false);
 });
 
-provide(walletManagerKey, {
+provide<WalletManagerContext>(walletManagerKey, {
   walletManager: walletManager,
   isViewOpen: isViewOpen,
   modalProvided: Boolean(ProvidedWalletModal),

packages/vue/src/types/index.ts

@@ -0,0 +1 @@
+export * from "./provider";

packages/vue/src/types/provider.ts

@@ -0,0 +1,32 @@
+import { WalletManager } from "@cosmos-kit/core";
+import { Ref } from "vue";
+
+import {
+  ConnectModal,
+  ThemeProvider,
+  ThemeProviderProps,
+} from "@interchain-ui/react";
+
+export type ModalViewImpl = {
+  head: React.ReactNode;
+  content: React.ReactNode;
+};
+
+export type WalletManagerContext = {
+  walletManager: WalletManager;
+  isViewOpen: Ref<boolean>;
+  modalProvided: boolean;
+};
+
+export type ModalCustomizationProps = {
+  modalContainerClassName?: string;
+  modalContentClassName?: string;
+  modalChildrenClassName?: string;
+  modalContentStyles?: React.CSSProperties;
+};
+
+export type ThemeCustomizationProps = ModalCustomizationProps &
+  Pick<
+    ThemeProviderProps,
+    "defaultTheme" | "overrides" | "themeDefs" | "customTheme"
+  >;

packages/vue/src/views/Home.vue

@@ -53,7 +53,7 @@ import {
 const { modalTheme, setModalTheme } = useModalTheme();
 const resolvedName = ref<any>(null);
 const chainContext = useChain("cosmoshub");
-// const serviceContext = useNameService();
+const serviceContext = useNameService();
 // const { iframeRef } = useIframe();
 
 // const chainsContext = useChains(["cosmoshub", "osmosis"]);
@@ -69,13 +69,13 @@ const chainContext = useChain("cosmoshub");
 // console.log("useWallet", walletContext);
 // console.log("useWalletClient", walletClientContext);
 
-// watchEffect(() => {
-//   if (serviceContext.ns) {
-//     serviceContext.ns.resolveName(chainContext.address).then((name) => {
-//       resolvedName.value = name;
-//     });
-//   }
-// });
+watchEffect(() => {
+  if (serviceContext.ns) {
+    serviceContext.ns.resolveName(chainContext.address).then((name) => {
+      resolvedName.value = name;
+    });
+  }
+});
 
 watchEffect(() => {
   if (modalTheme.value === "dark") {

packages/vue/vite.config.js

@@ -1,6 +1,5 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
-import react from '@vitejs/plugin-react';
 import path from 'path'
 import { nodePolyfills } from 'vite-plugin-node-polyfills';