Wallet Integration: Hard

This is a three-part series in the larger pull-requests-with-zoz series:

Easy - Adding an injected provider to an existing library

Medium - Adding an integration of a wallet

Hard(this) - Adding a wallet as a package to an existing library

When starting to contribute to the open-source community-run browser wallet Tally Ho by integrating it with products, I didn’t know much about how a crypto wallet is integrated with dApps. Having spent numerous hours helping the team and community, I now have a better understanding of what is technically happening and how it can be done in the best way possible to help with not only connecting to an application but also strategically providing the tools for others to help brand awareness and visibility.

This article breaks down how to integrate a wallet with a wallet library by creating a separate package that’s loosely coupled to the library to provide more composability. Tally Ho had originally been integrated into Web3Modal as an add-on to the injected provider slot, which the library uses to bundle the common wallet type together. Generally, this works by identifying the current extension browser and connecting to that. For example, if you have MathWallet installed instead of Metamask, the injected option would show the MathWallet logo and name on the button, and it would connect seamlessly.

Due to the early stage nature of Tally Ho as a project and the roll out of features compared to other more established wallets, it was generally used alongside another wallet. This did not provide the best user experience. To remedy this, we change the current implementation and implemented it as a package. I went over the first integration in the Wallet Integration: Easy article in this series if you would like to check it out.

https://github.com/WalletConnect/web3modal/pull/571

Tally Ho is an Open Source Community run Web Browser Extension Wallet. Wow, that's a mouthful! What exactly does that mean?

Necessary Backstory: The largest wallet in space is Metamask. While once a grassroots endeavour, with the growth of crypto as an industry, MM’s user base also grew - massively! MM is owned by Consensus, and they have investors who they have to please. This led to the wallet creating a revenue-generating feature: the ability to do token swaps natively in the wallet(for a generous fee, of course). Around this time, MM also changed their license so others could not use their code(not very web3-like).

Tally Ho is an initiative to do exactly the opposite. Create a wallet that is built, owned and used by its users. It’s open source so you can fork the crap out of it, but most importantly, the value accrues back to the users. It is the essence of web3 and proves that we can do good!

This is one of the most used wallet libraries within the industry. Web3Modal is an easy-to-use library to help developers add support for multiple providers in their apps with a simple, customizable configuration.

By default, Web3Modal Library supports injected providers like ( Metamask, Brave Wallet, Dapper, Frame, Gnosis Safe, Tally, Web3 Browsers, etc) and WalletConnect. You can also easily configure the library to support Coinbase Wallet, Torus, Portis, Fortmatic and many more.

To change the existing Tally Ho wallet integration from an add-on to the injected provider package and separate it out into its own package. The reasoning for this is 3 fold:

1. Due to a change in the Tally Ho code injecting Web3 into the browser, the original integration broke, and the Tally Ho logo would no longer show. The wallet would still connect, but this didn’t really jive with us.

2. You needed to set Tally Ho as the default wallet in settings if you had other browser wallets alongside Tally Ho. Again, this is a really bad UX, and we could do better

3. Due to the collaborative nature of the Tally Ho story and being a community-run open-source wallet, products want to have Tally Ho as an option, even if the user does not have it installed, to create brand awareness.

With a new understanding of the best way to implement this and the above user issues, we wanted to address them. Let’s break down what we did. You can always look through the other articles in this wallet series for higher-level explanations if some of the points below don’t quite make sense.

1. Renaming for latest brand change

Since the initial PR integrating Tally Ho there was a name change due to some conflicts with the name Tally instead of Tally Ho. This commit corrects the naming to represent Tally Ho before we make further changes.

1. Add additional check to capture Tally Ho instead of fallback wallet

Because of changes within the Tally Ho codebase and injecting Web3 into the window(see 1. above), we need to factor in that Tally wants to be noticed instead of being overridden by the fallback wallet(web3). A simple check is added to the logic that checks if Tally Ho is identified and if Web3 is identified. This will give Tally Ho precedence over the default.

1. Use window.tally to make Tally Ho dominant wallet when installed

Tally Ho uses two different methods to inject into the window object. Firstly injecting Tally(eg window.Tally) directly into the window object allows it to be detected and used at all times. Secondly, if the ‘set as default’ option is checked in the settings. Then Tally Ho mimicks Metamask by also injecting it into the Ethereum object in the window object (eg window.ethereum) and can be checked via window.ethereum.isTally field. Because we want to allow Tally Ho to be recognized and used alongside other extension browsers. We refactor the package to use the window.tally method.

1. Add Tally Ho provider

We need to add a custom provider for Tally Ho to be able to use a couple of Tally Ho specific packages:

- tallyho-detect-provider - tallyho-onboarding

This new provider will make sure that Tally Ho is not using the standard injected provider if the product using Web3Modal specifically sets Tally Ho as a separate slot.

1. Allow Tally Ho to be interchangeable either as injected or as a provider option

Because we want this change to be backwards compatible and also allow products that do not add Tally Ho as a package to be able to have Tally Ho as an injected provider. This requires a couple of changes.

- A check in src/helpers/utils.ts (L182) to set the injected value to Tally Ho if the package is not installed and if Tally Ho is installed

- Change the name of the Tally Ho injected instance to be able to be used for the package as well

- Change logic ordering in src/providers/connectors/injected.ts

- Instead of just console logging in src/providers/connectors/tallyho.ts throw an error to exit the operation.

1. Add documentation

Add the relevant documentation to capture the changes that were incorporated into this PR.

We end our wallet series here by adding a wallet package into a library. The skills you have learnt over the last 3 articles more than provide you with the ability to contribute to a DAO and open source protocol. Hopefully, this gave an understanding of wallets and their interaction with the browser and web applications.

We at Tally Ho need contributors to help integrate with other projects. If you would like to join the pawdnership team, please reach out. We are also happy to help mentor keen enthusiast individuals!

The image above(like my PP) is created with abraham.ai - an AI artwork generator SEED: zoz.eth integrating a dog wallet with a blockchain network using hard mode

Twitter: @0xzoz

GitHub: @0xzoz

Mirror: @0xzoz

Discord: @zoz.eth#6952

ENS: zoz.eth