Compare commits
No commits in common. "eb4ce2d2c7dcf13b1f9659ea1161b37d6b6ce090" and "a49c0e861cbaa6c82843eb07700ab1c9a5fb27a4" have entirely different histories.
eb4ce2d2c7
...
a49c0e861c
@ -1,31 +1,22 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import styles from "../styles/Leaderboard.module.css";
|
||||
import {
|
||||
TopEarnersResponse,
|
||||
TopRaidersResponse,
|
||||
PlayerResponse,
|
||||
} from "../types/leaderboard";
|
||||
import { formatUnits } from "viem";
|
||||
import { useEffect, useState } from 'react'
|
||||
import styles from '../styles/Leaderboard.module.css'
|
||||
import { TopEarnersResponse, TopRaidersResponse } from '../types/leaderboard'
|
||||
import { formatUnits } from 'viem'
|
||||
|
||||
const SUBGRAPH_URL =
|
||||
"https://api.studio.thegraph.com/query/75782/slay-the-moloch-base-mainnet/version/latest";
|
||||
const SUBGRAPH_URL = 'https://api.studio.thegraph.com/query/75782/slay-the-moloch-base-sepolia/version/latest'
|
||||
|
||||
const Leaderboard = () => {
|
||||
const [topEarners, setTopEarners] = useState<TopEarnersResponse>();
|
||||
const [topRaiders, setTopRaiders] = useState<TopRaidersResponse>();
|
||||
const [activeTab, setActiveTab] = useState<
|
||||
"earners" | "raiders" | "bosses" | "prestige"
|
||||
>("earners");
|
||||
const [bossesDefeated, setBossesDefeated] = useState<PlayerResponse>();
|
||||
const [playerPrestige, setPlayerPrestige] = useState<PlayerResponse>();
|
||||
const [topEarners, setTopEarners] = useState<TopEarnersResponse>()
|
||||
const [topRaiders, setTopRaiders] = useState<TopRaidersResponse>()
|
||||
const [activeTab, setActiveTab] = useState<'earners' | 'raiders'>('earners')
|
||||
|
||||
useEffect(() => {
|
||||
const fetchLeaderboards = async () => {
|
||||
try {
|
||||
// Fetch top earners
|
||||
const earnersResponse = await fetch(SUBGRAPH_URL, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
query: `{
|
||||
armies(first: 10, orderBy: profitPerSecond, orderDirection: desc) {
|
||||
@ -41,16 +32,16 @@ const Leaderboard = () => {
|
||||
anointedLevel
|
||||
championLevel
|
||||
}
|
||||
}`,
|
||||
}),
|
||||
});
|
||||
const earnersData = await earnersResponse.json();
|
||||
setTopEarners({ armies: earnersData.data.armies });
|
||||
}`
|
||||
})
|
||||
})
|
||||
const earnersData = await earnersResponse.json()
|
||||
setTopEarners({ armies: earnersData.data.armies })
|
||||
|
||||
// Fetch top raiders
|
||||
const raidersResponse = await fetch(SUBGRAPH_URL, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
query: `{
|
||||
players(first: 10, orderBy: numberOfRaids, orderDirection: desc) {
|
||||
@ -59,52 +50,20 @@ const Leaderboard = () => {
|
||||
totalMinted
|
||||
currentBalance
|
||||
}
|
||||
}`,
|
||||
}),
|
||||
});
|
||||
const raidersData = await raidersResponse.json();
|
||||
setTopRaiders({ players: raidersData.data.players });
|
||||
|
||||
// Fetch bosses defeated
|
||||
const bossesDefeatedResponse = await fetch(SUBGRAPH_URL, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
query: `{
|
||||
players(first: 10, orderBy: bossesDefeated, orderDirection: desc) {
|
||||
id
|
||||
bossesDefeated
|
||||
}
|
||||
}`,
|
||||
}),
|
||||
});
|
||||
const bossesDefeatedData = await bossesDefeatedResponse.json();
|
||||
setBossesDefeated({ players: bossesDefeatedData.data.players });
|
||||
|
||||
// Fetch player prestige
|
||||
const playerPrestigeResponse = await fetch(SUBGRAPH_URL, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
query: `{
|
||||
players(first: 10, orderBy: prestigeLevel, orderDirection: desc) {
|
||||
id
|
||||
prestigeLevel
|
||||
}
|
||||
}`,
|
||||
}),
|
||||
});
|
||||
const playerPrestigeData = await playerPrestigeResponse.json();
|
||||
setPlayerPrestige({ players: playerPrestigeData.data.players });
|
||||
}`
|
||||
})
|
||||
})
|
||||
const raidersData = await raidersResponse.json()
|
||||
setTopRaiders({ players: raidersData.data.players })
|
||||
} catch (error) {
|
||||
console.error("Error fetching leaderboard:", error);
|
||||
console.error('Error fetching leaderboard:', error)
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
fetchLeaderboards();
|
||||
const interval = setInterval(fetchLeaderboards, 30000); // Refresh every 30 seconds
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
fetchLeaderboards()
|
||||
const interval = setInterval(fetchLeaderboards, 30000) // Refresh every 30 seconds
|
||||
return () => clearInterval(interval)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className={styles.leaderboard}>
|
||||
@ -112,106 +71,44 @@ const Leaderboard = () => {
|
||||
|
||||
<div className={styles.tabs}>
|
||||
<button
|
||||
className={`${styles.tab} ${
|
||||
activeTab === "earners" ? styles.active : ""
|
||||
}`}
|
||||
onClick={() => setActiveTab("earners")}
|
||||
className={`${styles.tab} ${activeTab === 'earners' ? styles.active : ''}`}
|
||||
onClick={() => setActiveTab('earners')}
|
||||
>
|
||||
Top Earners
|
||||
</button>
|
||||
<button
|
||||
className={`${styles.tab} ${
|
||||
activeTab === "raiders" ? styles.active : ""
|
||||
}`}
|
||||
onClick={() => setActiveTab("raiders")}
|
||||
className={`${styles.tab} ${activeTab === 'raiders' ? styles.active : ''}`}
|
||||
onClick={() => setActiveTab('raiders')}
|
||||
>
|
||||
Top Raiders
|
||||
</button>
|
||||
<button
|
||||
className={`${styles.tab} ${
|
||||
activeTab === "bosses" ? styles.active : ""
|
||||
}`}
|
||||
onClick={() => setActiveTab("bosses")}
|
||||
>
|
||||
Top Boss Slayers
|
||||
</button>
|
||||
<button
|
||||
className={`${styles.tab} ${
|
||||
activeTab === "prestige" ? styles.active : ""
|
||||
}`}
|
||||
onClick={() => setActiveTab("prestige")}
|
||||
>
|
||||
Top Players by Prestige
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{activeTab === "earners" && (
|
||||
{activeTab === 'earners' && (
|
||||
<div className={styles.list}>
|
||||
{topEarners?.armies.map((army, index) => (
|
||||
<div key={army.player.id} className={styles.item}>
|
||||
<span className={styles.rank}>#{index + 1}</span>
|
||||
<span className={styles.address}>
|
||||
{army.player.id.slice(0, 6)}...
|
||||
{army.player.id.slice(-4)}
|
||||
</span>
|
||||
<span className={styles.stat}>
|
||||
{formatUnits(BigInt(army.profitPerSecond), 4)}{" "}
|
||||
GELD/s
|
||||
</span>
|
||||
<span className={styles.address}>{army.player.id.slice(0, 6)}...{army.player.id.slice(-4)}</span>
|
||||
<span className={styles.stat}>{formatUnits(BigInt(army.profitPerSecond), 4)} GELD/s</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === "raiders" && (
|
||||
{activeTab === 'raiders' && (
|
||||
<div className={styles.list}>
|
||||
{topRaiders?.players.map((player, index) => (
|
||||
<div key={player.id} className={styles.item}>
|
||||
<span className={styles.rank}>#{index + 1}</span>
|
||||
<span className={styles.address}>
|
||||
{player.id.slice(0, 6)}...{player.id.slice(-4)}
|
||||
</span>
|
||||
<span className={styles.stat}>
|
||||
{player.numberOfRaids} raids
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === "bosses" && (
|
||||
<div className={styles.list}>
|
||||
{bossesDefeated?.players.map((player, index) => (
|
||||
<div key={player.id} className={styles.item}>
|
||||
<span className={styles.rank}>#{index + 1}</span>
|
||||
<span className={styles.address}>
|
||||
{player.id.slice(0, 6)}...{player.id.slice(-4)}
|
||||
</span>
|
||||
<span className={styles.stat}>
|
||||
{player.bossesDefeated} Bosses Slain
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === "prestige" && (
|
||||
<div className={styles.list}>
|
||||
{playerPrestige?.players.map((player, index) => (
|
||||
<div key={player.id} className={styles.item}>
|
||||
<span className={styles.rank}>#{index + 1}</span>
|
||||
<span className={styles.address}>
|
||||
{player.id.slice(0, 6)}...{player.id.slice(-4)}
|
||||
</span>
|
||||
<span className={styles.stat}>
|
||||
{player.prestigeLevel} Prestige Level
|
||||
</span>
|
||||
<span className={styles.address}>{player.id.slice(0, 6)}...{player.id.slice(-4)}</span>
|
||||
<span className={styles.stat}>{player.numberOfRaids} raids</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
export default Leaderboard;
|
||||
export default Leaderboard
|
||||
@ -1,31 +1,25 @@
|
||||
export interface Player {
|
||||
id: string;
|
||||
totalMinted: string;
|
||||
currentBalance: string;
|
||||
numberOfRaids: string;
|
||||
army?: Army;
|
||||
bossesDefeated?: string;
|
||||
prestigeLevel: string;
|
||||
id: string
|
||||
totalMinted: string
|
||||
currentBalance: string
|
||||
numberOfRaids: string
|
||||
army?: Army
|
||||
}
|
||||
|
||||
export interface Army {
|
||||
player: Player;
|
||||
profitPerSecond: string;
|
||||
projectedDailyEarnings: string;
|
||||
molochDenierLevel: string;
|
||||
apprenticeLevel: string;
|
||||
anointedLevel: string;
|
||||
championLevel: string;
|
||||
player: Player
|
||||
profitPerSecond: string
|
||||
projectedDailyEarnings: string
|
||||
molochDenierLevel: string
|
||||
apprenticeLevel: string
|
||||
anointedLevel: string
|
||||
championLevel: string
|
||||
}
|
||||
|
||||
export interface TopEarnersResponse {
|
||||
armies: Army[];
|
||||
armies: Army[]
|
||||
}
|
||||
|
||||
export interface TopRaidersResponse {
|
||||
players: Player[];
|
||||
}
|
||||
|
||||
export interface PlayerResponse {
|
||||
players: Player[];
|
||||
players: Player[]
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user