back

Connecting a Dapp to the Solana Network

February 23rd 2022

Let's assume for a bit we have an incredible idea for a Dapp (because its so easy to come up with great app ideas!).

It's typical for a Dapp to interact with a blockchain. For this article let's consider a javascript Dapp that connects to the Solana network.

Goal: Successfully fetch the user's Solana address.

This article heavily uses the @solana-labs/wallet-adapter to interface with the Solana network and wallets

Ecosystem

The following components/systems come into play for a Dapp to interact with the Solana Network

  1. yourdapp.js
  2. The desktop browser (yes, for now this needs to be on a Desktop)
  3. Solana Wallet browser extension
  4. your backend (optional)

What Needs to Happen?

In order to retrieve the user's Solana address, the Dapp first needs to invoke the Wallet Browser Extension which in turn will ask the user if they want to share their address with the enclosing web application (Dapp)

Similar to an authentication flow of a SSO.

Pretty simple! When it comes down to it.

Let's Understand the Workflow

Users can have multiple Solana Wallets (e.g Phantom, Solfare, etc) and, even though the Dapp only cares about retrieving a valid Solana address, it still needs to interact with a particular wallet (and therefore that wallet's API) to retrieve the address.

Therefore, now, the Dapp would need to write wallet specific code. Yeah, it seems a little tedious and impractical as we don't know which wallet the user would have installed in the browser.

Solana offers a wallet adapter abstraction which internally supports various wallets, thus making it a little easier.

Step 1: Check if the wallet browser extension is installed?

// yourdapp.js

import { PhantomWalletAdapter } 
    from '@solana/wallet-adapter-wallets'

const wallet = new PhantomWalletAdapter()

wallet.readyState === "INSTALLED"
// Phantom wallet is installed
// in this browser

Step 2: Connect to the wallet and retrieve the public key/address

When the browser executes the below line wallet.connect() it will open the Phantom Chrome Extension asking the user to give permission to the enclosing web application to retrieve its information.

// yourdapp.js

...
await wallet.connect();
wallet.publicKey.toString()

// A8WHmLMXHjQEb7VHjs4vu9B66NQNxrEDq2g84GmDGmhd
// yes, my solana devnet address :)

Step 3: Operate on the public key

Now your Dapp has the user's address, it can store it locally or can send the address to its backend and do what it wants with it! Maybe airdrop some SOL to it! :D

And voila the Dapp is connected to the Solana network!

Question!

Does this mean every user on the internet must install and maintain a Solana wallet to use the Dapp?

Well if the Dapp connects to a Solana network then yes! But the considerations would be larger than that. Does the Dapp need to connect to a blockchain (i.e. Solana)? Does it need to run on a browser? Does it need user blockchain addresses?

If the answer to the above is Yes, then, yes, users would need to have a wallet installed on the browser they use at the time they open your Dapp.

If you are thinking it does not seem that easy to use, you're right, it's not. However, the web3 ecosystem is growing and the interfaces into the web3 infrastructure is getting more native and inbuilt into the existing software we use daily.

We might indeed be early to the game. But hell, as long as we are in the game, the timing will always be right!


References: