Skip to content

Instantly share code, notes, and snippets.

@pedrouid
Last active September 10, 2019 09:34
Show Gist options
  • Save pedrouid/d1bbba594ec679fa16c85fce37c24a2c to your computer and use it in GitHub Desktop.
Save pedrouid/d1bbba594ec679fa16c85fce37c24a2c to your computer and use it in GitHub Desktop.
Migrating Web3Connect from v1.0.0-beta.19 to v1.0.0-beta.20

Web3Connect

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

In this last release, we've refactored the library considerably which includes breaking changes from the previous release. But you will be please to know that we reduced the bundle size from 3.91 mb to 314 kb!! That's a 92% bundle size decrease!!!!

However this comes with its own caveats. Check the two sections bellow for the changes made for Install, Options and Single Provider

Install

Previously we bundled all provider packages inside Web3Connect which made up for most its size so with this new release you need to install the providers in parallel

BEFORE (v1.0.0-beta.19)

npm install --save web3connect

# OR

yarn add web3connect

AFTER (v1.0.0-beta.20)

npm install --save web3connect @walletconnect/web3-provider @portis/web3 fortmatic squarelink

# OR

yarn add web3connect @walletconnect/web3-provider @portis/web3 fortmatic squarelink

Make sure the providers installed in parallel are updated to the following versions or above:

  • @walletconnect/web3-provider: ^1.0.0-beta.34
  • @portis/web3: ^2.0.0-beta.38
  • fortmatic: ^0.8.2
  • squarelink: ^1.0.4

Options

There have been a few small changes in the library and provideroptions.

BEFORE (v1.0.0-beta.19)

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

AFTER (v1.0.0-beta.20)

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

Network

Previously the network value was specified per provider and now is shared between all providers.

Disable WalletConnect

Previsouly you would need to pass a flag disableWalletConnect to disable the WalletConnect provider but now WalletConnect has a required parameter infuraId which just like other providers will disable it when it's not present

WalletConnect Required Parameter

As described above, the WalletConnect provider now requires a parameter infuraId to be passed as part of the provider options

Single Provider

Finally now when only one provider is avaiable either because the browser environment is a mobile Dapp browser or because only one provider had required parameters valid, the library will automatically connect to the single provider.

Example: If the user is inside a mobile dapp browser and clicks connect (or triggers toggleModal) the library will connect directly to the only single provider available instead of displaying one option.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment