Back

Why You Should Use Wallet Adapter

, by mwrites
Why You Should Use Wallet Adapter

If you followed Part 1 of the Scaffold Series, or ever wondered why we recommend using the Wallet Adapter Library, this article is for you.

Let's assume the user already has a wallet app/extension installed such as Phantom installed.

Let's say we want to do that connection a la mano, this is how to code would look like:

const connectWallet = async () => {
  try {
    const { solana || !solana.isPhantom} = window;

    if (!solana) {
      alert('User Wallet App not installed');
      return;
    }
    console.log('Wallet App found! Connecting to Wallet..');
    
    const response = await solana.connect();
    const publicKey = response.publicKey.toString();
    console.log(`Wallet connected!, address:, ${publicKey}`);

    return { response, publicKey };
  } catch (error) {
    console.error(error);
  }
};

solana: assuming it is phantom wallet, a solana object will be injected into the window.
solana.connect(): this allows our dapp to access the user's wallet.
publicKey: once we have the publicKey we can start doing some web3 stuff.

Quite straightforward isn't it? Well, this works for a toy DApp but let's think a bit about real use cases because we are pros, aren't we?

  • First, what will happen if the user has not installed Phantom? Can you show a UI to ask the user to install a wallet extension first?
  • Secondly, can you implement a disconnect link, maybe solana.disconnect()?
  • Then we also need to keep track of the connection state.

Although it seems not difficult, what if I told you that no wallets are built the same, connect() and disconnect() might work for phantom, but what about the other Solana wallets (including the ones that do not exist yet)?

Wallet Adapter - The Pitch

  • Out of the box, Wallet Adapter will give you the UI I have shown you in the beginning! It's aaaaalmost a drag and drop component.

Why almost? Because you still need to provide the list of wallets you want to support and there are tons! -> https://github.com/solana-labs/wallet-adapter#wallets

Of course, it covers all the use cases for you, connection, disconnection, autoconnection etc.

If you don't like the UI, you can always come up with your own UI while taking advantage of the supported wallets -> By using the core https://github.com/solana-labs/wallet-adapter#core

Allergic to React? No Problemo! There are community implementations for Vue, Angular and Svelte. ->  https://github.com/solana-labs/wallet-adapter#community

Share article