{"id":20104782,"url":"https://github.com/rnddave/solana-staking-dashboard","last_synced_at":"2025-03-02T17:41:17.000Z","repository":{"id":249565969,"uuid":"831861031","full_name":"rnddave/solana-staking-dashboard","owner":"rnddave","description":"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","archived":false,"fork":false,"pushed_at":"2024-07-22T12:37:22.000Z","size":3564,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-13T04:44:21.117Z","etag":null,"topics":["build-in-public","buildinpublic","create-react-app","dashboard","react","solana","web3","web3js"],"latest_commit_sha":null,"homepage":"https://david-dickinson.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rnddave.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-07-21T20:29:31.000Z","updated_at":"2024-07-22T12:37:25.000Z","dependencies_parsed_at":"2024-07-21T22:16:29.461Z","dependency_job_id":"7e27c87a-75d5-44fc-8369-883f630eb9b3","html_url":"https://github.com/rnddave/solana-staking-dashboard","commit_stats":null,"previous_names":["rnddave/solana-staking-dashboard"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rnddave%2Fsolana-staking-dashboard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rnddave%2Fsolana-staking-dashboard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rnddave%2Fsolana-staking-dashboard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rnddave%2Fsolana-staking-dashboard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rnddave","download_url":"https://codeload.github.com/rnddave/solana-staking-dashboard/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241549032,"owners_count":19980474,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["build-in-public","buildinpublic","create-react-app","dashboard","react","solana","web3","web3js"],"created_at":"2024-11-13T17:44:48.635Z","updated_at":"2025-03-02T17:41:16.971Z","avatar_url":"https://github.com/rnddave.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Solana Staking Dashboard\n\n## Overview\n\nThe 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.\n\n## Features\n\n- **Staking Overview:** View SOL balance and staking details of a Solana wallet.\n- **Stake/Unstake:** Basic functionality to stake and unstake SOL (implementation required).\n- **Rewards Tracker:** Track staking rewards (implementation required).\n\n## Project Structure\n\n```plaintext\nsrc/\n  components/\n    StakingOverview.js\n    StakeUnstake.js\n    RewardsTracker.js\n  services/\n    solana.js\n  App.js\n  index.js\n```\n\n## Installation\n\n1. Clone the repository:\n\n   ```bash\n   git clone https://github.com/yourusername/solana-staking-dashboard.git\n   cd solana-staking-dashboard\n   ```\n\n2. Install the dependencies:\n\n   ```bash\n   npm install\n   ```\n\n3. Start the development server:\n\n   ```bash\n   npm start\n   ```\n\n## Usage\n\n1. Open your browser and navigate to `http://localhost:3000`.\n2. Enter a valid Solana wallet address to view the balance and staking information.\n\n## Components\n\n### StakingOverview\n\nDisplays the SOL balance and staking overview for a given wallet address.\n\n```javascript\n// src/components/StakingOverview.js\nimport React, { useEffect, useState } from 'react';\nimport { getBalance } from '../services/solana';\n\nconst StakingOverview = ({ walletAddress }) =\u003e {\n  const [balance, setBalance] = useState(0);\n  const [error, setError] = useState(null);\n\n  useEffect(() =\u003e {\n    const fetchBalance = async () =\u003e {\n      try {\n        const balance = await getBalance(walletAddress);\n        setBalance(balance);\n        setError(null);\n      } catch (err) {\n        setError(err.message);\n      }\n    };\n\n    if (walletAddress) {\n      fetchBalance();\n    }\n  }, [walletAddress]);\n\n  return (\n    \u003cdiv\u003e\n      \u003ch2\u003eStaking Overview\u003c/h2\u003e\n      \u003cp\u003eWallet Address: {walletAddress}\u003c/p\u003e\n      {error ? (\n        \u003cp style={{ color: 'red' }}\u003eError: {error}\u003c/p\u003e\n      ) : (\n        \u003cp\u003eBalance: {balance} SOL\u003c/p\u003e\n      )}\n      {/* Additional staking overview data */}\n    \u003c/div\u003e\n  );\n};\n\nexport default StakingOverview;\n```\n\n### StakeUnstake\n\nProvides basic UI for staking and unstaking SOL (functionality implementation required).\n\n```javascript\n// src/components/StakeUnstake.js\nimport React from 'react';\n\nconst StakeUnstake = () =\u003e {\n  const handleStake = () =\u003e {\n    // Implementation for staking SOL\n  };\n\n  const handleUnstake = () =\u003e {\n    // Implementation for unstaking SOL\n  };\n\n  return (\n    \u003cdiv\u003e\n      \u003ch2\u003eStake / Unstake\u003c/h2\u003e\n      \u003cbutton onClick={handleStake}\u003eStake\u003c/button\u003e\n      \u003cbutton onClick={handleUnstake}\u003eUnstake\u003c/button\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default StakeUnstake;\n```\n\n### RewardsTracker\n\nDisplays the staking rewards for a given wallet address (implementation required).\n\n```javascript\n// src/components/RewardsTracker.js\nimport React, { useEffect, useState } from 'react';\n\nconst RewardsTracker = ({ walletAddress }) =\u003e {\n  const [rewards, setRewards] = useState(0);\n\n  useEffect(() =\u003e {\n    const fetchRewards = async () =\u003e {\n      // Implementation for fetching staking rewards\n    };\n    fetchRewards();\n  }, [walletAddress]);\n\n  return (\n    \u003cdiv\u003e\n      \u003ch2\u003eRewards Tracker\u003c/h2\u003e\n      \u003cp\u003eTotal Rewards: {rewards} SOL\u003c/p\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default RewardsTracker;\n```\n\n## Services\n\n### solana.js\n\nHandles interactions with the Solana blockchain using the Solana Web3.js library.\n\n```javascript\n// src/services/solana.js\nimport { Connection, PublicKey } from '@solana/web3.js';\nimport bs58 from 'bs58';\n\n// Use a Solana Foundation public mainnet-beta RPC endpoint\nconst RPC_ENDPOINT = 'https://api.mainnet-beta.solana.com';\n\nconst connection = new Connection(RPC_ENDPOINT);\n\nexport const getBalance = async (walletAddress) =\u003e {\n  try {\n    // Validate base58 string\n    bs58.decode(walletAddress);\n\n    const publicKey = new PublicKey(walletAddress);\n    const balance = await connection.getBalance(publicKey);\n    return balance / 1e9; // Convert lamports to SOL\n  } catch (error) {\n    console.error('Invalid wallet address or RPC error:', error);\n    throw new Error('Invalid wallet address or RPC error');\n  }\n};\n\nexport const getStakeAccounts = async (walletAddress) =\u003e {\n  // Implementation for fetching stake accounts\n};\n```\n\n## Contributing\n\nContributions are welcome! Please open an issue or submit a pull request if you have any improvements or new features to add.\n\n## License\n\nThis project is licensed under the MIT License. See the LICENSE file for more details.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frnddave%2Fsolana-staking-dashboard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frnddave%2Fsolana-staking-dashboard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frnddave%2Fsolana-staking-dashboard/lists"}