Neverending Pun Machine

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

    1.0.0-beta.26 • 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 Portis, Fortmatic, Squarelink, Torus, Authereum and Arkane.

    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

    See Providers Options Section for each provider

    1. Then you can integrate it two different ways:

    React Button

    Add Web3Connect Button to your React App as follows

    import Web3Connect from "web3connect";
    
    const providerOptions = { /* See Provider Options Section */ }
    
    <Web3Connect.Button
      network="mainnet" // optional
      providerOptions={providerOptions}
      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 providerOptions = {
      /* See Provider Options Section */
    };
    
    const web3Connect = new Web3Connect.Core({
      network: "mainnet", // optional
      providerOptions: providerOptions
    });
    
    // 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

    Provider Options

    These are all the providers available with Web3Connect and how to configure their provider options

    WalletConnect

    1. Install Provider Package
    npm install --save @walletconnect/web3-provider
    
    # OR
    
    yarn add @walletconnect/web3-provider
    1. Set Provider Options
    import WalletConnectProvider from "@walletconnect/web3-provider";
    
    const providerOptions = {
      walletconnect: {
        package: WalletConnectProvider, // required
        options: {
          infuraId: "INFURA_ID" // required
        }
      }
    };

    Portis

    1. Install Provider Package
    npm install --save @portis/web3
    
    # OR
    
    yarn add @portis/web3
    1. Set Provider Options
    import Portis from "@portis/web3";
    
    const providerOptions = {
      portis: {
        package: Portis, // required
        options: {
          id: "PORTIS_ID" // required
        }
      }
    };

    Fortmatic

    1. Install Provider Package
    npm install --save fortmatic
    
    # OR
    
    yarn add fortmatic
    1. Set Provider Options
    import Fortmatic from "fortmatic";
    
    const providerOptions = {
      fortmatic: {
        package: Fortmatic, // required
        options: {
          key: "FORTMATIC_KEY" // required
        }
      }
    };

    Squarelink

    1. Install Provider Package
    npm install --save squarelink
    
    # OR
    
    yarn add squarelink
    1. Set Provider Options
    import Squarelink from "squarelink";
    
    const providerOptions = {
      squarelink: {
        package: Squarelink, // required
        options: {
          id: "SQUARELINK_ID" // required
        }
      }
    };

    Torus

    1. Install Provider Package
    npm install --save @toruslabs/torus-embed
    
    # OR
    
    yarn add @toruslabs/torus-embed
    1. Set Provider Options
    import Torus from "@toruslabs/torus-embed";
    
    const providerOptions = {
      torus: {
        package: Torus, // required
        options: {
          enableLogging: false, // optional
          buttonPosition: "bottom-left", // optional
          buildEnv: "production", // optional
          showTorusButton: true, // optional
          enabledVerifiers: {
            // optional
            google: false // optional
          }
        }
      }
    };

    Arkane

    1. Install Provider Package
    npm install --save @arkane-network/web3-arkane-provide
    
    # OR
    
    yarn add @arkane-network/web3-arkane-provide
    1. Set Provider Options
    import Arkane from "@arkane-network/web3-arkane-provider";
    
    const providerOptions = {
      arkane: {
        package: Arkane, // required
        options: {
          clientId: "ARKANE_CLIENT_ID" // required, replace
        }
      }
    };

    Authereum

    1. Install Provider Package
    npm install --save authereum
    
    # OR
    
    yarn add authereum
    1. Set Provider Options
    import Authereum from "authereum";
    
    const providerOptions = {
      authereum: {
        package: Authereum, // required
        options: {}
      }
    };

    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]: {
        package: any;
        options: any;
      };
    }
    
    interface IInjectedProvidersMap {
      injectedAvailable: boolean;
      [isProviderName: string]: boolean;
    }
    
    interface IProviderCallback {
      name: string | null;
      onClick: () => Promise<void>;
    }

    Optional Flags

    You can enable the following optional flags:

    • disableInjectedProvider: disable displaying injected provider as an option (default: false)

    Adding a new provider

    Do you want to add your provider to Web3Connect? All logic for supported providers lives inside the src/providers directory. To add a new follow the following steps here

    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 @totle/web3connect

    DownloadsWeekly Downloads

    5

    Version

    1.0.0-beta.26

    License

    LGPL-3.0

    Unpacked Size

    1.27 MB

    Total Files

    126

    Last publish

    Collaborators

    • alexdarkstalker2007
    • nasaownsky
    • passabilities
    • totlecrypto