/solana-wallet-integration

This project demonstrates how to integrate Solana wallets into a React app using the Solana Wallet Adapter. It's built with Next.js and includes the Solana Web3.js library and Solana Wallet Adapter React UI library. The app allows users to send transactions to the Solana network and provides a simple UI for wallet management.

Primary LanguageTypeScriptMozilla Public License 2.0MPL-2.0

Solana Wallet Integration

This is a sample project demonstrating how to integrate Solana wallets into a React app using the Solana Wallet Adapter.

Tech Stack

  • React
  • Next.js
  • Solana Wallet Adapter
  • Solana Web3.js library
  • Solana Wallet Adapter React UI library

    • Getting Started

    To get started, you'll need to have Node.js and npm installed. You can download them from the official website.

    1. Clone the repository:
    $ git clone https://github.com/codescalper/solana-wallet-integration.git
    1. Change into the project directory:
    $ cd solana-wallet-integration
    1. Install dependencies:
    $ npm install

    After the installation is complete, you can start the development server by running: 

    $ npm run dev

    This will start the development server at http://localhost:3000. You can access the app by visiting this URL in your web browser.

    Packages Used

    • @solana/web3.js
    • @solana/wallet-adapter-backpack
    • @solana/wallet-adapter-base
    • @solana/wallet-adapter-react
    • @solana/wallet-adapter-react-ui
    • @solana/wallet-adapter-wallets
    • next
    • react
    • react-dom

    Working of the Project

    This project demonstrates how to integrate Solana wallets into a React app using the Solana Wallet Adapter. The app is built with Next.js, a popular React-based framework for building server-side rendered (SSR) web applications.

    The project contains the following components:

    • index.tsx: The main app component that renders the AppBar and PingButton components.
    • _app.tsx: The custom Next.js App component that initializes the Solana Wallet Adapter and sets up the connection to the Solana network.
    • AppBar.tsx:The component that renders the application header, including the Solana logo, the app title, and the WalletMultiButton component provided by the Solana Wallet Adapter React UI library.
    • PingButton.tsx: The component that contains the logic for sending a "ping" transaction to the Solana network using the user's selected wallet.
    • WalletContextProvider.tsx: The component that sets up the connection to the Solana network and initializes the available wallets for the Wallet Provider component.

    Contribution

    If you would like to contribute to this project, please fork the repository, make your changes, and create a pull request. We welcome all contributions, including bug fixes and feature enhancements.

    Issues

    If you encounter any issues while using this project, please create an issue on the GitHub repository.