import {
Bank,
toUiDecimals,
I80F48,
toUiDecimalsForQuote,
} from '@blockworks-foundation/mango-v4'
import ExplorerLink from '@components/shared/ExplorerLink'
import { coder } from '@project-serum/anchor/dist/cjs/spl/token'
import mangoStore from '@store/mangoStore'
import useMangoGroup from 'hooks/useMangoGroup'
import type { NextPage } from 'next'
import { ReactNode, useCallback, useEffect, useState } from 'react'
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
import useJupiterMints from 'hooks/useJupiterMints'
import Image from 'next/image'
import {
ChevronDownIcon,
QuestionMarkCircleIcon,
} from '@heroicons/react/20/solid'
import { Disclosure } from '@headlessui/react'
import MarketLogos from '@components/trade/MarketLogos'
import Button from '@components/shared/Button'
export async function getStaticProps({ locale }: { locale: string }) {
return {
props: {
...(await serverSideTranslations(locale, [
'common',
'onboarding',
'profile',
'search',
'settings',
'token',
'trade',
])),
},
}
}
const Dashboard: NextPage = () => {
const { group } = useMangoGroup()
const { mangoTokens } = useJupiterMints()
// const client = mangoStore(s => s.client)
// const handleClickScroll = (id: string) => {
// const element = document.getElementById(id)
// if (element) {
// element.scrollIntoView({ behavior: 'smooth' })
// }
// }
return (
Dashboard
{group ? (
Group
Banks
{Array.from(group.banksMapByMint)
.sort((a, b) => a[0].localeCompare(b[0]))
.map(([mintAddress, banks]) =>
banks.map((bank) => {
const mintInfo = group.mintInfosMapByMint.get(
bank.mint.toString()
)
const logoUri = mangoTokens.length
? mangoTokens.find((t) => t.address === mintAddress)
?.logoURI
: ''
return (
{({ open }) => (
<>
{logoUri ? (
) : (
)}
{bank.name} Bank
}
/>
}
/>
}
/>
}
/>
{`${(100 * bank.rate0.toNumber()).toFixed(
2
)}% @ ${(
100 * bank.util0.toNumber()
).toFixed()}% util, `}
{`${(100 * bank.rate1.toNumber()).toFixed(
2
)}% @ ${(
100 * bank.util1.toNumber()
).toFixed()}% util, `}
{`${(
100 * bank.maxRate.toNumber()
).toFixed(2)}% @ 100% util`}
}
/>
>
)}
)
})
)}
Perp Markets
{Array.from(group.perpMarketsMapByOracle).map(
([oracle, perpMarket]) => {
return (
{({ open }) => (
<>
}
/>
}
/>
}
/>
}
/>
}
/>
{/* this property will land in client soon */}
{/* */}
>
)}
)
}
)}
) : (
'Loading'
)}
)
}
const KeyValuePair = ({
label,
value,
}: {
label: string
value: number | ReactNode | string
}) => {
return (
{label}
{value}
)
}
const VaultData = ({ bank }: { bank: Bank }) => {
const [vault, setVault] = useState()
const client = mangoStore((s) => s.client)
const getVaultData = useCallback(async () => {
const res = await client.program.provider.connection.getAccountInfo(
bank.vault
)
const v = res?.data ? coder().accounts.decode('token', res.data) : undefined
setVault(v)
}, [bank.vault])
useEffect(() => {
getVaultData()
}, [getVaultData])
return (
)
}
export default Dashboard