feat: add ChainSelector component and related utilities for chain management

Author: ErwanDecoster

.vitepress/config.mts

@@ -95,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',
     });

src/components/ChainSelector.vue

@@ -0,0 +1,74 @@
+<template>
+  <Select
+    v-model="selectedChainId"
+    :placeholder="'Select Chain'"
+    :class="className"
+    @update:model-value="handleChainChange"
+  >
+    <SelectItem
+      v-for="chain in filteredChains"
+      :key="chain.id"
+      :value="chain.id.toString()"
+      :class="className"
+    >
+      <div class="flex items-center gap-2">
+        <img :src="chain.icon" class="size-4" :alt="chain.name" />
+        {{ chain.name }}
+      </div>
+    </SelectItem>
+  </Select>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useAccount } from '@wagmi/vue';
+import { useChainSwitch } from '@/hooks/useChainSwitch';
+import { getSupportedChains, getChainById } from '@/utils/chain.utils';
+import useUserStore from '@/stores/useUser.store';
+import Select from '@/components/ui/Select.vue';
+import SelectItem from '@/components/ui/SelectItem.vue';
+
+interface Props {
+  className?: string;
+}
+
+defineProps<Props>();
+
+// Composables
+const { chainId } = useAccount();
+const { requestChainChange } = useChainSwitch();
+const userStore = useUserStore();
+
+// Data
+const filteredChains = getSupportedChains();
+
+// Computed
+const selectedChainId = computed({
+  get: () => {
+    return (chainId.value || userStore.chainId || -1).toString();
+  },
+  set: (value: string) => {
+    const numericValue = Number(value);
+    if (numericValue !== -1) {
+      const chain = getChainById(numericValue);
+      if (chain) {
+        userStore.setSelectedChain(chain);
+      }
+    }
+  },
+});
+
+// Methods
+async function handleChainChange(value: string) {
+  const numericValue = Number(value);
+
+  if (numericValue === -1) return;
+
+  const chain = getChainById(numericValue);
+  if (chain) {
+    userStore.setSelectedChain(chain);
+
+    await requestChainChange(numericValue);
+  }
+}
+</script>

src/hooks/useChainSwitch.ts

@@ -0,0 +1,24 @@
+import { switchChain } from '@wagmi/core';
+import { useAccount } from '@wagmi/vue';
+import useUserStore from '@/stores/useUser.store';
+import { wagmiAdapter } from '@/utils/wagmiConfig';
+
+export function useChainSwitch() {
+  const { isConnected } = useAccount();
+  const { setChainId } = useUserStore();
+  /**
+   * request a chain change
+   *
+   * the change is either:
+   * - immediately effective if the user is not connected
+   * - delegated to the user's account provider if the user is connected
+   */
+  async function requestChainChange(chainId: number) {
+    if (isConnected) {
+      switchChain(wagmiAdapter.wagmiConfig, { chainId });
+    } else {
+      setChainId(chainId);
+    }
+  }
+  return { requestChainChange };
+}

src/stores/useUser.store.ts

@@ -0,0 +1,43 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+import type { Chain } from '@/utils/chain.utils';
+
+export const useUserStore = defineStore('user', () => {
+  // State
+  const chainId = ref<number | undefined>(undefined);
+  const selectedChain = ref<Chain | undefined>(undefined);
+
+  // Actions
+  function setChainId(newChainId: number) {
+    chainId.value = newChainId;
+  }
+
+  function setSelectedChain(chain: Chain) {
+    selectedChain.value = chain;
+    chainId.value = chain.id;
+  }
+
+  function clearChain() {
+    chainId.value = undefined;
+    selectedChain.value = undefined;
+  }
+
+  // Getters
+  const getCurrentChainId = () => chainId.value;
+  const getCurrentChain = () => selectedChain.value;
+
+  return {
+    // State
+    chainId,
+    selectedChain,
+    // Actions
+    setChainId,
+    setSelectedChain,
+    clearChain,
+    // Getters
+    getCurrentChainId,
+    getCurrentChain,
+  };
+});
+
+export default useUserStore;

src/utils/chain.utils.ts

@@ -0,0 +1,49 @@
+import { arbitrum } from 'viem/chains';
+import { bellecour } from './bellecourChainConfig';
+
+export interface Chain {
+  id: number;
+  name: string;
+  icon: string;
+  nativeCurrency: {
+    name: string;
+    symbol: string;
+    decimals: number;
+  };
+  rpcUrls: {
+    default: {
+      http: readonly string[];
+    };
+  };
+  blockExplorers: {
+    default: {
+      name: string;
+      url: string;
+    };
+  };
+}
+
+export function getSupportedChains(): Chain[] {
+  return [
+    {
+      id: arbitrum.id,
+      name: arbitrum.name,
+      icon: '/assets/icons/arbitrum.svg',
+      nativeCurrency: arbitrum.nativeCurrency,
+      rpcUrls: arbitrum.rpcUrls,
+      blockExplorers: arbitrum.blockExplorers,
+    },
+    {
+      id: bellecour.id,
+      name: bellecour.name,
+      icon: '/assets/icons/iexec-logo.png',
+      nativeCurrency: bellecour.nativeCurrency,
+      rpcUrls: bellecour.rpcUrls,
+      blockExplorers: bellecour.blockExplorers,
+    },
+  ];
+}
+
+export function getChainById(chainId: number): Chain | undefined {
+  return getSupportedChains().find((chain) => chain.id === chainId);
+}