Have ideas to improve npm?Join in the discussion! »

    @daostack/web3connect
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0-beta.21.1 • Public • Published

    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/

    preview

    Usage

    1. Install Web3Connect NPM package
    npm install --save web3connect
     
    # OR 
     
    yarn add web3connect
    1. Install Provider packages
    npm install --save @walletconnect/web3-provider @portis/web3 fortmatic squarelink
     
    # OR 
     
    yarn add @walletconnect/web3-provider @portis/web3 fortmatic squarelink
    1. Then you can integrate it three different ways:

    React Button

    Add Web3Connect Button to your React App as follows

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

    Core Module

    Add Web3Connect Core to your Dapp as follows

    import Web3Connect from "web3connect";
     
    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
        }
      }
    });
     
    // subscribe to connect
    web3Connect.on("connect", (provider: any) => {
      const web3 = new Web3(provider); // add provider to web3
    });
     
    // subscribe to close
    web3Connect.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)

    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 Squarelink
    const provider = await Web3Connect.ConnectToSquarelink({
      id: "SQUARELINK_ID", // required
      network: "mainnet" // 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
    });

    Utils

    function checkInjectedProviders(): IInjectedProvidersMap;
    function getInjectedProviderName(): string | null;
    function getProviderInfoByName(name: string | null): IProviderInfo;
    function getProviderInfo(provider: any): IProviderInfo;
    function isMobile(): boolean;
    function formatProviderDescription(ProviderInfo: IProviderInfo);

    Types

    interface IProviderInfo {
      name: string;
      type: string;
      logo: string;
      check: string;
      styled: {
        [prop: string]: any;
      };
    }
     
    interface IProviderOptions {
      [providerName: string]: any;
    }
     
    interface IEventCallback {
      event: string;
      callback: (result: any) => void;
    }
     
    interface IInjectedProvidersMap {
      injectedAvailable: boolean;
      [isProviderName: string]: boolean;
    }

    Options

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

      • WalletConnect:

        • infuraId: the infura app ID registered (required)
        • bridge: bridge url (optional)
      • Squarelink:

        • id: the client ID registered (required)
        • network: choose initial network name (optional)
        • config: additional configuration, like scope to use supplemental methods (optional)
      • Portis:

        • id: the app id registered (required)
        • network: choose initial network name (optional)
        • config: additional configuration, like support of Gas Station Network (optional)
      • Fortmatic:

        • key: the secret key (required)
        • network: choose initial network name (optional)

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

    • 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

    Install

    npm i @daostack/web3connect

    DownloadsWeekly Downloads

    7

    Version

    1.0.0-beta.21.1

    License

    LGPL-3.0

    Unpacked Size

    358 kB

    Total Files

    133

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar