Creating a Custom Solana Connect Wallet UI with React and Chakra UI

1. wallet-adapter

   1 12 1,744 6.1 TypeScript

   Modular TypeScript wallet adapters and components for Solana applications.

   

   If you have worked with the Solana Wallet Adapter before, you will know that it is very easy to set up a Connect Wallet button with a decent modal.

2. Nutrient

   nutrient.io featured

   Nutrient - The #1 PDF SDK Library. Bad PDFs = bad UX. Slow load times, broken annotations, clunky UX frustrates users. Nutrient’s PDF SDKs gives seamless document experiences, fast rendering, annotations, real-time collaboration, 100+ features. Used by 10K+ devs, serving ~half a billion users worldwide. Explore the SDK for free.

   

3. Next.js

   2 2,279 130,160 10.0 JavaScript

   The React Framework

   

   Let us start by creating a new Next.js project -

4. wallet-standard

   3 2 102 7.2 TypeScript

   Solana extensions to the Wallet Standard.

   

   I have Backpack, Glow, Phantom, and Solflare installed so it shows up with a readyState of Installed. Note that Backpack, Glow and Phantom implement the Solana Wallet Adapter Standard and hence show up with StandardWalletAdapter for the adapter field. As I don't have Math Wallet, the readyState for Math Wallet is NotDetected.

5. solana-react-wallet-adapter-custom-ui-example

   4 1 3 0.0 TypeScript

   Connect Wallet Component example using `@solana/wallet-adapter-react`

   

   Check out the GitHub Repository if you want to take a look at the final code for this guide. You can also check out the deployed version - https://solana-react-wallet-adapter-custom-ui-example.vercel.app/

6. chakra-ui

   5 355 38,711 9.9 TypeScript

   Chakra UI is a component system for building products with speed ⚡️

   

   For this guide, I am going to be using Chakra UI for styling. To install the required dependencies for Chakra UI, run the following command -

7. CodeRabbit

   coderabbit.ai featured

   CodeRabbit: AI Code Reviews for Developers. Revolutionize your code reviews with AI. CodeRabbit offers PR summaries, code walkthroughs, 1-click suggestions, and AST-based analysis. Boost productivity and code quality across all major languages with each PR.

   

Suggest a related project