feat: add chain switch

.github/workflows/main.yml

@@ -16,6 +16,8 @@ jobs:
 
       - name: Setup Node
         uses: actions/setup-node@v4
+        with:
+          node-version: '22'
 
       - name: Install dependencies
         run: |

.vitepress/config.mts

@@ -1,6 +1,7 @@
 import { transformerTwoslash } from '@shikijs/vitepress-twoslash';
 import tailwindcss from '@tailwindcss/vite';
 import { defineConfig } from 'vitepress';
+import { fileURLToPath, URL } from 'node:url';
 import { getSidebar } from './sidebar';
 import {
   groupIconMdPlugin,
@@ -17,6 +18,11 @@ export default defineConfig({
   ignoreDeadLinks: true,
   vite: {
     plugins: [tailwindcss(), groupIconVitePlugin()],
+    resolve: {
+      alias: {
+        '@': fileURLToPath(new URL('../src', import.meta.url)),
+      },
+    },
   },
   srcDir: './src',
   markdown: {
@@ -89,6 +95,12 @@ export default defineConfig({
       { text: 'Build iApp', link: '/build-iapp/what-is-iapp' },
       { text: 'Use iApp', link: '/use-iapp/introduction' },
       { text: 'Protocol', link: '/protocol/sdk' },
+      {
+        component: 'ChainSelector',
+        props: {
+          className: 'w-48',
+        },
+      },
     ],
     outline: {
       level: [2, 4],

.vitepress/theme/index.ts

@@ -9,7 +9,9 @@ import 'virtual:group-icons.css';
 import '@shikijs/vitepress-twoslash/style.css';
 import { QueryClient, VueQueryPlugin } from '@tanstack/vue-query';
 import { WagmiPlugin } from '@wagmi/vue';
-import { wagmiAdapter } from '../../src/utils/wagmiConfig';
+import { createPinia } from 'pinia';
+import { wagmiAdapter } from '@/utils/wagmiConfig';
+import ChainSelector from '@/components/ChainSelector.vue';
 import './style.css';
 
 export default {
@@ -19,11 +21,15 @@ export default {
     app.use(TwoslashFloatingVue as any);
 
     const queryClient = new QueryClient();
+    const pinia = createPinia();
 
+    app.use(pinia);
     app.use(VueQueryPlugin, { queryClient });
 
     app.use(WagmiPlugin, { config: wagmiAdapter.wagmiConfig });
 
+    app.component('ChainSelector', ChainSelector);
+
     googleAnalytics({
       id: 'GTM-P7KSD4T',
     });

.vitepress/theme/style.css

@@ -76,6 +76,15 @@
   --color-danger-2: var(--vp-c-red-2);
   --color-danger-3: var(--vp-c-red-3);
   --color-danger-soft: var(--vp-c-red-soft);
+
+  /* ShadCN */
+  --color-muted-foreground: var(--vp-c-text-3);
+  --color-ring: var(--vp-c-brand-2);
+  --color-destructive: var(--vp-c-red-2);
+  --color-popover: var(--vp-c-bg);
+  --color-popover-foreground: var(--vp-c-text-1);
+  --color-accent: var(--vp-c-bg-soft);
+  --color-accent-foreground: var(--vp-c-text-1);
 }
 
 :root {

components.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://shadcn-vue.com/schema.json",
+  "style": "new-york",
+  "typescript": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/styles/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "composables": "@/composables",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib"
+  },
+  "iconLibrary": "iconify"
+}