Integrate Web3Auth with the Aleph Zero Blockchain in JavaScript
Chain Details for Aleph Zero
- Mainnet
- Testnet
- Chain ID: 0x1b5
- Public RPC URL: https://rpc.azero.dev (Avoid using public rpcTarget in production, use services like Infura)
- Display Name: Aleph Zero Mainnet
- Block Explorer Link: https://alephzero.subscan.io
- Ticker: AZERO
- Ticker Name: Aleph Zero
- Chain ID: 0x1b6
- Public RPC URL: https://rpc.test.azero.dev (Avoid using public rpcTarget in production, use services like Infura)
- Display Name: Aleph Zero Testnet
- Block Explorer Link: https://test.azero.subscan.io
- Ticker: AZERO
- Ticker Name: Aleph Zero
React Wagmi Integration
You need to install the wagmi
and @tanstack/react-query
packages and use the Web3Auth
implementation of WagmiProvider
for configuration.
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 hooks, 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.
- npm
- Yarn
- pnpm
- Bun
npm install wagmi @tanstack/react-query
yarn add wagmi @tanstack/react-query
pnpm add wagmi @tanstack/react-query
bun add wagmi @tanstack/react-query
import "./index.css";
import ReactDOM from "react-dom/client";
import { Web3AuthProvider } from "@web3auth/modal/react";
import web3AuthContextConfig from "./web3authContext";
import { WagmiProvider } from "@web3auth/modal/react/wagmi";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import App from "./App";
const queryClient = new QueryClient();
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
<Web3AuthProvider config={web3AuthContextConfig}>
<QueryClientProvider client={queryClient}>
<WagmiProvider>
<App />
</WagmiProvider>
</QueryClientProvider>
</Web3AuthProvider>,
);
Wagmi provides a comprehensive set of React hooks for Ethereum and EVM-compatible chains. Web3Auth
integrates seamlessly with Wagmi, so you can use hooks like useAccount
, useBalance
,
useSendTransaction
, and more, out of the box.
Below are some examples of using Wagmi hooks 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 hook as you would in a standard Wagmi application.
Get Account Balance
import { useAccount, useBalance } from "wagmi";
import { formatUnits } from "viem";
export function Balance() {
const { address } = useAccount();
const { data, isLoading, error } = useBalance({ address });
return (
<div>
<h2>Balance</h2>
<div>
{data?.value !== undefined && `${formatUnits(data.value, data.decimals)} ${data.symbol}`}{" "}
{isLoading && "Loading..."} {error && "Error: " + error.message}
</div>
</div>
);
}
Send Transaction
import { FormEvent } from "react";
import { useWaitForTransactionReceipt, useSendTransaction, BaseError } from "wagmi";
import { Hex, parseEther } from "viem";
export function SendTransaction() {
const { data: hash, error, isPending, sendTransaction } = useSendTransaction();
async function submit(e: FormEvent<HTMLFormElement>) {
e.preventDefault();
const formData = new FormData(e.target as HTMLFormElement);
const to = formData.get("address") as Hex;
const value = formData.get("value") as string;
sendTransaction({ to, value: parseEther(value) });
}
const { isLoading: isConfirming, isSuccess: isConfirmed } = useWaitForTransactionReceipt({
hash,
});
return (
<div>
<h2>Send Transaction</h2>
<form onSubmit={submit}>
<input name="address" placeholder="Address" required />
<input name="value" placeholder="Amount (ETH)" type="number" step="0.000000001" required />
<button disabled={isPending} type="submit">
{isPending ? "Confirming..." : "Send"}
</button>
</form>
{hash && <div>Transaction Hash: {hash}</div>}
{isConfirming && "Waiting for confirmation..."}
{isConfirmed && "Transaction confirmed."}
{error && <div>Error: {(error as BaseError).shortMessage || error.message}</div>}
</div>
);
}
Switch Chain
import { useChainId, useSwitchChain } from "wagmi";
export function SwitchChain() {
const chainId = useChainId();
const { chains, switchChain, error } = useSwitchChain();
return (
<div>
<h2>Switch Chain</h2>
<h3>Connected to {chainId}</h3>
{chains.map((chain) => (
<button
disabled={chainId === chain.id}
key={chain.id}
onClick={() => switchChain({ chainId: chain.id })}
type="button"
className="card"
>
{chain.name}
</button>
))}
{error?.message}
</div>
);
}
Vue Wagmi Integration
You need to install the wagmi
& @tanstack/vue-query
packages and use the Web3Auth
implementation of WagmiProvider
for configuration.
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.
npm install wagmi @tanstack/vue-query
Update your main.ts
to use the Vue Query plugin only if you are using Wagmi:
import { VueQueryPlugin } from "@tanstack/vue-query";
import { createApp } from "vue";
import App from "./App.vue";
import "./style.css";
createApp(App).use(VueQueryPlugin).mount("#app");
Then, in your App.vue
, wrap your app with both providers:
<script setup lang="ts">
import Home from "./Home.vue";
import { Web3AuthProvider } from "@web3auth/modal/vue";
import { WagmiProvider } from "@web3auth/modal/vue/wagmi";
import web3AuthContextConfig from "./web3authContext";
</script>
<template>
<div class="min-h-screen flex flex-col">
<Web3AuthProvider :config="web3AuthContextConfig">
<WagmiProvider>
<Home />
</WagmiProvider>
</Web3AuthProvider>
</div>
</template>
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
<script setup lang="ts">
import { useAccount, useBalance } from "wagmi";
import { formatUnits } from "viem";
import { computed } from "vue";
const { address } = useAccount();
const { data, isLoading, error } = useBalance(computed(() => ({ address: address.value })));
</script>
<template>
<div>
<h2>Balance</h2>
<div>
<span v-if="data && data.value !== undefined">
{{ formatUnits(data.value, data.decimals) }} {{ data.symbol }}
</span>
<span v-if="isLoading">Loading...</span>
<span v-if="error">Error: {{ error.message }}</span>
</div>
</div>
</template>
Send Transaction
<script setup lang="ts">
import { ref } from "vue";
import { useSendTransaction, useWaitForTransactionReceipt } from "wagmi";
import { parseEther } from "viem";
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>
<div>
<h2>Send Transaction</h2>
<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>
<div v-if="hash">Transaction Hash: {{ hash }}</div>
<div v-if="isConfirming">Waiting for confirmation...</div>
<div v-if="isConfirmed">Transaction confirmed.</div>
<div v-if="error">Error: {{ error.shortMessage || error.message }}</div>
</div>
</template>
Switch Chain
<script setup lang="ts">
import { useChainId, useSwitchChain } from "wagmi";
const chainId = useChainId();
const { chains, switchChain, error } = useSwitchChain();
</script>
<template>
<div>
<h2>Switch Chain</h2>
<h3>Connected to {{ chainId }}</h3>
<div>
<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>
</div>
<div v-if="error">{{ error.message }}</div>
</div>
</template>