2023-05-11 14:33:07 -07:00
|
|
|
import useMangoGroup from 'hooks/useMangoGroup'
|
|
|
|
import type { NextPage } from 'next'
|
|
|
|
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
|
|
|
|
import { DashboardNavbar } from '.'
|
|
|
|
import { Table, Td, Th, TrBody, TrHead } from '@components/shared/TableElements'
|
2023-05-14 10:15:22 -07:00
|
|
|
import { useQuery } from '@tanstack/react-query'
|
2024-01-15 19:37:31 -08:00
|
|
|
import { Risk } from '@blockworks-foundation/mango-v4'
|
2023-05-14 10:15:22 -07:00
|
|
|
import { PublicKey } from '@solana/web3.js'
|
|
|
|
import { formatNumericValue } from 'utils/numbers'
|
2024-01-15 19:37:31 -08:00
|
|
|
import { MANGO_DATA_API_URL } from 'utils/constants'
|
2023-05-11 14:33:07 -07:00
|
|
|
|
|
|
|
export async function getStaticProps({ locale }: { locale: string }) {
|
|
|
|
return {
|
|
|
|
props: {
|
2023-11-28 15:10:39 -08:00
|
|
|
...(await serverSideTranslations(locale, [
|
2023-12-06 19:54:53 -08:00
|
|
|
'account',
|
2023-12-02 03:55:19 -08:00
|
|
|
'close-account',
|
2023-11-28 15:10:39 -08:00
|
|
|
'common',
|
|
|
|
'notifications',
|
|
|
|
'onboarding',
|
|
|
|
'profile',
|
|
|
|
'search',
|
|
|
|
'settings',
|
|
|
|
'token',
|
|
|
|
'trade',
|
|
|
|
])),
|
2023-05-11 14:33:07 -07:00
|
|
|
},
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2023-06-07 17:49:10 -07:00
|
|
|
type TableRow = {
|
|
|
|
val: string | number | PublicKey
|
|
|
|
highlight: boolean
|
|
|
|
}
|
|
|
|
|
2023-05-14 10:15:22 -07:00
|
|
|
type TableData = {
|
|
|
|
title: string
|
2023-06-07 17:49:10 -07:00
|
|
|
data: Array<Record<string, TableRow>>
|
2023-05-14 10:15:22 -07:00
|
|
|
}
|
|
|
|
|
2024-01-15 19:37:31 -08:00
|
|
|
type RiskData = {
|
|
|
|
timestamp: string
|
|
|
|
payload: Risk
|
|
|
|
}
|
|
|
|
|
2023-05-14 10:15:22 -07:00
|
|
|
const formatValue = (val: string | number | PublicKey) => {
|
2023-06-07 17:49:10 -07:00
|
|
|
if (val instanceof PublicKey || typeof val === 'object') {
|
2023-05-14 10:15:22 -07:00
|
|
|
return val.toString()
|
|
|
|
}
|
|
|
|
if (typeof val === 'string') {
|
|
|
|
return val
|
|
|
|
} else {
|
|
|
|
return formatNumericValue(val)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2023-05-11 14:33:07 -07:00
|
|
|
const RiskDashboard: NextPage = () => {
|
|
|
|
const { group } = useMangoGroup()
|
2023-05-14 10:15:22 -07:00
|
|
|
|
2023-06-07 17:49:10 -07:00
|
|
|
const { data } = useQuery(
|
2023-05-14 10:15:22 -07:00
|
|
|
['risks'],
|
2024-01-15 19:37:31 -08:00
|
|
|
async () => {
|
|
|
|
try {
|
|
|
|
const data = await fetch(
|
|
|
|
`${MANGO_DATA_API_URL}/user-data/risk-dashboard`,
|
|
|
|
)
|
|
|
|
const res = await data.json()
|
|
|
|
console.log(res)
|
|
|
|
return res as RiskData
|
|
|
|
} catch (e) {
|
|
|
|
console.log('Failed to load current season', e)
|
2023-05-22 07:50:44 -07:00
|
|
|
}
|
|
|
|
},
|
2023-05-14 10:15:22 -07:00
|
|
|
{
|
2023-05-22 07:29:20 -07:00
|
|
|
cacheTime: 1000 * 60 * 5,
|
|
|
|
staleTime: 1000 * 60 * 5,
|
2023-06-07 17:49:10 -07:00
|
|
|
retry: 0,
|
2023-05-22 07:29:20 -07:00
|
|
|
refetchOnWindowFocus: false,
|
2024-01-15 19:37:31 -08:00
|
|
|
enabled: true,
|
2023-07-21 11:47:53 -07:00
|
|
|
},
|
2023-05-14 10:15:22 -07:00
|
|
|
)
|
|
|
|
|
2023-05-11 14:33:07 -07:00
|
|
|
return (
|
2024-01-17 07:31:49 -08:00
|
|
|
<div className="col-span-12 lg:col-span-8 lg:col-start-3">
|
|
|
|
<DashboardNavbar />
|
|
|
|
{data?.timestamp ? <h6> As of: {data.timestamp} UTC </h6> : null}
|
|
|
|
{group && data && data.payload ? (
|
|
|
|
<div className="mt-4">
|
|
|
|
{Object.entries(data.payload).map(
|
|
|
|
([tableType, table]: [string, TableData]) => {
|
|
|
|
if (!table?.data?.length) return null
|
|
|
|
return (
|
|
|
|
<div className="mt-12" key={tableType}>
|
|
|
|
<div className="mb-4">
|
|
|
|
<p className="text-th-fgd-4">{table.title}</p>
|
|
|
|
</div>
|
|
|
|
<Table>
|
|
|
|
<thead>
|
|
|
|
<TrHead className="border">
|
|
|
|
{Object.keys(table.data[0]).map((colName: string) => {
|
|
|
|
return (
|
|
|
|
<Th xBorder className="text-left" key={colName}>
|
|
|
|
{colName}{' '}
|
|
|
|
{colName.toLowerCase().includes('fee') ||
|
|
|
|
colName.toLowerCase().includes('slippage')
|
|
|
|
? '(bps)'
|
|
|
|
: ''}
|
|
|
|
{colName.toLowerCase().includes('assets') ||
|
|
|
|
colName.toLowerCase().includes('liabs') ||
|
|
|
|
colName.toLowerCase().includes('equity') ||
|
|
|
|
colName.toLowerCase().includes('price') ||
|
|
|
|
colName.toLowerCase().includes('position')
|
|
|
|
? '($)'
|
|
|
|
: ''}
|
|
|
|
</Th>
|
|
|
|
)
|
|
|
|
})}
|
|
|
|
</TrHead>
|
|
|
|
</thead>
|
|
|
|
<tbody>
|
|
|
|
{table.data.map((rowData, index: number) => {
|
|
|
|
return (
|
|
|
|
<TrBody
|
|
|
|
className={index % 2 === 0 ? 'bg-th-bkg-2 ' : ''}
|
|
|
|
key={index}
|
|
|
|
>
|
|
|
|
{Object.values(rowData).map((val, idx: number) => {
|
|
|
|
return (
|
|
|
|
<Td
|
|
|
|
xBorder
|
|
|
|
className={`${
|
|
|
|
val?.highlight ? 'bg-th-bkg-4' : ''
|
|
|
|
}`}
|
|
|
|
key={idx}
|
|
|
|
>
|
|
|
|
{formatValue(val?.val)}
|
|
|
|
</Td>
|
|
|
|
)
|
|
|
|
})}
|
|
|
|
</TrBody>
|
|
|
|
)
|
|
|
|
})}
|
|
|
|
</tbody>
|
|
|
|
</Table>
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
},
|
2023-05-11 14:33:07 -07:00
|
|
|
)}
|
|
|
|
</div>
|
2024-01-17 07:31:49 -08:00
|
|
|
) : (
|
|
|
|
<div className="mt-8 w-full text-center">
|
|
|
|
Loading... make take up to 60 seconds
|
|
|
|
</div>
|
|
|
|
)}
|
2023-05-11 14:33:07 -07:00
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default RiskDashboard
|