Migrating Web3Connect from v1.0.0-beta.20 to v1.0.0-beta.22

migration.md

Web3Connect

Migrating from v1.0.0-beta.20 to v1.0.0-beta.22

Note: We had to skip v1.0.0-beta.21 on NPM because of a test version that was published.

In this latest release (v1.0.0-beta.22), we've had to (once again) introduce breaking changes to allow Web3Connect to work with optional dependencies. When integrating Web3Connect you can choose each providers to support but unfortunately on the v1.0.0-beta.20 you were still required to install all of them as dependencies in your app even if they were disabled. However with the new release (v1.0.0-beta.22) we require dependencies to be injected to enable the providers you choose to support hence there are breaking changes in the library options.

Below I will describe the before and after of each integration type avaiable with Web3Connect.

React Button

BEFORE (v1.0.0-beta.20)

import Web3Connect from "web3connect";

<Web3Connect.Button
  network="mainnet" // optional
  providerOptions={{
    walletconnect: {
      infuraId: "INFURA_ID" // required
    },
    portis: {
      id: "PORTIS_ID" // required
    }
    fortmatic: {
      key: "FORTMATIC_KEY" // required
    },
    squarelink: {
      id: "SQUARELINK_ID" // required
    }
  }}
  onConnect={(provider: any) => {
    const web3 = new Web3(provider); // add provider to web3
  }}
  onClose={() => {
    console.log("Web3Connect Modal Closed"); // modal has closed
  }}
/>;

AFTER (v1.0.0-beta.22)

import Web3Connect from "web3connect";
import WalletConnectProvider from "@walletconnect/web3-provider";
import Portis from "@portis/web3";
import Fortmatic from "fortmatic";
import Squarelink from "squarelink";

<Web3Connect.Button
  network="mainnet" // optional
  providerOptions={{
    walletconnect: {
      package: WalletConnectProvider, // required
      options: {
        infuraId: "INFURA_ID" // required
      }
    },
    portis: {
      package: Portis, // required
      options: {
        id: "PORTIS_ID" // required
      }
    },
    fortmatic: {
      package: Fortmatic, // required
      options: {
        key: "FORTMATIC_KEY" // required
      }
    },
    squarelink: {
      package: Squarelink, // required
      options: {
        id: "SQUARELINK_ID" // required
      }
    }
  }}
  onConnect={(provider: any) => {
    const web3 = new Web3(provider); // add provider to web3
  }}
  onClose={() => {
    console.log("Web3Connect Modal Closed"); // modal has closed
  }}
/>;

Core Module

BEFORE (v1.0.0-beta.20)

import Web3Connect from "web3connect";

const web3Connect = new Web3Connect.Core({
  network: "mainnet", // optional
  providerOptions: {
    walletconnect: {
      infuraId: "INFURA_ID" // required
    },
    portis: {
      id: "PORTIS_ID" // required
    }
    fortmatic: {
      key: "FORTMATIC_KEY" // required
    },
    squarelink: {
      id: "SQUARELINK_ID" // required
    }
  }
});

AFTER (v1.0.0-beta.22)

import Web3Connect from "web3connect";
import WalletConnectProvider from "@walletconnect/web3-provider";
import Portis from "@portis/web3";
import Fortmatic from "fortmatic";
import Squarelink from "squarelink";

const web3Connect = new Web3Connect.Core({
  network: "mainnet", // optional
  providerOptions: {
    walletconnect: {
      package: WalletConnectProvider, // required
      options: {
        infuraId: "INFURA_ID" // required
      }
    },
    portis: {
      package: Portis, // required
      options: {
        id: "PORTIS_ID" // required
      }
    },
    fortmatic: {
      package: Fortmatic, // required
      options: {
        key: "FORTMATIC_KEY" // required
      }
    },
    squarelink: {
      package: Squarelink, // required
      options: {
        id: "SQUARELINK_ID" // required
      }
    }
  }
});

Individual Connectors

BEFORE (v1.0.0-beta.20)

import Web3Connect from "web3connect";

// For inject providers in dapp browsers
const provider = await Web3Connect.ConnectToInjected();

// For WalletConnect
const provider = await Web3Connect.ConnectToWalletConnect({
  infuraId: "INFURA_ID", // required
  bridge: "https://bridge.walletconnect.org" // optional
});

// For Portis
const provider = await Web3Connect.ConnectToPortis({
  id: "PORTIS_ID", // required
  network: "mainnet" // optional
});

// For Fortmatic
const provider = await Web3Connect.ConnectToFortmatic({
  key: "FORTMATIC_KEY", // required
  network: "mainnet" // optional
});

// For Squarelink
const provider = await Web3Connect.ConnectToSquarelink({
  id: "SQUARELINK_ID", // required
  network: "mainnet" // optional
});

AFTER (v1.0.0-beta.22)

import Web3Connect from "web3connect";
import WalletConnectProvider from "@walletconnect/web3-provider";
import Portis from "@portis/web3";
import Fortmatic from "fortmatic";
import Squarelink from "squarelink";

// For inject providers in dapp browsers
const provider = await Web3Connect.ConnectToInjected();

// For WalletConnect
const provider = await Web3Connect.ConnectToWalletConnect(
  WalletConnectProvider,
  {
    infuraId: "INFURA_ID", // required
    bridge: "https://bridge.walletconnect.org" // optional
  }
);

// For Portis
const provider = await Web3Connect.ConnectToPortis(Portis, {
  id: "PORTIS_ID", // required
  network: "mainnet" // optional
});

// For Fortmatic
const provider = await Web3Connect.ConnectToFortmatic(Fortmatic, {
  key: "FORTMATIC_KEY", // required
  network: "mainnet" // optional
});

// For Squarelink
const provider = await Web3Connect.ConnectToSquarelink(Squarelink, {
  id: "SQUARELINK_ID", // required
  network: "mainnet" // optional
});