Coder Social home page Coder Social logo

wallet-provider's Introduction

WalletProvider

Wallet Provider is a lightweight library which provides a single api for Dapps to interact with various wallets. The main goal and purpose is to support all major blockchains & wallets.

Any library meant for frontend use should be light-weight enough. Wallet provider is only 6.8kB minified & gzipped.

LibertyPie Wallet Provider

Code Repository

https://github.com/libertypie/Wallet-Provider

Installation

via npm

npm i --save @libertypie/wallet-provider

via yarn

yarn add @libertypie/wallet-provider

Usage

ES6

import WalletProvider from "@libertypie/wallet-provider"

Typescript

import WalletProvider from "@libertypie/wallet-provider/src/index"
    let providers = {
        "web3_wallets": {
             connect_text: "Connect with Metamask or Brave"
        },
        "binance_chain_wallet": {
            connect_text: "Connect with Binance Chain Wallet"
        },
    };

    let walletProvider = new WalletProvider({
        cacheProvider: true,
        providers,
        debug: true
    });

    let connectStatus = await walletProvider.connect();

    if(connectStatus.isError()){
        //some error info
        return;
    }

    //lets retrieve the connection info object
    // {provider, chainId, account}
    let resultInfo = connectStatus.getData();

    let provider = resultInfo.provider;
    let account = resultInfo.account;
    let chainId = resultInfo.chainId;

Methods

connect():

Establish a connection between the dApp and the wallet, if providerCache was enabled on previous connection and a cache exists, the previously connected provider will be used, otherwise a modal will be opened for user to select a provider.

    //returns a Status object.
    let connectResult = await  walletProvider.connect();

    if(connectStatus.isError()){
        //some error info
        return;
    }

    //lets retrieve the connection info object
    // {provider, chainId, account}
    let resultInfo = connectStatus.getData();

    let provider = resultInfo.provider;
    let account = resultInfo.account;
    let chainId = resultInfo.chainId;

showModal():

manually open the modal, this method returns selected provider id

let selectedProviderId = await walletProvider.showModal();

closeModal():

manually close the modal, returns void

 await walletProvider.closeModal();

Events

There are two ways to listen to events, 1. on the provider 2. from Wallet Provider object it self\

Wallet Provider events are the same as the provider's event but with support for custom provider events. Example: Portis custom event mapping onActiveWalletChanged(walletAddress,()=>{}) => walletProvider.on("accountsChanged",()=>{})

    //listen to modal open
    walletProvider.on("modalOpen",(modal)=>{
        console.log(`Modal ${modal.id} opened`)
    })

    //modal close event
    walletProvider.on("modalClose",(modal)=>{
        console.log(`Modal ${modal.id} closed`)
    })

    //wallet connected successful event
    walletProvider.on("connect",({provider,chainId,account})=>{
        console.log("Wallet Connection Successful")
    })  

    //wallet connection failed
    walletProvider.on("connectError",(error: Error)=>{
        console.log("Wallet Connection Error")
    })

    //wallet's current account is changed
    //@param Array<string> accounts
    walletProvider.on("accountsChanged",(accountsArray)=>{
        console.log("Accounts is changed")
        console.log(`new account ${accountsArray[0]}`)
    })

    //wallet's current chain is changed
    //@param Array<string> accounts
    walletProvider.on("chainChanged",(chainId)=>{
        console.log("Chain is changed")
        console.log(`new chain id ${chainId}`)
    })


    //wallet or web3 disconnected
    walletProvider.on("disconnect",(error)=>{
        console.log("Disconnected")
        console.log(error.message,error.code)
    })  


    //listen to general errors
    walletProvider.on("error",(error)=>{
        console.log("an Error occurred")
        console.log(error.message,error.code)
    })

Supported Wallets & Integrations

Wallet Provider has a native support for several wallets, below is the list of supported wallets & how to integrate them

  1. Web3 Wallets: Metamask, Dapper, TrustWallet, Brave & most extension wallets
  2. Binance Chain Wallet
  3. Portis
  4. WalletLink

wallet-provider's People

Contributors

big-zak avatar twygod avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.