Web3connect

A single Web3 / Ethereum provider solution for all Wallets

Introduction

Web3Connect is an easy-to-use library to help developers add support for multiple providers in their apps with a simple customizable configuration.

By default Web3Connect Library supports injected providers like (Metamask, Dapper, Gnosis Safe, Web3 Browsers, etc) and WalletConnect, You can also easily configure the library to support Fortmatic, Squarelink, and Portis.

Preview

You can test the library on: https://web3connect.com/

Usage

1. Install Web3Connect NPM package

npm install --save web3connect
# OR
yarn add web3connect

2. Install Provider packages

npm install --save @walletconnect/web3-provider @portis/web3 fortmatic squarelink
# OR
yarn add @walletconnect/web3-provider @portis/web3 fortmatic squarelink

3. Then you can integrate it three different ways:

• React Button
• Core Module
• Individual Connectors

React Button

Add Web3Connect Button to your React App as follows

importWeb3Connectfrom"web3connect";importWalletConnectProviderfrom"@walletconnect/web3-provider";importPortisfrom"@portis/web3";importFortmaticfrom"fortmatic";importSquarelinkfrom"squarelink";<Web3Connect.Buttonnetwork="mainnet"// optionalproviderOptions={{walletconnect: {package: WalletConnectProvider,// requiredoptions: {infuraId: "INFURA_ID"// required}},portis: {package: Portis,// requiredoptions: {id: "PORTIS_ID"// required}},torus: {package: Torus,// requiredoptions: {enableLogging: false,// optionalbuttonPosition: "bottom-left",// optionalbuildEnv: "production",// optionalshowTorusButton: true// optional}},fortmatic: {package: Fortmatic,// requiredoptions: {key: "FORTMATIC_KEY"// required}},squarelink: {package: Squarelink,// requiredoptions: {id: "SQUARELINK_ID"// required}}}}onConnect={(provider: any)=>{constweb3=newWeb3(provider);// add provider to web3}}onClose={()=>{console.log("Web3Connect Modal Closed");// modal has closed}}/>;

Core Module

Add Web3Connect Core to your Dapp as follows

importWeb3Connectfrom"web3connect";importWalletConnectProviderfrom"@walletconnect/web3-provider";importPortisfrom"@portis/web3";importFortmaticfrom"fortmatic";importSquarelinkfrom"squarelink";constweb3Connect=newWeb3Connect.Core({network: "mainnet",// optionalproviderOptions: {walletconnect: {package: WalletConnectProvider,// requiredoptions: {infuraId: "INFURA_ID"// required}},portis: {package: Portis,// requiredoptions: {id: "PORTIS_ID"// required}},torus: {package: Torus,// requiredoptions: {enableLogging: false,// optionalbuttonPosition: "bottom-left",// optionalbuildEnv: "production",// optionalshowTorusButton: true// optional}},fortmatic: {package: Fortmatic,// requiredoptions: {key: "FORTMATIC_KEY"// required}},squarelink: {package: Squarelink,// requiredoptions: {id: "SQUARELINK_ID"// required}}}});// subscribe to connectweb3Connect.on("connect",(provider: any)=>{constweb3=newWeb3(provider);// add provider to web3});// subscribe to closeweb3Connect.on("close",()=>{console.log("Web3Connect Modal Closed");// modal has closed});web3Connect.toggleModal();// open modal on button click

Individual Connectors

Add individual connectors for each provider to your own UI (no modal provided)

importWeb3Connectfrom"web3connect";importWalletConnectProviderfrom"@walletconnect/web3-provider";importPortisfrom"@portis/web3";importFortmaticfrom"fortmatic";importSquarelinkfrom"squarelink";// For inject providers in dapp browsersconstprovider=awaitWeb3Connect.ConnectToInjected();// For WalletConnectconstprovider=awaitWeb3Connect.ConnectToWalletConnect(WalletConnectProvider,{infuraId: "INFURA_ID",// requiredbridge: "https://bridge.walletconnect.org"// optional});// For Portisconstprovider=awaitWeb3Connect.ConnectToPortis(Portis,{id: "PORTIS_ID",// requirednetwork: "mainnet"// optional});// For Fortmaticconstprovider=awaitWeb3Connect.ConnectToFortmatic(Fortmatic,{key: "FORTMATIC_KEY",// requirednetwork: "mainnet"// optional});// For Torusconstprovider=awaitWeb3Connect.ConnectToTorus();// For Squarelinkconstprovider=awaitWeb3Connect.ConnectToSquarelink(Squarelink,{id: "SQUARELINK_ID",// requirednetwork: "mainnet"// optional});

Utils

functioncheckInjectedProviders(): IInjectedProvidersMap;functiongetInjectedProviderName(): string|null;functiongetProviderInfoByName(name: string|null): IProviderInfo;functiongetProviderInfo(provider: any): IProviderInfo;functionisMobile(): boolean;functionformatProviderDescription(providerInfo: IProviderInfo);

Types

interfaceIProviderInfo{name: string;type: string;logo: string;check: string;styled: {[prop: string]: any;};}interfaceIProviderOptions{[providerName: string]: {package: any;options: any;};}interfaceIInjectedProvidersMap{injectedAvailable: boolean;[isProviderName: string]: boolean;}interfaceIProviderCallback{name: string|null;onClick: ()=>Promise<void>;}

Options

• providerOptions (optional): An object mapping arbitrary string that adds the required configuration to multiple web3 providers.

  • walletconnect:

    • package: dependency injection to enable provider
    • options:
      • infuraId: the infura app ID registered (required)
      • bridge: bridge url (optional)

  • portis:

    • package: dependency injection to enable provider
    • options:
      • id: the app id registered (required)
      • network: choose initial network name (optional)
      • config: additional configuration, like support of Gas Station Network (optional)

  • fortmatic:

    • package: dependency injection to enable provider
    • options:
      • key: the secret key (required)
      • network: choose initial network name (optional)

  • squarelink:

    • package: dependency injection to enable provider
    • options:
      • id: the client ID registered (required)
      • network: choose initial network name (optional)
      • config: additional configuration, like scope to use supplemental methods (optional)

You can disable the injected provider by adding the following flag:

• disableInjectedProvider: true (optional)

Collaboration

Code contributions are welcome ❤️❤️❤️!

If you wish to support a new provider submit a issue to the repo or fork this repo and create a pull request.

You can join to our discord to further discuss https://discordapp.com/invite/YGnSX9y