Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Empty modal

See original GitHub issue

Hi! I have this code:

<script>
  import { onMount } from "svelte";
  import Web3 from "web3";
  import Web3Modal from "web3modal";

  import WalletConnectProvider from "@walletconnect/web3-provider";

  let web3Modal;
  let provider;
  let web3;

  const connect = async () => {
    provider = await web3Modal.connect();

    provider.on("accountsChanged", accounts => {
      console.log(accounts);
    });

    provider.on("chainChanged", chainId => {
      console.log(chainId);
    });

    provider.on("connect", info => {
      console.log(info);
    });

    provider.on("disconnect", error => {
      console.log(error);
    });

    web3 = new Web3(provider);
    console.log(await web3.eth.getGasPrice())
    web3.eth.getAccounts(console.log);
  }

  onMount(async () => {
    const providerOptions = {
      disableInjectedProvider: true,
      // cacheProvider: false,
      walletconnect: {
        package: WalletConnectProvider,
        options: {
          infuraId: "<THE INFURA PROJECT ID>",
        }
      },
      binancechainwallet: {
        package: true
      }
    };

    web3Modal = new Web3Modal(providerOptions)
  })
</script>

<button class={ $$props.class } on:click={ connect }><slot>Connect</slot></button>
{ web3 }

When the button is clicked, the opacity of the screen changes but the modal doesn’t show Looking at the html you can see this:

<div id="WEB3_CONNECT_MODAL_ID">
  <div class="sc-jRQBWg uYscM web3modal-modal-lightbox" offset="0" opacity="0.4">
    <div class="sc-gKclnd fmSSut web3modal-modal-container">
      <div class="sc-iCfMLu fFpYRP web3modal-modal-hitbox"></div>
      <div class="sc-furwcr dKfWpB web3modal-modal-card"></div>
    </div>
  </div>
</div>

Sorry if this is a newbie issue but I don’t catch what is happening

Thanks