Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/rnddave/solana-staking-dashboard

I want to build web3 projects, I'm going to attempt to build a Solana Staking Dashboard using React (front) and the Solana Web3.js library API. #buildInPublic
https://github.com/rnddave/solana-staking-dashboard

build-in-public buildinpublic create-react-app dashboard react solana web3 web3js

Last synced: about 1 month ago
JSON representation

I want to build web3 projects, I'm going to attempt to build a Solana Staking Dashboard using React (front) and the Solana Web3.js library API. #buildInPublic

Awesome Lists containing this project

README 

        
# Solana Staking Dashboard



## Overview



The Solana Staking Dashboard is a web application built with React that allows users to view their SOL balance, manage staking, and track staking rewards on the Solana blockchain. This project uses the Solana Web3.js library to interact with the Solana blockchain.



## Features



- **Staking Overview:** View SOL balance and staking details of a Solana wallet.

- **Stake/Unstake:** Basic functionality to stake and unstake SOL (implementation required).

- **Rewards Tracker:** Track staking rewards (implementation required).



## Project Structure



```plaintext

src/

  components/

    StakingOverview.js

    StakeUnstake.js

    RewardsTracker.js

  services/

    solana.js

  App.js

  index.js

```



## Installation



1. Clone the repository:



   ```bash

   git clone https://github.com/yourusername/solana-staking-dashboard.git

   cd solana-staking-dashboard

   ```



2. Install the dependencies:



   ```bash

   npm install

   ```



3. Start the development server:



   ```bash

   npm start

   ```



## Usage



1. Open your browser and navigate to `http://localhost:3000`.

2. Enter a valid Solana wallet address to view the balance and staking information.



## Components



### StakingOverview



Displays the SOL balance and staking overview for a given wallet address.



```javascript

// src/components/StakingOverview.js

import React, { useEffect, useState } from 'react';

import { getBalance } from '../services/solana';



const StakingOverview = ({ walletAddress }) => {

  const [balance, setBalance] = useState(0);

  const [error, setError] = useState(null);



  useEffect(() => {

    const fetchBalance = async () => {

      try {

        const balance = await getBalance(walletAddress);

        setBalance(balance);

        setError(null);

      } catch (err) {

        setError(err.message);

      }

    };



    if (walletAddress) {

      fetchBalance();

    }

  }, [walletAddress]);



  return (

    


      
Staking Overview


      
Wallet Address: {walletAddress}


      {error ? (

        
Error: {error}


      ) : (

        
Balance: {balance} SOL


      )}

      {/* Additional staking overview data */}

    


  );

};



export default StakingOverview;

```



### StakeUnstake



Provides basic UI for staking and unstaking SOL (functionality implementation required).



```javascript

// src/components/StakeUnstake.js

import React from 'react';



const StakeUnstake = () => {

  const handleStake = () => {

    // Implementation for staking SOL

  };



  const handleUnstake = () => {

    // Implementation for unstaking SOL

  };



  return (

    


      
Stake / Unstake


      Stake

      Unstake

    


  );

};



export default StakeUnstake;

```



### RewardsTracker



Displays the staking rewards for a given wallet address (implementation required).



```javascript

// src/components/RewardsTracker.js

import React, { useEffect, useState } from 'react';



const RewardsTracker = ({ walletAddress }) => {

  const [rewards, setRewards] = useState(0);



  useEffect(() => {

    const fetchRewards = async () => {

      // Implementation for fetching staking rewards

    };

    fetchRewards();

  }, [walletAddress]);



  return (

    


      
Rewards Tracker


      
Total Rewards: {rewards} SOL


    


  );

};



export default RewardsTracker;

```



## Services



### solana.js



Handles interactions with the Solana blockchain using the Solana Web3.js library.



```javascript

// src/services/solana.js

import { Connection, PublicKey } from '@solana/web3.js';

import bs58 from 'bs58';



// Use a Solana Foundation public mainnet-beta RPC endpoint

const RPC_ENDPOINT = 'https://api.mainnet-beta.solana.com';



const connection = new Connection(RPC_ENDPOINT);



export const getBalance = async (walletAddress) => {

  try {

    // Validate base58 string

    bs58.decode(walletAddress);



    const publicKey = new PublicKey(walletAddress);

    const balance = await connection.getBalance(publicKey);

    return balance / 1e9; // Convert lamports to SOL

  } catch (error) {

    console.error('Invalid wallet address or RPC error:', error);

    throw new Error('Invalid wallet address or RPC error');

  }

};



export const getStakeAccounts = async (walletAddress) => {

  // Implementation for fetching stake accounts

};

```



## Contributing



Contributions are welcome! Please open an issue or submit a pull request if you have any improvements or new features to add.



## License



This project is licensed under the MIT License. See the LICENSE file for more details.