useSwitchChain

Composable to switch blockchain networks with Embedded Wallets in Vue.

Import

import { useSwitchChain } from '@web3auth/modal/vue'

Usage

<script setup lang="ts">
  import { useSwitchChain } from '@web3auth/modal/vue'

  const { switchChain, loading, error } = useSwitchChain()
</script>

<template>
  <button @click="switchChain({ chainId: '0x1' })" :disabled="loading">
    {{ loading ? "Switching..." : "Switch to Ethereum Mainnet" }}
  </button>
  <div v-if="error">Error: {{ error.message }}</div>
</template>

Return type

import { type IUseSwitchChain } from '@web3auth/modal/vue'

loading

Ref<boolean>

Whether the chain switching process is in progress.

error

Ref<Web3AuthError | null>

Error that occurred during the chain switching process.

switchChain

(chainParams: { chainId: string }) => Promise<void>

Function to initiate the chain switch. Pass an object with the target chainId as a hex string (for example, { chainId: '0x1' } for Ethereum Mainnet).

Example

switchChain.vue

<script setup lang="ts">
  import { useWeb3Auth, useSwitchChain } from '@web3auth/modal/vue'
  import { computed } from 'vue'

  const { web3Auth } = useWeb3Auth()
  const { switchChain, error } = useSwitchChain()

  const currentChainName = computed(() => web3Auth.value?.currentChain?.displayName || '')
</script>

<template>
  <div>
    <h2>Switch Chain</h2>
    <h3>Connected to {{ currentChainName }}</h3>
    <button
      v-for="chain in web3Auth?.coreOptions?.chains"
      :key="chain.chainId"
      :disabled="web3Auth?.currentChain?.chainId === chain.chainId"
      @click="switchChain({ chainId: chain.chainId })"
      type="button"
      class="card">
      {{ chain.displayName }}
    </button>
    <div v-if="error" class="error">{{ error.message }}</div>
  </div>
</template>