Wagmi Example

by abdullah066

HTML

<h1>Welcome</h1>
<h2 id="connectedTo">You're not connected</h2>
<button onclick='connectVenly()' id='connect'>Connect to Venly</button>
<br/>
<br/>
<button onclick='switchChainVenly()' id='switch' disabled='disabled'>Switch chain</button>

JavaScript

import { createConfig, connect, getAccount, switchChain, getChainId } from "https://esm.sh/@wagmi/core";
import { sepolia, polygonMumbai } from "https://esm.sh/@wagmi/chains";

import { venly } from "https://esm.sh/@venly/wagmi-connector";

const connector = venly({
  clientId: 'Arketype',
  chainId: sepolia.id,
});

const config = createConfig({
  chains: [sepolia, polygonMumbai],
  connectors: [
    connector,
  ],
});

window.connectVenly = async function() {
  try {
    console.info("Connecting...");
    await connect(config, { connector });

    const { chain, address, isConnected } = getAccount(config);
    console.info("Connected to:", chain?.name, address);

    if (isConnected) {
      document.getElementById("connectedTo").textContent = `You\'re connected to ${chain?.name} - ${address}`;
      document.getElementById("switch").removeAttribute('disabled');
      document.getElementById("connect").setAttribute('disabled', 'disabled');
    }
  } catch (err) {
    console.error("Connection failed:", err);
    console.info("Account:", getAccount(config));
  }
}

window.switchChainVenly = async function() {
  try {

    const chainId = getChainId(config)

    if (chainId === sepolia.id) {
      console.info("Switching to " + polygonMumbai.name);
      await switchChain(config, { chainId: polygonMumbai.id })
    } else {
      console.info("Switching to " + sepolia.name);
      await switchChain(config, { chainId: sepolia.id })
    }
    
    const { chain, address, isConnected } = getAccount(config);
    console.info("Connected to:", chain?.name, address);

    if (isConnected) {
      document.getElementById("connectedTo").textContent = `You\'re connected to ${chain?.name} - ${address}`;
    }
  } catch (err) {
    console.error("Connection failed:", err);
  }
}