Connecting Directly to Magic Eden Wallet

Here we will walk through how to integrate with the ME wallet directly, using the ethers.js library to facilitate our blockchain interactions.

Detecting the Provider

Magic Eden's wallet browser extension will automatically inject a magicEden object into the window of any web application that the user visits, assuming that the user has the ME extension installed.

A code snippet to find the provider might look like the following:

const getProvider = () => {
  // check if the magicEden object is available
  if ('magicEden' in window) {
    const magicProvider = window.magicEden?.ethereum;
    if (magicProvider?.isMagicEden) {
      const provider = new providers.Web3Provider(magicProvider);
      return provider;
    }
  }
  window.location.href = 'https://wallet.magiceden.io/'
};

The above will return the provider if the user has the extension installed, otherwise it'll redirect the user to the magic eden wallet website to download it.

📘

Note:

An actual production implementation to detect the provider might want to make use of timeout + some sort of loop to give the provider object time to inject in the window.

Connecting a Wallet

Once the magicEden provider object has been found, a user is able to connect their wallet to the site. The connection request will prompt the user to approve the connection, so that their wallet can be used to make requests, such as sending transactions and signing messages.

const connect = async () => {
  if (!provider) return;
  try {
    const signerAddress = await provider!.send("eth_requestAccounts", []);
  } catch (err) {
    console.error(err);
  }
};

The above is an abbreviated version of what the connection process could look like. Feel free to check out our full code demo on how to connect and interact with the ME Ethereum wallet here