Quick Programming
Published in

Quick Programming

Creating a “Connect with Solana” Button

The foundation of any dApp on Solana!

Solana has roughly the same workflow as any other blockchain. And the first thing you’d have to add to any dApp is a way to connect your Solana wallet to the webpage.

In my case, I will use a Chrome browser extension wallet called Phantom, but most extension wallets should work in the same way, like with MetaMask and other web3 Ethereum wallets.

Basic Setup

Because of how Phantom works, we do not need to add any libraries to simply connect to a wallet and get the public address from a user. If you want to interact more with the blockchain you’d have to install other libraries such as Solana/Web3. But that’s beyond the scope of this article.

Phantom, Like MetaMask, injects an object into the window of our browser. You need to host the page on a web server for this to work. I suggest HTTP-server since it only requires you to run a command once. You can also use Node if you’re planning on building more upon this. Just remember that this code is going in the frontend.

As you can see, this is a very simple HTML page with a script we call when we click on the button.

Since Phantom injects the solana object into the window , we can simply call it by calling only solana . We call .connect() and add a .then() to get the output of the connection function. In this case, it’s the wallet object from which we can get the PublicKey.

The PublicKey is a BigNumber, so we have to parse it to a string for it to be readable.

When you click the button, Phantom will popup just like MetaMask would and ask you to connect to the website.

And that’s it, it is very easy to simply connect to a Solana wallet.

Conclusion

I thought that this article would be longer, but it was easier than I thought. I will slowly add more Solana-related articles while I learn new things.

Thank you so much for reading and have an excellent day.

Support me by supporting Medium and becoming a member. It helps me out a lot, it won’t cost you extra, and you can read as many Medium articles as you like!

Follow me on Twitter and gm.xyz to keep up with me.

Check out my latest NFT collection on Polygon.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
mbvissers.eth

I occasionally write about programming and smart contracts. Follow me on Twitter @0xmbvissers