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/
web3connect
Projects using Open a PR to add your project to the list!
Related Efforts
Usage
- Install Web3Connect NPM package
npm install --save web3connect # OR yarn add web3connect
- Install Provider packages
/* See Provider Options Section */
- Then you can add Web3Connect to your Dapp as follows
;; const providerOptions = /* See Provider Options Section */; const web3Connect = network: "mainnet" // optional cacheProvider: true // optional providerOptions // required; const provider = await web3Connect; const web = provider;
Provider Options
These are all the providers available with Web3Connect and how to configure their provider options
WalletConnect
- Install Provider Package
npm install --save @walletconnect/web3-provider # OR yarn add @walletconnect/web3-provider
- Set Provider Options
; ;
Note: A WalletConnect instance is available on the provider as provider.wc
Portis
- Install Provider Package
npm install --save @portis/web3 # OR yarn add @portis/web3
- Set Provider Options
; ;
Note: A Portis instance is available on the provider as provider._portis
Fortmatic
- Install Provider Package
npm install --save fortmatic # OR yarn add fortmatic
- Set Provider Options
; ;
Note: A Fortmatic instance is available on the provider as provider.fm
Squarelink
- Install Provider Package
npm install --save squarelink # OR yarn add squarelink
- Set Provider Options
; ;
Note: A Squarelink instance is available on the provider as provider.sqlk
Torus
For more info please refer to Torus documentation
- Install Provider Package
npm install --save @toruslabs/torus-embed # OR yarn add @toruslabs/torus-embed
- Set Provider Options
; ;
Note: A Torus instance is available on the provider as provider.torus
Arkane
- Install Provider Package
npm install --save @arkane-network/web3-arkane-provide # OR yarn add @arkane-network/web3-arkane-provide
- Set Provider Options
; ;
Authereum
- Install Provider Package
npm install --save authereum # OR yarn add authereum
- Set Provider Options
; ;
Note: An Authereum instance is available on the provider as provider.authereum
BurnerConnect
- Install Provider Package
npm install --save @burner-wallet/burner-connect-provider # OR yarn add @burner-wallet/burner-connect-provider
- Set Provider Options
; ;
Utils
;;;;;;
Types
Connect to specific provider
In case you want to connect a specific provider, you can use the method connectTo
and use the specific id. Example:
;; const providerOptions = /* See Provider Options Section */; const web3Connect = network: "mainnet" // optional cacheProvider: true // optional providerOptions // required; const provider = await web3Connect; const web = provider;
Optional Flags
Disable Injected Provider
By default is set to false
and Web3Connect always displays InjectedProvider as an option to the user if available. However you can disable it as an optional flag if you desire:
const web3Connect = disableInjectedProvider: true ;
Cache Provider
By default is set to false
and Web3Connect will always require the user to choose a provider option before triggering the onConnect event. However you can enable caching the last chosen provider. Example:
const web3Connect = cacheProvider: true ;
If you wish to reset the cached provider you can call the following method:
web3Connect.clearCachedProvider;
If you wish to connect to the cachedProvider you can simply do the following:
if web3Connect.cachedProvider
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