npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@wildcards/web3connect

v1.0.0-beta.23.2

Published

A single Web3 / Ethereum provider solution for all Wallets

Downloads

57

Readme

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 @toruslabs/torus-embed

# OR

yarn add @walletconnect/web3-provider @portis/web3 fortmatic squarelink @toruslabs/torus-embed
  1. Then you can integrate it three different ways:

React Button

Add Web3Connect Button to your React App as follows

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

<Web3Connect.Button
  network="mainnet" // optional
  providerOptions={{
    walletconnect: {
      package: WalletConnectProvider, // required
      options: {
        infuraId: "INFURA_ID" // required
      }
    },
    portis: {
      package: Portis, // required
      options: {
        id: "PORTIS_ID" // required
      }
    },
    torus: {
      package: Torus, // required
      options: {
        enableLogging: false, // optional
        buttonPosition: "bottom-left", // optional
        buildEnv: "production", // optional
        showTorusButton: true // optional
      }
    },
    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

Add Web3Connect Core to your Dapp as follows

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

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
      }
    },
    torus: {
      package: Torus, // required
      options: {
        enableLogging: false, // optional
        buttonPosition: "bottom-left", // optional
        buildEnv: "production", // optional
        showTorusButton: true // optional
      }
    },
    fortmatic: {
      package: Fortmatic, // required
      options: {
        key: "FORTMATIC_KEY" // required
      }
    },
    squarelink: {
      package: Squarelink, // required
      options: {
        id: "SQUARELINK_ID" // 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";
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 Torus
const provider = await Web3Connect.ConnectToTorus();

// For Squarelink
const provider = await Web3Connect.ConnectToSquarelink(Squarelink, {
  id: "SQUARELINK_ID", // 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]: {
    package: any;
    options: any;
  };
}

interface IInjectedProvidersMap {
  injectedAvailable: boolean;
  [isProviderName: string]: boolean;
}

interface IProviderCallback {
  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)
    • 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