Nonstick Pancake Maker

    @envatic/web3modal-ts
    TypeScript icon, indicating that this package has built-in type declarations

    1.3.5 • Public • Published

    Web3Modal-TS

    Fork of https://github.com/Web3Modal/web3modal, without any React or visual component implemented. Just the typescript core.

    Motivation

    Web3Modal is a very useful and easy to use library, that allows developers to add support for multiple providers in their apps with a simple customizable configuration.

    However, the original package uses React and its bundled vanilla JS version also has React bundled with it. Therefore, separating the typescript core from the React data providers and visual components is particularly useful, not only to allow full customization of the UI, but can also serve as a starting point for implementations in other frameworks like Angular and VueJS.

    See

    https://github.com/envatic/vue3web3modal

    Usage

    1. Install Web3Modal-TS NPM package
    npm install --save @envatic/web3modal-ts

    Or

    yarn add @envatic/web3modal-ts
    1. Instantiate a Web3WalletConnector object
    const web3walletConnector = new Web3WalletConnector({
      network: "mainnet", // optional
      cacheProvider: true, // optional
      providerOptions // required
    })

    The Web3WalletConnector constructors takes an optional configuration argument that matches the original web3modal's configuration object

    See Web3Modal's provider options

    Optionally the object can be instantiated and the configuration added/overriden later with the setConfiguration method:

      web3WalletConnector.setConfiguration({
        network: "mainnet", // optional
        cacheProvider: true, // optional
        providerOptions // required
      })
    1. Set connection and error event handlers

    The web3WalletConnector object contains the event handlers for errors and connection to a wallet provider:

      web3WalletConnector.providerController.on(CONNECT_EVENT, provider => { ... });
    
      web3WalletConnector.providerController.on(ERROR_EVENT, error => { ... });

    It also contains the methods to handle provider caching:

      web3WalletConnector.providerController.clearCachedProvider();
    
      web3WalletConnector.providerController.setCachedProvider(idString);

    Provider Options

    Web3Modal-TS supports the original Web3modal's Metamask WalletConnect, Fortmatic, Torus, Authereum, UniLogin, BurnerConnect, Portis, Squarelink, Arkane, Mew Connect protocol, D'CENT Wallet and Bitski. See Web3Modal's provider options

    Additionally, it supports:

    WalletLink

    1. Install Provider Package
    npm install --save walletlink
    
    # OR
    
    yarn add walletlink
    1. Set Provider Options
    import WalletLink from "walletlink";
    
    const providerOptions = {
      walletlink: {
        package: WalletLink,
        options: {
          infuraUrl: 'https://mainnet.infura.io/v3/PROJECT_ID',
          appName: "My Awesome DApp",
          appLogoUrl: "https://example.com/logo.png",
          darkMode: false
        },
      },
    };

    License

    MIT

    Install

    npm i @envatic/web3modal-ts

    DownloadsWeekly Downloads

    11

    Version

    1.3.5

    License

    MIT

    Unpacked Size

    302 kB

    Total Files

    147

    Last publish

    Collaborators

    • envatic