feat:modaltheme

package.json

@@ -24,6 +24,7 @@
   "devDependencies": {
     "@types/jest": "29.0.3",
     "@types/node": "18.7.18",
+   "@interchain-ui/vue": "^1.2.55",
     "@typescript-eslint/eslint-plugin": "5.38.0",
     "@typescript-eslint/parser": "5.38.0",
     "eslint": "8.23.1",

packages/example/components/mode-toggle.tsx

@@ -14,6 +14,8 @@ export function ModeToggle() {
   const { setTheme } = useTheme();
   const { modalTheme, setModalTheme } = useModalTheme();
 
+  console.log(modalTheme);
+
   return (
     <>
       <DropdownMenu>

packages/vue/package.json

@@ -16,21 +16,19 @@
     "@cosmos-kit/core": "^2.12.0",
     "@cosmos-kit/keplr": "^2.10.1",
     "@cosmos-kit/react": "2.12.0",
+    "@interchain-ui/vue": "^1.2.55",
     "@dao-dao/cosmiframe": "^0.1.0",
     "@testing-library/jest-dom": "5.14.1",
     "vite-plugin-node-polyfills": "^0.22.0",
     "element-plus": "^2.8.1"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.1.2",
-    "@vitejs/plugin-react": "^4.3.1",
     "@vue/test-utils": "^2.3.3",
-    "buffer": "^6.0.3",
     "@chain-registry/types": "^0.41.3",
+    "buffer": "^6.0.3",
     "vite": "^5.4.1",
-    "jsdom": "^21.1.0",
-    "react": "^18",
-    "react-dom": "^18"
+    "jsdom": "^21.1.0"
   },
   "vitest": {
     "environment": "jsdom"

packages/vue/src/composables/index.ts

@@ -6,3 +6,4 @@ export * from "./useManager";
 export * from "./useNameService";
 export * from "./useWallet";
 export * from "./useWalletClient";
+export * from "./useModalTheme";

packages/vue/src/composables/useModalTheme.ts

@@ -0,0 +1,15 @@
+import { ref } from "vue";
+
+type ModalTheme = "light" | "dark" | "system";
+export function useModalTheme() {
+  const modalTheme = ref<ModalTheme>("light");
+
+  function setModalTheme(theme: ModalTheme) {
+    modalTheme.value = theme;
+  }
+
+  return {
+    modalTheme,
+    setModalTheme,
+  };
+}

packages/vue/src/composables/useWalletClient.ts

@@ -1,5 +1,4 @@
 import { State, WalletClientContext, WalletName } from "@cosmos-kit/core";
-import { useContext } from "react";
 import { inject, onMounted, onUnmounted, reactive, Reactive } from "vue";
 
 const walletContextKey = "walletManager";

packages/vue/src/views/Home.vue

@@ -1,6 +1,11 @@
 <template>
   <div>
     <div>
+      <el-row style="justify-content: center; align-items: center; gap: 5">
+        <p style="margin-right: 20px">ModalTheme: {{ modalTheme }}</p>
+        <el-button @click="setModalTheme('dark')"> Light</el-button>
+        <el-button @click="setModalTheme('light')"> Dark</el-button>
+      </el-row>
       <p><strong>Chain Name:</strong> {{ chainContext.chain?.chain_name }}</p>
       <p><strong>Chain ID:</strong> {{ chainContext.chain?.chain_id }}</p>
       <p><strong>Status:</strong> {{ chainContext.status }}</p>
@@ -20,6 +25,7 @@
           ref="iframeRef"
           :style="{
             width: '50%',
+            marginTop: '20px',
             height: '50vh',
             borderRadius: '4px',
           }"
@@ -41,8 +47,10 @@ import {
   useWallet,
   useWalletClient,
   useIframe,
+  useModalTheme,
 } from "./../composables";
 
+const { modalTheme, setModalTheme } = useModalTheme();
 const resolvedName = ref<any>(null);
 const chainContext = useChain("cosmoshub");
 const serviceContext = useNameService();

packages/vue/vite.config.js

@@ -5,7 +5,7 @@ import path from 'path'
 import { nodePolyfills } from 'vite-plugin-node-polyfills';
 
 export default defineConfig({
-  plugins: [vue(), react(), nodePolyfills({
+  plugins: [vue(), nodePolyfills({
     buffer: true,
   }),],
   resolve: {