blockworks-foundation
/
mango-v4-ui
mirror of https://github.com/blockworks-foundation/mango-v4-ui.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

add show more button

This commit is contained in:
saml33 2023-03-20 14:19:53 +11:00
parent eff36ce362
commit 253a5fbb87
13 changed files with 88 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/account/ActivityFeedTable.tsx
View File

@ -343,7 +343,7 @@ const ActivityFeedTable = ({
{activityFeed.length &&
activityFeed.length % PAGINATION_PAGE_LENGTH === 0 ? (
<div className="flex justify-center py-6">
<LinkButton onClick={handleShowMore}>Show More</LinkButton>
<LinkButton onClick={handleShowMore}>{t('show-more')}</LinkButton>
</div>
) : null}
</>

92
components/leaderboard/LeaderboardPage.tsx
View File

@ -1,7 +1,9 @@
import ButtonGroup from '@components/forms/ButtonGroup'
import { LinkButton } from '@components/shared/Button'
import SheenLoader from '@components/shared/SheenLoader'
import { useQuery } from '@tanstack/react-query'
import { useTranslation } from 'next-i18next'
import { useEffect, useState } from 'react'
import { useState } from 'react'
import { MANGO_DATA_API_URL } from 'utils/constants'
import LeaderboardTable from './LeaderboardTable'
@ -16,52 +18,61 @@ export interface LeaderboardItem {
trader_category?: string
}
const fetchLeaderboard = async (period: string) => {
try {
const leaderboardData = await fetch(
`${MANGO_DATA_API_URL}/leaderboard-pnl?over_period=${period}`
)
const leaderboardRes = await leaderboardData.json()
const profileData = await Promise.all(
leaderboardRes.map((r: LeaderboardItem) =>
fetch(
`${MANGO_DATA_API_URL}/user-data/profile-details?wallet-pk=${r.wallet_pk}`
)
)
)
const profileRes = await Promise.all(profileData.map((d) => d.json()))
return leaderboardRes
.map((r: LeaderboardItem, i: number) => ({
...r,
...profileRes[i],
}))
.slice(0, 20)
} catch (e) {
console.log('Failed to fetch leaderboard', e)
}
}
const LeaderboardPage = () => {
const { t } = useTranslation(['common', 'leaderboard'])
const [daysToShow, setDaysToShow] = useState('ALLTIME')
const [offset, setOffset] = useState(0)
const [leaderboardData, setLeaderboardData] = useState([])
const { data, isLoading, refetch, isFetching } = useQuery(
['leaderboard'],
() => fetchLeaderboard(daysToShow),
const fetchLeaderboard = async () => {
try {
const data = await fetch(
`${MANGO_DATA_API_URL}/leaderboard-pnl?over_period=${daysToShow}&offset=${offset}`
)
const leaderboardRes = await data.json()
const profileData = await Promise.all(
leaderboardRes.map((r: LeaderboardItem) =>
fetch(
`${MANGO_DATA_API_URL}/user-data/profile-details?wallet-pk=${r.wallet_pk}`
)
)
)
const profileRes = await Promise.all(profileData.map((d) => d.json()))
const combinedRes = leaderboardRes.map(
(r: LeaderboardItem, i: number) => ({
...r,
...profileRes[i],
})
)
setLeaderboardData(leaderboardData.concat(combinedRes))
return combinedRes
} catch (e) {
console.log('Failed to fetch leaderboard', e)
}
}
const { isLoading, isFetching } = useQuery(
['leaderboard', daysToShow, offset],
() => fetchLeaderboard(),
{
cacheTime: 1000 * 60 * 10,
staleTime: 1000 * 60,
retry: 3,
refetchOnWindowFocus: false,
}
)
const handleDaysToShow = (days: string) => {
setLeaderboardData([])
setOffset(0)
setDaysToShow(days)
}
useEffect(() => {
refetch()
}, [daysToShow])
const handleShowMore = () => {
setOffset(offset + 20)
}
const loading = isLoading || isFetching
return (
<div className="p-4 md:p-10 lg:px-0">
@ -84,8 +95,21 @@ const LeaderboardPage = () => {
/>
</div>
</div>
{data?.length ? (
<LeaderboardTable data={data} loading={isLoading || isFetching} />
{leaderboardData.length ? (
<LeaderboardTable data={leaderboardData} loading={loading} />
) : loading ? (
<div className="space-y-2">
{[...Array(20)].map((x, i) => (
<SheenLoader className="flex flex-1" key={i}>
<div className="h-16 w-full rounded-md bg-th-bkg-2" />
</SheenLoader>
))}
</div>
) : null}
{offset < 100 ? (
<LinkButton className="mx-auto mt-6" onClick={handleShowMore}>
{t('show-more')}
</LinkButton>
) : null}
</div>
</div>

5
components/leaderboard/LeaderboardTable.tsx
View File

@ -32,7 +32,7 @@ const LeaderboardTable = ({
<LeaderboardRow
item={d}
rank={i + 1}
key={d.mango_account}
key={d.mango_account + d.pnl}
loading={loading}
/>
))}
@ -84,7 +84,8 @@ const LeaderboardRow = ({
/>
<div className="text-left">
<p className="capitalize text-th-fgd-2 md:text-base">
{profile_name || 'wallet ' + wallet_pk.slice(0, 4) + '...'}
{profile_name ||
wallet_pk.slice(0, 4) + '...' + wallet_pk.slice(-4)}
</p>
<p className="text-xs text-th-fgd-4">
Acc: {mango_account.slice(0, 4) + '...' + mango_account.slice(-4)}

1
public/locales/en/common.json
View File

@ -121,6 +121,7 @@
"select-withdraw-token": "Select Withdraw Token",
"sell": "Sell",
"settings": "Settings",
"show-more": "Show More",
"show-zero-balances": "Show Zero Balances",
"solana-tps": "Solana TPS",
"spot": "Spot",

2
public/locales/en/leaderboard.json
View File

@ -1,3 +1,3 @@
{
"leaderboard-desc": "Top 20 Mango traders by total PnL (spot and perp)"
"leaderboard-desc": "Top 100 Mango traders by total PnL (spot and perp)"
}

6
public/locales/es/common.json
View File

@ -22,8 +22,8 @@
"asset-weight-desc": "Asset weight applies a haircut to the value of the collateral in your account health calculation. The lower the asset weight, the less the asset counts towards collateral.",
"available": "Available",
"available-balance": "Available Balance",
"bal": "Bal",
"balance": "Balance",
"bal": "Bal",
"balances": "Balances",
"borrow": "Borrow",
"borrow-amount": "Borrow Amount",
@ -87,6 +87,7 @@
"loan-origination-fee": "Loan Origination Fee",
"loan-origination-fee-tooltip": "The fee for opening a borrow. This is paid to the Mango DAO Treasury",
"mango": "Mango",
"mango-stats": "Mango Stats",
"market": "Market",
"max": "Max",
"max-borrow": "Max Borrow",
@ -98,6 +99,7 @@
"optional": "Optional",
"outstanding-balance": "Outstanding Balance",
"perp": "Perp",
"perp-markets": "Perp Markets",
"pnl": "PnL",
"price": "Price",
"quantity": "Quantity",
@ -119,9 +121,11 @@
"select-withdraw-token": "Select Withdraw Token",
"sell": "Sell",
"settings": "Settings",
"show-more": "Show More",
"show-zero-balances": "Show Zero Balances",
"solana-tps": "Solana TPS",
"spot": "Spot",
"spot-markets": "Spot Markets",
"stats": "Stats",
"swap": "Swap",
"time": "Time",

2
public/locales/es/leaderboard.json
View File

@ -1,3 +1,3 @@
{
"leaderboard-desc": "Top 20 Mango traders by total PnL (spot and perp)"
"leaderboard-desc": "Top 100 Mango traders by total PnL (spot and perp)"
}

6
public/locales/ru/common.json
View File

@ -22,8 +22,8 @@
"asset-weight-desc": "Asset weight applies a haircut to the value of the collateral in your account health calculation. The lower the asset weight, the less the asset counts towards collateral.",
"available": "Available",
"available-balance": "Available Balance",
"bal": "Bal",
"balance": "Balance",
"bal": "Bal",
"balances": "Balances",
"borrow": "Borrow",
"borrow-amount": "Borrow Amount",
@ -87,6 +87,7 @@
"loan-origination-fee": "Loan Origination Fee",
"loan-origination-fee-tooltip": "The fee for opening a borrow. This is paid to the Mango DAO Treasury",
"mango": "Mango",
"mango-stats": "Mango Stats",
"market": "Market",
"max": "Max",
"max-borrow": "Max Borrow",
@ -98,6 +99,7 @@
"optional": "Optional",
"outstanding-balance": "Outstanding Balance",
"perp": "Perp",
"perp-markets": "Perp Markets",
"pnl": "PnL",
"price": "Price",
"quantity": "Quantity",
@ -119,9 +121,11 @@
"select-withdraw-token": "Select Withdraw Token",
"sell": "Sell",
"settings": "Settings",
"show-more": "Show More",
"show-zero-balances": "Show Zero Balances",
"solana-tps": "Solana TPS",
"spot": "Spot",
"spot-markets": "Spot Markets",
"stats": "Stats",
"swap": "Swap",
"time": "Time",

2
public/locales/ru/leaderboard.json
View File

@ -1,3 +1,3 @@
{
"leaderboard-desc": "Top 20 Mango traders by total PnL (spot and perp)"
"leaderboard-desc": "Top 100 Mango traders by total PnL (spot and perp)"
}

6
public/locales/zh/common.json
View File

@ -22,8 +22,8 @@
"asset-weight-desc": "Asset weight applies a haircut to the value of the collateral in your account health calculation. The lower the asset weight, the less the asset counts towards collateral.",
"available": "Available",
"available-balance": "Available Balance",
"bal": "Bal",
"balance": "Balance",
"bal": "Bal",
"balances": "Balances",
"borrow": "Borrow",
"borrow-amount": "Borrow Amount",
@ -87,6 +87,7 @@
"loan-origination-fee": "Loan Origination Fee",
"loan-origination-fee-tooltip": "The fee for opening a borrow. This is paid to the Mango DAO Treasury",
"mango": "Mango",
"mango-stats": "Mango Stats",
"market": "Market",
"max": "Max",
"max-borrow": "Max Borrow",
@ -98,6 +99,7 @@
"optional": "Optional",
"outstanding-balance": "Outstanding Balance",
"perp": "Perp",
"perp-markets": "Perp Markets",
"pnl": "PnL",
"price": "Price",
"quantity": "Quantity",
@ -119,9 +121,11 @@
"select-withdraw-token": "Select Withdraw Token",
"sell": "Sell",
"settings": "Settings",
"show-more": "Show More",
"show-zero-balances": "Show Zero Balances",
"solana-tps": "Solana TPS",
"spot": "Spot",
"spot-markets": "Spot Markets",
"stats": "Stats",
"swap": "Swap",
"time": "Time",

2
public/locales/zh/leaderboard.json
View File

@ -1,3 +1,3 @@
{
"leaderboard-desc": "Top 20 Mango traders by total PnL (spot and perp)"
"leaderboard-desc": "Top 100 Mango traders by total PnL (spot and perp)"
}

6
public/locales/zh_tw/common.json
View File

@ -22,8 +22,8 @@
"asset-weight-desc": "Asset weight applies a haircut to the value of the collateral in your account health calculation. The lower the asset weight, the less the asset counts towards collateral.",
"available": "Available",
"available-balance": "Available Balance",
"bal": "Bal",
"balance": "Balance",
"bal": "Bal",
"balances": "Balances",
"borrow": "Borrow",
"borrow-amount": "Borrow Amount",
@ -87,6 +87,7 @@
"loan-origination-fee": "Loan Origination Fee",
"loan-origination-fee-tooltip": "The fee for opening a borrow. This is paid to the Mango DAO Treasury",
"mango": "Mango",
"mango-stats": "Mango Stats",
"market": "Market",
"max": "Max",
"max-borrow": "Max Borrow",
@ -98,6 +99,7 @@
"optional": "Optional",
"outstanding-balance": "Outstanding Balance",
"perp": "Perp",
"perp-markets": "Perp Markets",
"pnl": "PnL",
"price": "Price",
"quantity": "Quantity",
@ -119,9 +121,11 @@
"select-withdraw-token": "Select Withdraw Token",
"sell": "Sell",
"settings": "Settings",
"show-more": "Show More",
"show-zero-balances": "Show Zero Balances",
"solana-tps": "Solana TPS",
"spot": "Spot",
"spot-markets": "Spot Markets",
"stats": "Stats",
"swap": "Swap",
"time": "Time",

2
public/locales/zh_tw/leaderboard.json
View File

@ -1,3 +1,3 @@
{
"leaderboard-desc": "Top 20 Mango traders by total PnL (spot and perp)"
"leaderboard-desc": "Top 100 Mango traders by total PnL (spot and perp)"
}