Wallet Integration: Easy

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

Easy(this) - Adding an injected provider to an existing library

Medium - Adding an integration of a wallet

Hard - Adding a wallet as a package to an existing library

This is where my journey started 😁. I was a wannabe blockchain developer that lacked knowledge and had never written a single line of open source code. I was inspired by a user(@commstark) on the Tally Ho Discord who had started contributing to the project and created a team of helpers doing non-technical tasks. Tally Ho had just started their Pawdnership Pack initiative to get developers helping to integrate the wallet with as many products as possible. I thought, why not, what did I have to lose? This is not that actual first PR, in fact, that was very simple(one line of code lol) but from that, I was able to piggyback on the success and the knowledge it gave me. I want to make this public to help others take the first step.

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

Tally Ho

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!

Web3Modal

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 allow Tally Ho to connect to applications when they are using the Web3Modal library. It is important that the Tally Ho logo shows as we want users to have a familiar experience when connecting to the app. This is a pretty simple addition seeing as the wallet library treats all injected providers as a single package and is compostable. Lets spend some time discussing how this actually works to better understand how a wallet is interacting with our browser

A provider is an API the wallet injects into the window object on your local browser. Once installing a wallet like Tally Ho it does this by default. Tally Ho is different from other wallets but we will get into that below. Let’s use Metamask as this example to help build the concept. MM and most web3 wallets inject a global API in the window.ethereum object and this allows websites and dapps to do the following:

• Detect the Ethereum provider (window.ethereum)

• Detect which Ethereum network the user is connected to

• Get the user's Ethereum account(s)

Here is a snippet of code to help you visualize the above statement

// usually this is encompassed in a if statement checking we have a wallet installed if(window.ethereum){ const provider = window.ethereum; startApp(provider); // initialize your app } else { console.log('Please install Wallet!'); }The presence of the provider object indicates an Ethereum user. We won’t go too deep but this global object acts as a gateway. Some highlights of the features:

• provider.isMetaMask - Each wallet has its own variation(provider.isTally) but this allows you to check the wallet currently installed and active.

• provider.isConnected() - Check if the application is already connected.

• send events - eg provider.on('connect', handler: (connectInfo: ConnectInfo) => void);

Hopefully, this should help with the basic building blocks to understanding how an injected wallet is interacting with your browser.

How is Tally Ho Different?

Unrelated to the overarching concept but provides some context for future pieces in the wallet integration series.

Tally Ho knows they are the underdog(pun intended lol). They need to be able to allow devs to connect in any way possible. While also not impeding the experience of having multiple browsers installed as it scales and before it has the full war chest of features we Web3 natives need.

The wallet does this in two ways:

• Allowing users to set the wallet as default in the settings. This then injects the window.ethereum object that you could use window.ethereum.isTally and it would return true. If it is not set to default and another wallet was installed, that wallet would now take precedence. This helps provide Tally with ease of integration while leveraging existing infrastructure.

Tally Ho also injects the window.Tally object to allow it to act as a stand-alone wallet alongside other injected providers and empowers developers to be able to use say Tally Ho and Metamask and connect separately.

1. Add Tally as an injected option

This adds a couple of items. An image to use when the library recognizes Tally Ho as an injected provider. Also added is the standard IProviderInfo type into the src/providers/injected/index.ts file with the Tally configs set. The /injected/index.ts file houses all of the injected providers and some other logic loops through to see what one is connected. The logic is not necessary to dive into now but post 3(Wallet Integration: Hard) in this wallet integration series explains it more in depth

2. Add Tally to documentation

This commit simply updates the documentation to allow devs to know that Tally Ho is integrated within Web3Modal.

While helping work on Web3 apps may seem daunting at first. This wallet integration helps to break down how easy some of these features can be to add. An integration like this is a great way for a relatively small piece of work to provide an exponential amount of value due to the library already being integrated with numerous DApps. Every time one of the DApps updates to the version this change was introduced Tally Ho is able to connect.

https://paragraph.xyz/@0xZOZ/pull-requests-with-zoz

Cover Image

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 easy mode

About

Twitter: @0xzoz

GitHub: @0xzoz

Mirror: @0xzoz

Discord: @zoz.eth#6952

ENS: zoz.eth