Talisman
  • 🧿Introduction
    • Welcome to Talisman
    • Talisman Wallet
      • Extension Feature Highlights
      • Extension Views
    • Talisman Portal
      • Portal Feature Highlights
      • Spirit Keys and Commendations
  • 🌠GETTING STARTED
    • Installing Talisman
      • Download the Extension
      • Create a New Account
      • Back Up Your Secret Phrase
    • Importing Existing Accounts
      • Import from Polkadot.JS
      • Import Ethereum (EVM) Accounts
      • Watched-only Accounts
    • Importing External Wallets
      • Import from Ledger
      • Import from Polkadot Vault
  • 🧿Customizing Talisman
    • Customizing Talisman
      • Multi-Language Support
      • Multi-Currency Display
      • Wallet Options
    • Managing Accounts
      • Account Maintenance
      • Multi-Recovery Phrase Management
    • Change Password
    • Managing Networks and Tokens
      • Joining EVM Networks
      • Opt-in or out of Networks
      • Adding Custom Tokens
      • Adding Custom Substrate Networks
  • 🔮Navigating WEB3
    • Sending and Receiving Funds
      • Copy Address /Receive Funds
      • Sending Funds
      • Reading Transaction Details
      • How to use ENS in Talisman
    • Using the Address Book
    • Using Talisman with a Website/dApp
      • Connect your wallet to a Website/dApp
      • Switching Networks and Accounts on Dapps
      • Token Approvals
    • Using the Talisman Portal
      • Portal Portfolio
      • Your NFTs
      • Explore Polkadot
      • How to Stake on Talisman
      • Transaction History
      • Auto Asset Discovery
    • Ethereum Signing Requests Analysis
    • Substrate Features
      • Get your first DOT / KSM
      • Existential Deposit
      • How to Reap your Account
  • 🛠️EXTERNAL RESOURCES
    • EVM Chain Integration Requirements
    • EVM Integration for Dapps
    • Substrate Integration for Dapps
    • Brand / Media Kit
  • 🎒ABOUT TALISMAN
    • Knowledge Base
      • Polkadot / Kusama Glossary
      • Useful articles / guides
    • Wallet Release Notes
    • Security
    • Privacy Policy
    • Terms of Use
  • 🆘Help and Support
    • Troubleshooting
      • Metamask and Talisman popup priority
      • Balances on Brave not showing
      • Substrate transaction fails due to existential deposit
    • FAQ
Powered by GitBook
On this page
  • The Talisman injected ethereum provider
  • Networks
  • Integration
  • web3react v6
  • Other Frameworks
  • Vanilla implementations
  • Testing EVM on Talisman
  • Questions / support
  1. EXTERNAL RESOURCES

EVM Integration for Dapps

This document will describe how to integrate Talisman into your EVM dapp

PreviousEVM Chain Integration RequirementsNextSubstrate Integration for Dapps

Last updated 1 year ago

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.

The Talisman injected ethereum provider

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.

Networks

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).

Integration

web3react v6

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:

  1. Copy paste the TalismanConnector.ts file in your project

  2. 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)

  3. Add a “Connect Talisman” button

  4. On the button click, call the web3react’s activate method, passing the connector as argument

  5. Use web3react as you normally would 😎

You may use the example project below as reference, the TalismanConnector.ts file is inside it :

Other Frameworks

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.

Vanilla implementations

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:

Implementing the Talisman connect button :

  • 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.

Example implementation :

Please contact us if you need assistance, we can organise an online pair-programming session and get it done together.

Testing EVM on Talisman

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!

Questions / support

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:

🛠️
EIP 1193
EIP 3085
EIP 3326
https://github.com/TalismanSociety/talisman-web3react-example
https://codesandbox.io/s/talisman-connector-modal-d2mt93
https://d2mt93.csb.app/
talisman-noframework-example.zip