Bark Power Tools

The Barking Game - Bark Power Tools

This project allows users to interact with The Barking Game on the Hedera network, enabling actions like fetching bark power, viewing top token holders, and checking leaderboard positions. The project is built with HTML, JavaScript, and CSS, and includes frontend components and backend API calls for enhanced community engagement.

Features

• User Barking Stats: Check barking power for individual users via Twitter handle or Hedera account ID.
• Leaderboard Display: View top holders of $HBARK and LP tokens.
• DeFi Module: Fetch and display DeFi pool data.
• Barks Remaining Leaderboard: Show remaining barks for users.
• Error Handling: Provides user-friendly messages and logs errors for debugging.

Getting Started

1. Download the project and include all files in the same directory structure.
2. Run Locally by opening the index.html file in your browser.
3. Install Dependencies (if modifying JavaScript or CSS):
   • Ensure you have a compatible environment for web development.
   • Edit JavaScript in javascripts/barkingTools.js and CSS in stylesheets/barkingTools.css.

HTML Layout

The HTML file is structured into sections to display barking stats, token holder leaderboards, and DeFi information.

Key Elements:

• Input for User Stats: An input box and button to search for barking power by Twitter handle or Hedera ID.
• Error Message Display: Renders errors when data is unavailable.
• Progress Bar: Displays usage of barking power for each user.
• Leaderboards: Separate tables for $HBARK and LP token holders.
• DeFi Data: Button and div to display DeFi pool and $HBARK price.

API Endpoints

The following endpoints provide data for The Barking Game:

• Mirror Node API: https://mainnet-public.mirrornode.hedera.com
• Backend API: Custom endpoints hosted on Koyeb for barking power and leaderboard data.

JavaScript Classes and Key Functions

• BarkUtils: Provides utility functions for data validation, including sanitizeInput and isAccountId.
• BarkApi: Manages API calls for user balances, barking power, and leaderboard data. Key methods:
  • fetchBalance(accountId)
  • fetchBarkingPower(accountId)
  • fetchAllTokenBalances(minBalance)
  • fetchTopHoldersForToken(tokenId, minBalance, topLimit)
• BarkView: Updates the UI with data like leaderboard positions, barking power, and error messages.
  • displayTopHolders(holders)
  • displayBarkPowerData(barkPowerData, accountLabel, userData, hbarkBalance, accountId)
• BarkManager: Coordinates user interactions and handles inputs from Twitter or Hedera.
  • checkBarkPower()
  • fetchAndDisplayTopHolders()
  • fetchAndDisplayTopLPHolders()

Usage

The HTML structure provides interaction buttons, input fields, and display areas for each feature:

<!-- User Barking Stats -->
<h2>User Barking Stats</h2>
<input type="text" id="twitterHandle" placeholder="Enter Twitter Handle or Hedera Account ID" />
<button id="checkBarkPower">🐶 Search 🐶</button>

<!-- Error Display -->
<div id="error" class="error"></div>

<!-- Progress Bar for Bark Power Usage -->
<div id="progressContainer" class="progress-container">
    <h3>Bark Power Usage:</h3>
    <div class="progress-bar-background">
        <div id="progressBar" class="progress-bar">0%</div>
    </div>
</div>

<!-- Top $hbark Holders -->
<h2>Top $hbark Holders</h2>
<button id="fetchTopHoldersButton">Fetch Top $hbark Holders</button>
<table id="topHoldersTable">
    <thead><tr><th>Rank</th><th>Account ID</th><th>Balance</th></tr></thead>
    <tbody id="topHoldersTableBody"></tbody>
</table>