# Integrate Embedded Wallets with the Avalanche Blockchain in Vue

> Integrate Embedded Wallets with the Avalanche Blockchain in Vue | Embedded Wallets

While using the Web3Auth Vue SDK, you get access to the Web3Auth Composables. You can pair it up with the Wagmi composables to make EVM based blockchain calls, like getting user's `account`, fetch `balance`, `sign transaction`, `send transaction`, `read` from and `write` to the smart contract, etc. We have highlighted a few here for getting you started quickly on that.

## Chain details for Avalanche

<Tabs
 defaultValue="mainnet"
  values={[
    { label: "Mainnet", value: "mainnet" },
    { label: "Fuji Testnet", value: "fuji" },
  ]}
>
<TabItem value="mainnet">

- **Chain ID:** 0xa86a
- **RPC URL:** You can use our bundled RPC service from Infura, or your own choice of RPC service for production.
- **Display Name:** Avalanche C-Chain
- **Block Explorer Link:** `https://snowtrace.io`
- **Ticker:** AVAX
- **Ticker Name:** Avalanche

</TabItem>

<TabItem value="fuji">

- **Chain ID:** 0xa869
- **Public RPC URL:** `https://api.avax-test.network/ext/bc/C/rpc`
- **Display Name:** Avalanche Fuji Testnet
- **Block Explorer Link:** `https://testnet.snowtrace.io`
- **Ticker:** AVAX
- **Ticker Name:** Avalanche

</TabItem>
</Tabs>

## Vue Wagmi integration

You need to install the `wagmi` & `@tanstack/vue-query` packages and use the **Web3Auth
implementation of `WagmiProvider`** for configuration.

:::info

The Web3Auth implementation of `WagmiProvider` is a custom implementation that is used to integrate
with the Web3Auth Modal SDK. It is a wrapper around the `WagmiProvider` that makes it compatible.

With this implementation, you can use the Wagmi composables, however **no external connectors are
supported**. Web3Auth provides a whole suite of connectors which you can use directly for a better
experience with external wallets.

:::

```bash
npm install wagmi @tanstack/vue-query
```

Update your `main.ts` to use the Vue Query plugin **only if you are using Wagmi**:

```ts title="main.ts"
// focus-next-line

// focus-next-line
createApp(App).use(VueQueryPlugin).mount('#app')
```

Then, in your `App.vue`, wrap your app with both providers:

```html title="App.vue"
<script setup lang="ts">

  // focus-next-line

</script>

<template>
  
    <Web3AuthProvider :config="web3AuthContextConfig">
      <!-- focus-start -->
      <WagmiProvider>
        <Home />
      </WagmiProvider>
      <!-- focus-end -->
    </Web3AuthProvider>
  
</template>
```

:::info

Wagmi provides a comprehensive set of composables for Ethereum and EVM-compatible chains in Vue.
Web3Auth integrates seamlessly with Wagmi, so you can use composables like `useAccount`,
`useBalance`, `useSendTransaction`, and more, out of the box.

:::

Below are some examples of using Wagmi composables in your dapp after Web3Auth and Wagmi are set up.
You can note these functions work directly with Wagmi. Once you have set up Wagmi with Web3Auth, you
can use any Wagmi composable as you would in a standard Wagmi application.

### Get account balance

```html
<script setup lang="ts">

  const { address } = useAccount()
  const { data, isLoading, error } = useBalance(computed(() => ({ address: address.value })))
</script>

<template>
  
    Balance
    
      
        {{ formatUnits(data.value, data.decimals) }} {{ data.symbol }}
      
      Loading...
      Error: {{ error.message }}
    
  
</template>
```

### Send transaction

```html
<script setup lang="ts">

  const address = ref('')
  const value = ref('')
  const { data: hash, error, isPending, sendTransaction } = useSendTransaction()

  function submit() {
    sendTransaction({
      to: address.value,
      value: parseEther(value.value),
    })
  }

  const { isLoading: isConfirming, isSuccess: isConfirmed } = useWaitForTransactionReceipt({
    hash,
  })
</script>

<template>
  
    Send Transaction
    <form @submit.prevent="submit">
      <input v-model="address.value" name="address" placeholder="Address" required />
      <input
        v-model="value.value"
        name="value"
        placeholder="Amount (ETH)"
        type="number"
        step="0.000000001"
        required />
      <button :disabled="isPending" type="submit">
        {{ isPending ? "Confirming..." : "Send" }}
      </button>
    </form>
    Transaction Hash: {{ hash }}
    Waiting for confirmation...
    Transaction confirmed.
    Error: {{ error.shortMessage || error.message }}
  
</template>
```

### Switch chain

```html
<script setup lang="ts">

  const chainId = useChainId()
  const { chains, switchChain, error } = useSwitchChain()
</script>

<template>
  
    Switch Chain
    Connected to {{ chainId }}
    
      <button
        v-for="chain in chains"
        :key="chain.id"
        :disabled="chainId === chain.id"
        @click="switchChain({ chainId: chain.id })"
        type="button"
        class="card">
        {{ chain.name }}
      </button>
    
    {{ error.message }}
  
</template>
```