Inject WalletConnect to browser

inject-walletconnect-to-browser.js

const script = document.createElement("script")
script.type = "module"
script.innerHTML =`
  import {
    EthereumClient,
    w3mConnectors,
    w3mProvider,
    WagmiCore,
    WagmiCoreChains,
    WagmiCoreConnectors
  } from 'https://unpkg.com/@web3modal/ethereum'
  window.EthereumClient = EthereumClient
  window.w3mConnectors = w3mConnectors
  window.w3mProvider = w3mProvider
  window.WagmiCore = WagmiCore
  window.WagmiCoreChains = WagmiCoreChains
  window.WagmiCoreConnectors = WagmiCoreConnectors

  import { Web3Modal } from 'https://unpkg.com/@web3modal/html'
  window.Web3Modal = Web3Modal

  // Equivalent to importing from @wagmi/core
  const { configureChains, createConfig } = WagmiCore
  window.configureChains = configureChains;
  window.createConfig = createConfig;

  // Equivalent to importing from @wagmi/core/chains
  const { mainnet, polygon, avalanche, arbitrum } = WagmiCoreChains
  window.mainnet = mainnet
  window.polygon = polygon
// 1. Define chains
const chains = [mainnet, polygon, avalanche, arbitrum];
window.chains = chains;
// taken from: https://github.com/WalletConnect/web3modal-examples/blob/4e3f6add7333d37346e8118241a73801f6bb69a7/html-wagmi-cdn/main.js#L18
const projectId = "2aca272d18deb10ff748260da5f78bfd";
window.projectId = projectId;


// 2. Configure wagmi client
const { publicClient } = configureChains(chains, [w3mProvider({ projectId })]);
window.publicClient = publicClient;
const wagmiConfig = createConfig({
  autoConnect: true,
  connectors: [
    ...w3mConnectors({ chains, version: 2, projectId }),
    new WagmiCoreConnectors.CoinbaseWalletConnector({
      chains,
      options: {
        appName: "html wagmi example",
      },
    }),
  ],
  publicClient,
});
window.wagmiConfig = wagmiConfig;

// 3. Create ethereum and modal clients
const ethereumClient = new EthereumClient(wagmiConfig, chains);
export const web3Modal = new Web3Modal(
  {
    projectId,
  },
  ethereumClient
);
window.ethereumClient = ethereumClient;
window.web3Modal = web3Modal;

// use web3Modal.openModal() to open WalletConnect modal
// use ethereumClient to access ethereum client
  `;
document.head.appendChild(script)

Copy-paste into the browser and enjoy!