magic-sdk (web): Celo blockchain is not supported.

[paro-paro]

Docs state that the celo network (which is EVM compatible) is supported by magic.

So, I will expect this code to work:

import { Magic } from "magic-sdk" // latest version: 22.1.1

const magic = new Magic('YOUR_API_KEY', {
  network: {
    rpcUrl: 'https://alfajores-forno.celo-testnet.org', // or https://forno.celo.org
  },
});

await magic.wallet.connectWithUI()

Instead, I am getting a Magic RPC Error: [-32603] Internal error: Blockchain not supported. Please select a different blockchain network.

I am using a Dedicated Wallet and I have also tried adding both nodes to the Content-Security-Policy section of the magic dashboard with no success (getting the same error).

Any help will be really appreciated.

Thanks in advanced

[paro-paro]

Using a different auth method works, but the returned eip1193 provider (magic.rpcProvider) will throw (same error) when trying to interact with the blockchain.

await magic.auth.loginWithEmailOTP({
      email: 'foo',
    })

    const provider = new ethers.providers.Web3Provider(magic.rpcProvider as any)
    const signer = provider.getSigner()
    
    const tx = await signer.sendTransaction({ // throws: Error: Magic RPC Error: [-32603] Internal error: Blockchain not supported. Please select a different blockchain network.
      to: 'bar',
      value: 1,
    })

    const receipt = await tx.wait();
    console.log(receipt.status)

[am-hernandez]

Hi @paro-paro ,

Celo is indeed supported. You are seeing this error because Celo is not compatible with the Widget UI component that connectWithUI uses. By extension, using the pre-built wallet UI with Celo, including the UI for connectWithUI, is not supported and instead you may log in the user with loginWithEmailOTP.

The method loginWithEmailOTP uses Magic's UI to receive the OTP input from the user with an option to use your own UI, and it requires you build the input that receives the user's email address to kick off the flow.

[paro-paro]

@am-hernandez I have tried the other approach (not using the wallet widget) and I am also getting the same error when interacting with the chain through the magic.rpcProvider

[paro-paro]

@am-hernandez here is a reproduction using both ethers (5.x) and viem.

[Nallelyht]

@am-hernandez I am having the same error when using loginWithEmailOTP

[am-hernandez]

@paro-paro I see that you aren't making use of the Celo contractkit as we do in our Celo doc. You can see an example of a sendTransactrion code snippet here. The example uses Web3.js but you may use another provider.

You may also check out our Celo sandbox demo here.

[paro-paro]

@am-hernandez why would we need to use the celo contractkit and web3@1.x?

Celo is an EVM compatible chain and should work the same way as ethereum. The docs even say:

As Celo is EVM compatible, you can follow the Ethereum documentation to send your first transaction and utilize all other wallet features.

The magic.rpcProvider should work with either web3 / ethers / viem and no need to rely on another extra wrapper package such as celo contractkit.

[paro-paro]

@Nallelyht just figure it out. If you are using any blockchain not supported by the wallet widget UI (such as celo) make sure you have Signature Request UI disabled in your magic dashboard. Magic docs won't really help you and no need to use the celo contractkit neither.

[am-hernandez]

Hi @paro-paro ,

Thank you for the comments and regarding the contract kit, it can be used to interact with the Celo smart contracts. Learn more about ContractKit.

I spun up a sandbox demo of Magic x Celo using vanilla JS here: https://t4h9wp.csb.app/

You may log into the demo first in order to test the functionality of signing messages and sending transactions. ContractKit is not being used in this demo. Feel free to swap web3js with another provider.

[paro-paro]

Hello @am-hernandez

Thanks a lot for your help. Everything is working as expected when using magic-sdk and Celo.

Not related to this specific issue, but may ask if there is any chance that the Widget UI could add support for Celo network as well? I am definitively in love with the Widget UI built-in functionality.

Any way to make a feature request for it?