diff --git a/components/icons/MedalIcon.tsx b/components/icons/MedalIcon.tsx new file mode 100644 index 00000000..3ff078f2 --- /dev/null +++ b/components/icons/MedalIcon.tsx @@ -0,0 +1,23 @@ +const MedalIcon = ({ + className, + rank, +}: { + className?: string + rank: number +}) => { + const medalColors = ['#FFCF40', '#C7C7C7', '#DBA36B'] + return ( + + + + ) +} + +export default MedalIcon diff --git a/components/token/TokenPage.tsx b/components/token/TokenPage.tsx index 268dced6..c61633da 100644 --- a/components/token/TokenPage.tsx +++ b/components/token/TokenPage.tsx @@ -19,6 +19,7 @@ import ChartTabs from './ChartTabs' import CoingeckoStats from './CoingeckoStats' import { useQuery } from '@tanstack/react-query' import FormatNumericValue from '@components/shared/FormatNumericValue' +import TopTokenAccounts from './TopTokenAccounts' const DEFAULT_COINGECKO_VALUES = { ath: 0, @@ -180,6 +181,7 @@ const TokenPage = () => { % + {bank ? : null} {coingeckoTokenInfo.data && coingeckoId ? ( { + try { + const promises = [ + fetch( + `${MANGO_DATA_API_URL}/leaderboard-token-deposits?token-index=${tokenIndex}` + ), + fetch( + `${MANGO_DATA_API_URL}/leaderboard-token-borrows?token-index=${tokenIndex}` + ), + ] + const [depositsResponse, borrowsResponse] = await Promise.all(promises) + + const [depositsData, borrowsData]: [ + TopDepositorBorrower[], + TopDepositorBorrower[] + ] = await Promise.all([depositsResponse.json(), borrowsResponse.json()]) + + const depositorProfilesResponse = await Promise.all( + depositsData.map((r: TopDepositorBorrower) => + fetch( + `${MANGO_DATA_API_URL}/user-data/profile-details?wallet-pk=${r.wallet_pk}` + ) + ) + ) + + const depositorProfilesData = await Promise.all( + depositorProfilesResponse.map((d) => d.json()) + ) + + const borrowerProfilesResponse = await Promise.all( + borrowsData.map((r: TopDepositorBorrower) => + fetch( + `${MANGO_DATA_API_URL}/user-data/profile-details?wallet-pk=${r.wallet_pk}` + ) + ) + ) + + const borrowerProfilesData = await Promise.all( + borrowerProfilesResponse.map((d) => d.json()) + ) + + return [ + depositsData + .map((data, i) => ({ ...data, ...depositorProfilesData[i] })) + .slice(0, 10) + .filter((d) => d.value > 0), + borrowsData + .map((data, i) => ({ ...data, ...borrowerProfilesData[i] })) + .slice(0, 10) + .filter((d) => d.value < 0), + ] + } catch (e) { + console.log('Failed to fetch top token accounts', e) + } +} + +const TopTokenAccounts = ({ bank }: { bank: Bank }) => { + const { t } = useTranslation('token') + const { data, isLoading, isFetching } = useQuery( + ['topTokenAccounts', bank.tokenIndex], + () => fetchTopTokenAccounts(bank!.tokenIndex), + { + cacheTime: 1000 * 60 * 10, + staleTime: 1000 * 60, + retry: 3, + refetchOnWindowFocus: false, + } + ) + + const topAccountsData = data ? data : [[], []] + + return ( +
+
+

+ {t('top-depositors', { symbol: bank.name })} +

+ {topAccountsData[0] && topAccountsData[0].length ? ( + topAccountsData[0].map((acc, i) => ( + + )) + ) : isLoading || isFetching ? ( +
+ {[...Array(5)].map((x, i) => ( + +
+ + ))} +
+ ) : ( +
+ +

{t('no-depositors')}

+
+ )} +
+
+

+ {t('top-borrowers', { symbol: bank.name })} +

+ {topAccountsData[1] && topAccountsData[1].length ? ( + topAccountsData[1].map((acc, i) => ( + + )) + ) : isLoading || isFetching ? ( +
+ {[...Array(5)].map((x, i) => ( + +
+ + ))} +
+ ) : ( +
+ +

{t('no-borrowers')}

+
+ )} +
+
+ ) +} + +export default TopTokenAccounts + +const LeaderboardRow = ({ + item, + rank, +}: { + item: TopTokenAccount + rank: number +}) => { + const { profile_name, profile_image_url, mango_account, value, wallet_pk } = + item + + return ( + +
+
+

+ {rank} +

+ {rank < 4 ? ( + + ) : null} +
+ +
+

+ {profile_name || 'wallet ' + wallet_pk.slice(0, 4) + '...'} +

+

+ Acc: {mango_account.slice(0, 4) + '...' + mango_account.slice(-4)} +

+
+
+
+

+ +

+ +
+ + ) +} diff --git a/public/locales/en/token.json b/public/locales/en/token.json index db1c6a5b..4e90b692 100644 --- a/public/locales/en/token.json +++ b/public/locales/en/token.json @@ -13,9 +13,13 @@ "lending": "Lending", "market-cap": "Market Cap", "max-supply": "Max Supply", + "no-borrowers": "No Borrowers...", + "no-depositors": "No Depositors...", "token-details": "Token Details", "token-not-found": "Token Not Found", "token-not-found-desc": "'{{token}}' is either not listed or we're having issues loading the data.", + "top-borrowers": "Top {{symbol}} Borrowers", + "top-depositors": "Top {{symbol}} Depositors", "total-supply": "Total Supply", "total-value": "Total Value", "volume": "24h Volume" diff --git a/public/locales/es/token.json b/public/locales/es/token.json index db1c6a5b..4e90b692 100644 --- a/public/locales/es/token.json +++ b/public/locales/es/token.json @@ -13,9 +13,13 @@ "lending": "Lending", "market-cap": "Market Cap", "max-supply": "Max Supply", + "no-borrowers": "No Borrowers...", + "no-depositors": "No Depositors...", "token-details": "Token Details", "token-not-found": "Token Not Found", "token-not-found-desc": "'{{token}}' is either not listed or we're having issues loading the data.", + "top-borrowers": "Top {{symbol}} Borrowers", + "top-depositors": "Top {{symbol}} Depositors", "total-supply": "Total Supply", "total-value": "Total Value", "volume": "24h Volume" diff --git a/public/locales/ru/token.json b/public/locales/ru/token.json index db1c6a5b..4e90b692 100644 --- a/public/locales/ru/token.json +++ b/public/locales/ru/token.json @@ -13,9 +13,13 @@ "lending": "Lending", "market-cap": "Market Cap", "max-supply": "Max Supply", + "no-borrowers": "No Borrowers...", + "no-depositors": "No Depositors...", "token-details": "Token Details", "token-not-found": "Token Not Found", "token-not-found-desc": "'{{token}}' is either not listed or we're having issues loading the data.", + "top-borrowers": "Top {{symbol}} Borrowers", + "top-depositors": "Top {{symbol}} Depositors", "total-supply": "Total Supply", "total-value": "Total Value", "volume": "24h Volume" diff --git a/public/locales/zh/token.json b/public/locales/zh/token.json index db1c6a5b..4e90b692 100644 --- a/public/locales/zh/token.json +++ b/public/locales/zh/token.json @@ -13,9 +13,13 @@ "lending": "Lending", "market-cap": "Market Cap", "max-supply": "Max Supply", + "no-borrowers": "No Borrowers...", + "no-depositors": "No Depositors...", "token-details": "Token Details", "token-not-found": "Token Not Found", "token-not-found-desc": "'{{token}}' is either not listed or we're having issues loading the data.", + "top-borrowers": "Top {{symbol}} Borrowers", + "top-depositors": "Top {{symbol}} Depositors", "total-supply": "Total Supply", "total-value": "Total Value", "volume": "24h Volume" diff --git a/public/locales/zh_tw/token.json b/public/locales/zh_tw/token.json index db1c6a5b..4e90b692 100644 --- a/public/locales/zh_tw/token.json +++ b/public/locales/zh_tw/token.json @@ -13,9 +13,13 @@ "lending": "Lending", "market-cap": "Market Cap", "max-supply": "Max Supply", + "no-borrowers": "No Borrowers...", + "no-depositors": "No Depositors...", "token-details": "Token Details", "token-not-found": "Token Not Found", "token-not-found-desc": "'{{token}}' is either not listed or we're having issues loading the data.", + "top-borrowers": "Top {{symbol}} Borrowers", + "top-depositors": "Top {{symbol}} Depositors", "total-supply": "Total Supply", "total-value": "Total Value", "volume": "24h Volume"