Web3modal v3 CDN example still does not really work

[dappbuildernet]

Still, with all the above mentioned proposals, real CDN version is not working as it has to.

The reason for need in CDN is that users can get pre-built HTML+JS code that can be easily uploaded to their websites, with web3modal connection available there. There is no way to do this with NPM/React or any other way. Only pure HTML + JS.

Your current example is not working - QR code is not loading (though it is working in v2), coinbase wallet is not loading + other console errors.

Please kindly check the CDN version - users really need it, and many web3 project depend on this. Thank you.

[xzilja]

We are aware, there are some downstream dependencies that WalletConnect has where cdn bundlers like esm.sh / unpkg are not able to resolve some imports. Will be looking into that, meanwhile I think best workaround is to compile it locally and include in your project.

[puzatin]

Nobody found a working CDN? I tried everything I found. Mainly two kinds of error occur: or

[puzatin]

import { createWeb3Modal, walletConnectProvider } from 'https://esm.sh/@web3modal/wagmi?bundle'
import { createConfig, configureChains } from "https://esm.sh/@wagmi/core@1.4.2";
import { arbitrum, mainnet } from 'https://esm.sh/@wagmi/core@1.4.2/chains'
import { publicProvider } from "https://esm.sh/@wagmi/core@1.4.2/providers/public";
import { WalletConnectConnector } from "https://esm.sh/@wagmi/core@1.4.2/connectors/walletConnect?bundle";
import { CoinbaseWalletConnector } from 'https://esm.sh/@wagmi/core@1.4.2/connectors/coinbaseWallet?bundle';
import { InjectedConnector } from 'https://esm.sh/@wagmi/core@1.4.2/connectors/injected?bundle';

const projectId = 'YOUR_PROJECT_ID'

const chains = [mainnet, arbitrum]

const { publicClient } = configureChains(chains, [
    walletConnectProvider({ projectId }),
    publicProvider()
]);

const metadata = {
    name: 'Web3Modal',
    description: 'Web3Modal Example',
    url: 'https://web3modal.com',
    icons: ['https://avatars.githubusercontent.com/u/37784886']
}

const wagmiConfig = createConfig({
    autoConnect: true,
    connectors: [
        new WalletConnectConnector({ chains, options: { projectId, showQrModal: false, metadata} }),
        new InjectedConnector({ chains, options: { shimDisconnect: true } }),
        new CoinbaseWalletConnector({ chains, options: { appName: metadata?.name ?? 'Unknown' } })
    ],
    publicClient
});

const modal = createWeb3Modal({ wagmiConfig, projectId, chains, themeMode: 'light' })

I changed some imports, it seems to work

[dappbuildernet]

Is everything working there? QR code, coinbase wallet? Thanks.

[puzatin]

Is everything working there? QR code, coinbase wallet? Thanks.

QR code works, coinbase appears, but I didn’t connect it

[glitch-txs]

it is possible that data is not shared between different imports. At the moment we recommend using a bundler for this package.

[puzatin]

everything is broken. As I understand it, due to the fact that Wallet Connect (https://esm.sh/@web3modal/wagmi?bundle) began to refer to the new version of Wagmi (1.4.3). If change wagmi dependencies to 1.4.3 version, everything will work again. How can I avoid this in the future? without completely removing the version

[xzilja]

Just to clarify is it 1.4.2 or 1.4.3 of wagmi that works for you? i.e. https://esm.sh/@web3modal/wagmi@1.4.2?bundle ? We can investigate further, this is useful info 👍

cc @puzatin

[11-vector]

use @^1.4.2 due to error on update

[puzatin]

wagmi@1.4.2?bundle

Here you cannot specify the Wagmi version, only the Wallet Connect version. For example: https://esm.sh/@web3modal/wagmi@3.0.2?bundle

and over time, this bundle began to refer to wagmi version 1.4.3 instead of 1.4.2, when the rest of the dependencies are explicitly indicated to version 1.4.2. This is where the problems came from

[puzatin]

@^1.4.2

it works, thanks. But as I understand it, the problem remains anyway

[spider9375]

Had the same issue. Friday everything works then today nothing works. How to target specific version of @web3modal/wagmi so that the versions match @wagmi/core? @web3modal/wagmi@3.0.0/3.0.1 and 3.0.2 all target 1.4.3 while on Friday they were targeting 1.4.2 ? I want to lock them in my CDN so those bugs dont happen.

[xzilja]

This package doesn't target specific version of wagmi, it's only requirement is wagmi v1 i.e https://github.com/WalletConnect/web3modal/blob/V3/packages/wagmi/package.json#L50

In npm / node_module projects this would resolve to whichever version of wagmi you install, but with esm.sh and other cdn's it has no context of which wagmi version you want to use I guess. So we are looking into what caused an issue with wagmi's 1.4.3 release.

I think only way to avoid these issues in the future is for you to pre-bundle exact version of the package you want to use and include that in your assets.

[cinaofdai]

import {
    arbitrum,bsc, mainnet,avalanche,dogechain,polygon,
    fantom,evmos,pulsechain
} from 'https://esm.sh/@wagmi/core@1.4.7/chains'
import {createWeb3Modal, defaultWagmiConfig} from 'https://esm.sh/@web3modal/wagmi@3.4.0?bundle'
import {getAccount,fetchBalance, prepareSendTransaction,sendTransaction,waitForTransaction} from "https://esm.sh/@wagmi/core@1.4.7";
import {parseEther} from "https://esm.sh/viem@1.19.11";

// Connect Wallet ID
const projectId = ''

// get you need chains 
const chains = [mainnet,bsc,polygon,avalanche,dogechain,arbitrum,fantom,evmos,pulsechain]
const wagmiConfig = defaultWagmiConfig({
    chains,
    projectId,
    metadata: {
        name: 'xxx'
    }
})

// create Web3Modal
let modal = createWeb3Modal({ wagmiConfig, projectId, chains, themeMode: 'light' })

async function onConnect() {
    modal.open();
}

async function getWalletAddress() {
    const account = getAccount()
    console.log(account)
    if (account.isConnected){
        return account.address
    }else {
        onConnect();
    }
}

async function getWalletBalance() {
    const address = await getWalletAddress()
    const balance = await fetchBalance({
        address:address,
    })
    console.log(balance)
    return balance
}

async function toTransaction(toAddress,amount) {
    const address = await getWalletAddress()
    const config = await prepareSendTransaction({
        account: address,
        to: toAddress,
        value: parseEther(amount),
    })
    const { hash } = await sendTransaction(config)
    console.log(hash);
    const data = await waitForTransaction({
        hash,
        timeout: 10_000,
    })
    console.log(data);
}

I haved run my example but changed CDN some version, it seems to work.

[spider9375]

Today another prod error because of this. Wagmi has 1.4.4 and it no longer works....

[puzatin]

pre-bundle exact version of the package you want to use and include that in your assets.

how make this?

[xzilja]

You can use tool like https://vitejs.dev with our npm modules and set it to build and export js bundle with exact parameters that you need for your app (esm or common js etc.). Then just include built result into your app's files and include it via script.

[ikhsan0x]

import { createWeb3Modal, walletConnectProvider } from 'https://esm.sh/@web3modal/wagmi?bundle'
import { createConfig, configureChains } from "https://esm.sh/@wagmi/core@1.4.2";
import { arbitrum, mainnet } from 'https://esm.sh/@wagmi/core@1.4.2/chains'
import { publicProvider } from "https://esm.sh/@wagmi/core@1.4.2/providers/public";
import { WalletConnectConnector } from "https://esm.sh/@wagmi/core@1.4.2/connectors/walletConnect?bundle";
import { CoinbaseWalletConnector } from 'https://esm.sh/@wagmi/core@1.4.2/connectors/coinbaseWallet?bundle';
import { InjectedConnector } from 'https://esm.sh/@wagmi/core@1.4.2/connectors/injected?bundle';

const projectId = 'YOUR_PROJECT_ID'

const chains = [mainnet, arbitrum]

const { publicClient } = configureChains(chains, [
    walletConnectProvider({ projectId }),
    publicProvider()
]);

const metadata = {
    name: 'Web3Modal',
    description: 'Web3Modal Example',
    url: 'https://web3modal.com',
    icons: ['https://avatars.githubusercontent.com/u/37784886']
}

const wagmiConfig = createConfig({
    autoConnect: true,
    connectors: [
        new WalletConnectConnector({ chains, options: { projectId, showQrModal: false, metadata} }),
        new InjectedConnector({ chains, options: { shimDisconnect: true } }),
        new CoinbaseWalletConnector({ chains, options: { appName: metadata?.name ?? 'Unknown' } })
    ],
    publicClient
});

const modal = createWeb3Modal({ wagmiConfig, projectId, chains, themeMode: 'light' })

I changed some imports, it seems to work

wallet connect dont work

Uncaught (in promise) SyntaxError: The requested module '/v133/@walletconnect/jsonrpc-utils@1.0.8/es2022/jsonrpc-utils.mjs' does not provide an export named 'IJsonRpcProvider' (at provider.ts:4:3)

[puzatin]

You can use tool like https://vitejs.dev with our npm modules and set it to build and export js bundle with exact parameters that you need for your app (esm or common js etc.). Then just include built result into your app's files and include it via script.

Has anyone managed to do this? i get this error

p.s I think I figured it out, wagmi and modal should be in one bundle

[glitch-txs]

@puzatin remove node_modules and lock.yml files, then update web3modal and wagmi/viem dependencies,. they need to be in the latest, also make sure you're importing everything correctly

[ikhsan0x]

Solution of this issues already fixed with vite bundle. @dappbuildernet (if we use bundle from https://esm.sh there still have issue with walletconnect)

how to :

• go to wagmi html example code.
• setup projectId.
• setup config for wagmi core like getAccount / other else with window object.
• we run npm run dev:example until there no error for config wagmi core object.
• for use wagmi getAccount you must wrap it with document ready function.

[pmosse]

Hello! Anyone managed so far to bundle the libraries and use Web3Modal via CDN? Thks!

[0xdude]

This issue popped up again after the last release.

import { getAccount, signMessage, watchAccount, signTypedData } from 'https://esm.sh/@wagmi/core@1.4.3'
import { arbitrum, mainnet, goerli } from 'https://esm.sh/@wagmi/core@1.4.3/chains'
import { createWeb3Modal, defaultWagmiConfig } from 'https://esm.sh/@web3modal/wagmi@3.1.0?bundle'

These imports cause No wagmi config found. Ensure you have set up a config error. I wish there was an easy fix for this.

[Aleklz89]

import { createConfig, configureChains, watchAccount, getNetwork } from "https://cdn.jsdelivr.net/npm/@wagmi/core@1.4.5/+esm";
import { createWeb3Modal, defaultWagmiConfig } from "https://esm.sh/@web3modal/wagmi?bundle";

const wagmiConfig = defaultWagmiConfig({
chains,
projectId,
metadata: {
    name: 'Html Example',
    description: 'Html Example',
    url: 'https://web3modal.com',
    icons: ['https://avatars.githubusercontent.com/u/37784886']
}
})

const modal = createWeb3Modal({ wagmiConfig, projectId, chains, themeMode: 'light' })

watchAccount((account) => console.log(account))

this.close();
return modal.open()

The watchAccount function gives me the error No wagmi config found. Ensure you have set up a config. What could be the problem?

[cinaofdai]

Hello! Anyone managed so far to bundle the libraries and use Web3Modal via CDN? Thks!

Hello! Anyone managed so far to bundle the libraries and use Web3Modal via CDN? Thks!

i do it, but now have a new problem, These imports cause No wagmi config found. Ensure you have set up a config error.

[spider9375]

Hello! Anyone managed so far to bundle the libraries and use Web3Modal via CDN? Thks!

Hello! Anyone managed so far to bundle the libraries and use Web3Modal via CDN? Thks!

i do it, but now have a new problem, These imports cause No wagmi config found. Ensure you have set up a config error.

This happens because of versions mismatch. I have setup a blank vite project with certain versions so when i bundle them the script says consistent. If you use the cdn versions from various websites the links point to latest version so when they bump it PROD crashes.

[cinaofdai]

Hello! Anyone managed so far to bundle the libraries and use Web3Modal via CDN? Thks!

i do it, but now have a new problem, These imports cause No wagmi config found. Ensure you have set up a config error.

This happens because of versions mismatch. I have setup a blank vite project with certain versions so when i bundle them the script says consistent. If you use the cdn versions from various websites the links point to latest version so when they bump it PROD crashes.

Thank you, I guess how can I get my version. For example: Enter in browser https://esm.sh/@web3modal/wagmi@3.4.0 I can get

/* esm.sh - @web3modal/wagmi@3.4.0 */
import "/v135/@web3modal/scaffold-utils@3.4.0/es2022/scaffold-utils.mjs";
import "/v135/@web3modal/scaffold@3.4.0/es2022/scaffold.mjs";
import "/v135/@web3modal/polyfills@3.4.0/es2022/polyfills.mjs";
import "/v135/@wagmi/core@1.4.7/es2022/core.mjs";
import "/v135/@wagmi/core@1.4.7/es2022/connectors/coinbaseWallet.js";
import "/v135/@wagmi/core@1.4.7/es2022/connectors/injected.js";
import "/v135/@wagmi/core@1.4.7/es2022/connectors/walletConnect.js";
import "/v135/@wagmi/core@1.4.7/es2022/providers/public.js";
import "/v135/@wagmi/core@1.4.7/es2022/chains.js";
export * from "/v135/@web3modal/wagmi@3.4.0/es2022/wagmi.mjs";

So I should change my version in my project like below

import {
    arbitrum,bsc, mainnet,avalanche,polygon,
    fantom,evmos,pulsechain
} from 'https://esm.sh/@wagmi/core@1.4.7/chains'
import {createWeb3Modal, defaultWagmiConfig} from 'https://esm.sh/@web3modal/wagmi@3.4.0?bundle'
import {getAccount,fetchBalance, prepareSendTransaction,sendTransaction,waitForTransaction} from "https://esm.sh/@wagmi/core@1.4.7";
import {parseEther} from "https://esm.sh/viem@1.19.11";

wagmi@3.4.0 bundle core@1.4.7。Enter in browser https://esm.sh/@wagmi/core@1.4.7 you can find core@1.4.7 bundle viem@1.19.6

[mharis17]

Still getting QR and WalletConnect issue import {createWeb3Modal, defaultWagmiConfig} from 'https://esm.sh/@web3modal/wagmi@3.5.7?bundle' import { arbitrum, bsc, mainnet, avalanche, dogechain, polygon, fantom, evmos, pulsechain, } from "https://esm.sh/@wagmi/core@1.4.7/chains"; Any possible solution or a doc to make it possible as focus is to use web3modal inn vanilla.js ?

[glitch-txs]

Launching official CDN support soon

[toannguyen5699]

Launching official CDN support soon

Can you tell me the specific time ? I need to integrate it with our web render project 🥲

[glitch-txs]

should be released within this week I think

[wolffzpack]

should be released within this week I think

Are you able to provide an update on this? Is it live somewhere?

[chris35469]

The following worked for me. You will need to get a project ID from wallet connect.

// Add Button DOM 
const connect_button = document.createElement("w3m-button");
document.body.appendChild(connect_button);

// Imports
import {
  createWeb3Modal,
  defaultWagmiConfig,
} from "https://esm.sh/@web3modal/wagmi?bundle";
import { mainnet, arbitrum } from "https://esm.sh/@wagmi/core@2.13.0/chains";
import { reconnect } from "https://esm.sh/@wagmi/core@2.13.0";

const projectId = ""; // wallet connect project ID here

// 2. Create wagmiConfig
const metadata = {
  name: "Web3Modal",
  description: "Web3Modal Example",
  url: "YOUR URL HERE", // origin must match your domain & subdomain
  icons: ["https://avatars.githubusercontent.com/u/37784886"],
};

const chains = [mainnet, arbitrum];

export const config = defaultWagmiConfig({
  chains,
  projectId,
  metadata,
});

reconnect(config);

// 3. Create modal
const modal = createWeb3Modal({
  wagmiConfig: config,
  projectId,
});

[rtomas]

@chris35469 QR is not loading Injected Wallets are working ok

[oyin25]

anyone get it fix yet,

[glitch-txs]

Hi everyone! We got blocked with some issues with Socials, so it will take some time to fix.

This is something I built as a POC, it's using an old version and it's not official (so no recommended for production) https://github.com/glitch-txs/web3modal-cdn/blob/main/playground/index.html

Will update here once we have the official CDN ready.

[ss021o]

Hello, I have applied the CDN using the source you provided.

How can I find the wallet address information and connection details? I am studying an example, but other CDNs are not being applied, so I would like to ask for your advice.

Looking forward to your response. Have a great day!

[fulldecent]

We can see that CDN is not a priority for the Reown team.

You may find success switching to Blocknative. They have taken an interest in this issue and have a similar experience for developers and app users.

[italoHonoratoSA]

import {
    arbitrum,bsc, mainnet,avalanche,dogechain,polygon,
    fantom,evmos,pulsechain
} from 'https://esm.sh/@wagmi/core@1.4.7/chains'
import {createWeb3Modal, defaultWagmiConfig} from 'https://esm.sh/@web3modal/wagmi@3.4.0?bundle'
import {getAccount,fetchBalance, prepareSendTransaction,sendTransaction,waitForTransaction} from "https://esm.sh/@wagmi/core@1.4.7";
import {parseEther} from "https://esm.sh/viem@1.19.11";

// Connect Wallet ID
const projectId = ''

// get you need chains 
const chains = [mainnet,bsc,polygon,avalanche,dogechain,arbitrum,fantom,evmos,pulsechain]
const wagmiConfig = defaultWagmiConfig({
    chains,
    projectId,
    metadata: {
        name: 'xxx'
    }
})

// create Web3Modal
let modal = createWeb3Modal({ wagmiConfig, projectId, chains, themeMode: 'light' })

async function onConnect() {
    modal.open();
}

async function getWalletAddress() {
    const account = getAccount()
    console.log(account)
    if (account.isConnected){
        return account.address
    }else {
        onConnect();
    }
}

async function getWalletBalance() {
    const address = await getWalletAddress()
    const balance = await fetchBalance({
        address:address,
    })
    console.log(balance)
    return balance
}

async function toTransaction(toAddress,amount) {
    const address = await getWalletAddress()
    const config = await prepareSendTransaction({
        account: address,
        to: toAddress,
        value: parseEther(amount),
    })
    const { hash } = await sendTransaction(config)
    console.log(hash);
    const data = await waitForTransaction({
        hash,
        timeout: 10_000,
    })
    console.log(data);
}

I haved run my example but changed CDN some version, it seems to work.

Thanks for your code. It helped me resolve a persistent bug/issue I was getting here.