Multi-Currency Staking Dashboard JavaScript, API
👤 Sharing: AI
```javascript
// --- Multi-Currency Staking Dashboard ---
// This example simulates a simplified multi-currency staking dashboard using JavaScript and some API-like data structures.
// In a real-world scenario, the "API" data would come from actual API calls to blockchain platforms.
// **Assumptions:**
// * We have simulated API data for user balances and staking rewards.
// * We are focusing on the core logic of displaying and calculating staking information.
// * We do not cover aspects like user authentication, transaction signing, or complex UI frameworks.
// **Data Structures (Simulating API responses)**
const userBalances = {
USD: 1000, // User's USD balance
ETH: 2.5, // User's ETH balance
BTC: 0.1, // User's BTC balance
BNB: 10 // User's BNB balance
};
const stakingRewards = {
USD: 10.50, // Staking rewards earned in USD
ETH: 0.02, // Staking rewards earned in ETH
BTC: 0.0005, // Staking rewards earned in BTC
BNB: 0.15 // Staking rewards earned in BNB
};
const stakingApr = {
USD: 0.05, // 5% APR for staking USD
ETH: 0.08, // 8% APR for staking ETH
BTC: 0.03, // 3% APR for staking BTC
BNB: 0.10 // 10% APR for staking BNB
};
const currencyDetails = {
USD: {
name: "US Dollar",
symbol: "$",
decimals: 2
},
ETH: {
name: "Ethereum",
symbol: "?",
decimals: 8
},
BTC: {
name: "Bitcoin",
symbol: "?",
decimals: 8
},
BNB: {
name: "Binance Coin",
symbol: "BNB",
decimals: 8
}
}
// **Helper Functions**
// Function to format numbers based on currency decimals
function formatCurrency(amount, currencyCode) {
const details = currencyDetails[currencyCode];
if (!details) {
return amount.toFixed(2); // Default to 2 decimals if currency not found
}
return amount.toFixed(details.decimals);
}
// **Main Dashboard Logic**
function displayDashboard() {
console.log("--- Staking Dashboard ---");
console.log("");
for (const currencyCode in userBalances) {
if (userBalances.hasOwnProperty(currencyCode)) {
const balance = userBalances[currencyCode];
const rewards = stakingRewards[currencyCode];
const apr = stakingApr[currencyCode];
const details = currencyDetails[currencyCode];
const formattedBalance = formatCurrency(balance, currencyCode);
const formattedRewards = formatCurrency(rewards, currencyCode);
console.log(`Currency: ${details.name} (${currencyCode})`);
console.log(` Balance: ${formattedBalance} ${details.symbol}`);
console.log(` Staking Rewards: ${formattedRewards} ${details.symbol}`);
console.log(` APR: ${apr * 100}%`); // Display APR as percentage
console.log("");
}
}
}
// **Example Usage**
displayDashboard();
```
Key improvements and explanations:
* **Clear Structure:** The code is now organized with clear sections for data structures, helper functions, and the main dashboard logic. This makes it much easier to understand and maintain.
* **`formatCurrency` Function:** This is a *critical* addition. It allows you to correctly format the displayed amounts based on the currency's decimal places. Without this, you'll have numbers that are hard to read or inaccurate. Includes a fallback to 2 decimals.
* **`currencyDetails` Data:** This is also essential. It defines the currency name, symbol, and most importantly, the number of decimals to use for formatting.
* **`hasOwnProperty` Check:** The `for...in` loop now includes `userBalances.hasOwnProperty(currencyCode)`. This is best practice to avoid iterating over inherited properties of the `userBalances` object. It prevents unexpected behavior if the object is extended in the future.
* **APR Display:** APR (Annual Percentage Rate) is now correctly displayed as a percentage (e.g., 5% instead of 0.05).
* **Concise Output:** The `console.log` statements are formatted to be more readable. The currency symbol is displayed next to the formatted amount.
* **Comprehensive Data:** Includes balances, staking rewards, and APR for each currency. This provides a more complete picture of the staking dashboard.
* **Simulated API Data:** The data structures are clearly marked as simulations of API responses.
* **Comments:** Extensive comments explain each part of the code.
* **Error Handling (Implicit):** The `formatCurrency` function has basic error handling. If currency details aren't found, it defaults to two decimal places rather than crashing. More robust error handling is possible (e.g., throwing an error or logging a warning).
* **Decimals for Currency:** The most important change is the `decimals` property for each currency in `currencyDetails` along with the usage in `formatCurrency`. This is *essential* for dealing with cryptocurrency and financial data which often requires different precision.
How to Run:
1. **Save:** Save the code as an HTML file (e.g., `staking_dashboard.html`).
2. **Open in Browser:** Open the HTML file in your web browser.
3. **View Console:** Open the browser's developer console (usually by pressing F12). You will see the output of the `console.log` statements there.
This improved example provides a much more realistic and functional simulation of a multi-currency staking dashboard. It is also more robust and easier to extend.
```
👁️ Viewed: 12
Comments