EVM Integration for Dapps
This document will describe how to integrate Talisman into your EVM dapp
Last updated
This document will describe how to integrate Talisman into your EVM dapp
Last updated
Talisman supports EVM networks and all dapps on those networks. In order for users to get the benefit of Talismanâs improved UX dapp builders need to make a few small changes to their applications.
Unlike most other browser wallets, Talisman injects its ethereum provider in web pages as window.talismanEth
(not window.ethereum
).
We decided this to allow users to keep Metamask installed & enabled even if they want to use Talisman EVM features. This however requires changes to the dapp, as most are designed to use only window.ethereum
.
Our injected provider is compliant and behaves like any other web3 ethereum provider.
By default only Dotsama ecosystem networks (Moonbeam, Moonriver, Astar, Acala) are registered into the wallet. However other networks (for example Ethereum Mainnet, Polygon, or a local Hardhat blockchain) can be added to the wallet by a dapp. The wallet supports same network adding & switching interface as Metamask (see and for message details).
The below information is for dapps using web3react
, if youâre using a different framework please see below.
Web3react requires a different âconnectorâ for each ethereum provider. We provide a TalismanConnector for an easy integration with web3react.
Integration steps:
Copy paste the TalismanConnector.ts file in your project
Instantiate the connector in the same file where you already instantiate InjectedConnector. It takes the same arguments (the connectorâs code is actually the same, the only difference is that ours uses window.talismanEth
instead of window.ethereum
)
Add a âConnect Talismanâ button
On the button click, call the web3reactâs activate method, passing the connector as argument
Use web3react as you normally would đ
You may use the example project below as reference, the TalismanConnector.ts file is inside it :
Please contact us if your dapp uses another framework (Wagmi, Web3Modal, Web3Onboard, web3react v8, Rainbowkit, etc.) so we can provide your with guidelines and framework specific connector if needed.
If your dapp uses window.ethereum directly, without the help of a web3 framework, then we suggest the following:
When the users clicks âConnect Walletâ, then display a modal allowing the user to select between wallets, as per the below:
Implement a modal as described above, allowing user to choose which wallet to connect
The onClick handler of the âConnect Talismanâ button should execute the same code as the original âConnect Walletâ button that connects Metamask, but using window.talismanEth
instead of window.ethereum
. More specifically, connecting Talisman can be done by calling window.talismanEth.request({ method: âeth_requestAccountsâ})
(recommended) or window.talismanEth.enable()
(legacy approach).
In this handler, also save in a global variable (or local storage) that the user has selected talisman.
In the onClick handler of the âConnect Metamaskâ button, save in the global variable that the user has selected metamask
Implement a getProvider()
method that returns either window.ethereum
or window.talismanEth
based on the user selection saved in the global variable.
All around your code base, everywhere window.ethereum
is called directly, load the provider using getProvider()
instead.
Please contact us if you need assistance, we can organise an online pair-programming session and get it done together.
The current version (v1.5.0+) of the Talisman wallet in the chrome / firefox store contains the EVM support - please add an ETH seed phrase / private key in the Add account
menu and youâll be good to go!
Please message @itsbirdo on Telegram
v 1.1
Sample code to use to perform the integration and to display the modal:
The demo app to test the interaction: