web3.js
Already have support for Web3? GREAT 🎉, this is the place to start.
If you already support Web3-technology, you can improve the UX within your application by integrating the Venly Web3 provider, a smart wrapper around the existing Web3 Ethereum JavaScript API.
By making use of our Web3 provider you are able to leverage the full potential of Venly with minimal effort and you will be able to onboard users that are less tech-savvy without making them leave your application or download third-party plugins. Integrating just takes 2 steps and 5 minutes.
Install the library by downloading it to your project via NPM
npm i @venly/web3-provider
Alternatively, you could also include the library directly from a CDN
<script src="https://unpkg.com/@venly/web3-provider/umd/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@venly/web3-provider/umd/index.js"></script>
Add the following lines of code to your project, it will load the Venly web3 provider.
Simple
Advanced
import Web3 from 'web3';
import { VenlyProvider } from '@venly/web3-provider';
const Venly = new VenlyProvider();
const options: VenlyProviderOptions = {
clientId: 'YOUR_CLIENT_ID'
};
const provider = await Venly.createProvider(options);
const web3 = new Web3(provider);
import Web3 from 'web3';
import { VenlyProvider } from '@venly/web3-provider';
const Venly = new VenlyProvider();
const options = {
clientId: 'YOUR_CLIENT_ID',
environment: 'staging', //optional, production by default
signMethod: 'POPUP', //optional, REDIRECT by default
bearerTokenProvider: () => 'obtained_bearer_token', //optional, default undefined
//optional: you can set an identity provider to be used when authenticating
authenticationOptions: {
idpHint: 'google'
},
secretType: 'ETHEREUM' //optional, ETHEREUM by default
};
const provider = await Venly.createProvider(options);
const web3 = new Web3(provider);
The web3 instance now works as if it was injected by parity or metamask. You can fetch wallets, sign transactions, and messages.
Ready to try out the Wallet-Widget?
Although we use the widget under the hood, the functionality of the web3 wrapper isn’t limited to the web3 API. Linking or fetching profile information is not supported by Web3, but it is available in our wrapper. After creating a Venly Provider Engine, an instance of VenlyConnect is added to the global Venly object. As a result, it’s possible to call the widget natively, like so.
Venly.connect().api.getProfile();
It is possible to provide a
secretType when creating the web3 Venly provider.
When you are connected to one network and want to switch to a different network:- call
changeSecretType(secretType)on the provider, this returns a new instance of the provider - Re-initialize Web3:
web3 = new Web3(provider); - If necessary, recreate subscriptions
- Refresh wallets using
web3.eth.getAccounts()(a user can have different wallets depending on the selected chain) - 🎉 All done!
Venly.changeSecretType('BSC').then(provider => {
window.web3 = new Web3(provider);
window.web3.eth.getChainId().then(network => {
//returns the new chainId
});
window.web3.eth.getAccounts(function (err, wallets) {
//returns new wallets for given chain, update your UI accordingly
});
});
Last modified 2mo ago