Fixes
This commit is contained in:
Finn
parent
202ebb3017
commit
106b74b18d
|
|
@ -16,6 +16,7 @@ interface SelectProps<T extends Values> {
|
|||
icon?: ReactNode
|
||||
placeholder?: string
|
||||
disabled?: boolean
|
||||
renderValue?: (value: T | string) => ReactNode
|
||||
}
|
||||
|
||||
const Select = <T extends Values>({
|
||||
|
|
@ -28,6 +29,7 @@ const Select = <T extends Values>({
|
|||
icon,
|
||||
placeholder = 'Select',
|
||||
disabled = false,
|
||||
renderValue,
|
||||
}: SelectProps<T>) => {
|
||||
return (
|
||||
<div className={`relative ${className}`}>
|
||||
|
|
@ -43,7 +45,11 @@ const Select = <T extends Values>({
|
|||
<div className="flex items-center">
|
||||
{icon ? icon : null}
|
||||
{value ? (
|
||||
value
|
||||
renderValue ? (
|
||||
renderValue(value)
|
||||
) : (
|
||||
value
|
||||
)
|
||||
) : (
|
||||
<span className="text-th-fgd-3">{placeholder}</span>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -16,23 +16,32 @@ export const Table = ({
|
|||
export const TrHead = ({
|
||||
children,
|
||||
className,
|
||||
style,
|
||||
}: {
|
||||
children: ReactNode
|
||||
className?: string
|
||||
}) => <tr className={`border-b border-th-bkg-3 ${className}`}>{children}</tr>
|
||||
style?: object
|
||||
}) => (
|
||||
<tr style={style} className={`border-b border-th-bkg-3 ${className}`}>
|
||||
{children}
|
||||
</tr>
|
||||
)
|
||||
|
||||
export const Th = ({
|
||||
style,
|
||||
children,
|
||||
className,
|
||||
id,
|
||||
xBorder = false,
|
||||
}: {
|
||||
style?: object
|
||||
children?: ReactNode
|
||||
className?: string
|
||||
id?: string
|
||||
xBorder?: boolean
|
||||
}) => (
|
||||
<th
|
||||
style={style}
|
||||
className={`whitespace-nowrap px-2 py-3 text-xs font-normal text-th-fgd-3 first:pl-6 last:pr-6 xl:px-4 ${
|
||||
xBorder ? 'border-x border-th-bkg-3' : ''
|
||||
} ${className}`}
|
||||
|
|
|
|||
|
|
@ -951,7 +951,7 @@ export const DashboardNavbar = () => {
|
|||
const { asPath } = useRouter()
|
||||
|
||||
return (
|
||||
<div className="mb-2 flex border border-th-bkg-3">
|
||||
<div className="mb-2 flex border-b border-th-bkg-3">
|
||||
<div>
|
||||
<Link href={'/dashboard'} shallow={true}>
|
||||
<h4
|
||||
|
|
|
|||
|
|
@ -57,8 +57,12 @@ const RiskDashboard: NextPage = () => {
|
|||
'avg_price_impact' | 'p90' | 'p95'
|
||||
>('avg_price_impact')
|
||||
const [currentSearch, setCurrentSearch] = useState('')
|
||||
|
||||
const filters = ['avg_price_impact', 'p90', 'p95']
|
||||
const filterLabels = {
|
||||
avg_price_impact: 'Average Price Impact',
|
||||
p90: '90th Percentile',
|
||||
p95: '95th Percentile',
|
||||
}
|
||||
|
||||
const heads = group
|
||||
? [
|
||||
|
|
@ -151,7 +155,7 @@ const RiskDashboard: NextPage = () => {
|
|||
)
|
||||
|
||||
return (
|
||||
<div className="col-span-12 lg:col-span-8 lg:col-start-3">
|
||||
<div className="col-span-12 w-full lg:col-span-8 lg:col-start-3">
|
||||
<DashboardNavbar />
|
||||
{group ? (
|
||||
<div className="mt-4">
|
||||
|
|
@ -162,180 +166,271 @@ const RiskDashboard: NextPage = () => {
|
|||
value={currentFilter}
|
||||
onChange={(filter) => setCurrentFilter(filter)}
|
||||
className="w-full"
|
||||
renderValue={(selected) =>
|
||||
filterLabels[selected as keyof typeof filterLabels]
|
||||
}
|
||||
>
|
||||
{filters.map((filter) => (
|
||||
<Select.Option key={filter} value={filter}>
|
||||
<div className="flex w-full items-center justify-between">
|
||||
{filter}
|
||||
</div>
|
||||
</Select.Option>
|
||||
))}
|
||||
{filters.map((filter) => {
|
||||
return (
|
||||
<Select.Option key={filter} value={filter}>
|
||||
<div className="flex w-full items-center justify-between">
|
||||
{filterLabels[filter as keyof typeof filterLabels]}
|
||||
</div>
|
||||
</Select.Option>
|
||||
)
|
||||
})}
|
||||
</Select>
|
||||
<Input
|
||||
suffix="Token"
|
||||
type="text"
|
||||
heightClass={'h-10'}
|
||||
value={currentSearch}
|
||||
onChange={(e) => setCurrentSearch(e.target.value)}
|
||||
></Input>
|
||||
</p>
|
||||
</div>
|
||||
<Table>
|
||||
<thead>
|
||||
<TrHead className="sticky top-0 border bg-th-bkg-1">
|
||||
{heads.map((x) => (
|
||||
<Th key={x} xBorder className="text-left">
|
||||
{x}
|
||||
</Th>
|
||||
))}
|
||||
</TrHead>
|
||||
</thead>
|
||||
<tbody>
|
||||
{transformedPis?.map((row, idx: number) => {
|
||||
const banks = group?.banksMapByName?.get(
|
||||
apiNameToBankName(row.symbol),
|
||||
)
|
||||
const bank = banks && banks[0]
|
||||
<div className="w-full overflow-scroll" style={{ maxHeight: '70vh' }}>
|
||||
<Table className="h-full">
|
||||
<thead>
|
||||
<TrHead
|
||||
style={{ boxShadow: '1px -5px 1px #1d1924', zIndex: 19 }}
|
||||
className="sticky top-0 border-t bg-th-bkg-2"
|
||||
>
|
||||
{heads.map((x, i: number) => (
|
||||
<Th key={x} xBorder={i != 0} className={`text-left`}>
|
||||
{x}
|
||||
</Th>
|
||||
))}
|
||||
</TrHead>
|
||||
</thead>
|
||||
<tbody>
|
||||
{transformedPis?.map((row, idx: number) => {
|
||||
const banks = group?.banksMapByName?.get(
|
||||
apiNameToBankName(row.symbol),
|
||||
)
|
||||
const bank = banks && banks[0]
|
||||
|
||||
const borrowsEnabled = bank?.reduceOnly === 0
|
||||
const hasAssetWeight =
|
||||
bank &&
|
||||
(bank.initAssetWeight.toNumber() > 0 ||
|
||||
bank.maintAssetWeight.toNumber() > 0)
|
||||
const isBid = row.side === 'bid'
|
||||
const isAsk = row.side === 'ask'
|
||||
const collateralEnabled = bank?.maintAssetWeight.isPos()
|
||||
return (
|
||||
<TrBody key={idx}>
|
||||
{Object.entries(row).map(([key, val], valIdx) => {
|
||||
const visibleValue =
|
||||
typeof val === 'string' ? val : val[currentFilter]
|
||||
const isNumericValue = typeof visibleValue === 'number'
|
||||
const targetAmount =
|
||||
(key.includes('amount_') &&
|
||||
Number(key.replace('amount_', ''))) ||
|
||||
0
|
||||
const uiBorrowWeightScaleStartQuote =
|
||||
bank &&
|
||||
toUiDecimals(bank.borrowWeightScaleStartQuote, 6)
|
||||
const uiDepositWeightScaleStartQuote =
|
||||
bank &&
|
||||
toUiDecimals(bank.depositWeightScaleStartQuote, 6)
|
||||
const notionalDeposits =
|
||||
(bank && bank!.uiDeposits() * bank!.uiPrice) || 0
|
||||
const notionalBorrows =
|
||||
(bank && bank!.uiBorrows() * bank!.uiPrice) || 0
|
||||
const borrowsEnabled = bank?.reduceOnly === 0
|
||||
const hasAssetWeight =
|
||||
bank &&
|
||||
(bank.initAssetWeight.toNumber() > 0 ||
|
||||
bank.maintAssetWeight.toNumber() > 0)
|
||||
const isBid = row.side === 'bid'
|
||||
const isAsk = row.side === 'ask'
|
||||
const collateralEnabled = bank?.maintAssetWeight.isPos()
|
||||
return (
|
||||
<TrBody
|
||||
key={idx}
|
||||
className="h-10 text-xs md:hover:bg-th-bkg-2"
|
||||
>
|
||||
{Object.entries(row).map(([key, val], valIdx) => {
|
||||
const visibleValue =
|
||||
typeof val === 'string' ? val : val[currentFilter]
|
||||
const isNumericValue = typeof visibleValue === 'number'
|
||||
const targetAmount =
|
||||
(key.includes('amount_') &&
|
||||
Number(key.replace('amount_', ''))) ||
|
||||
0
|
||||
const uiBorrowWeightScaleStartQuote =
|
||||
bank &&
|
||||
toUiDecimals(bank.borrowWeightScaleStartQuote, 6)
|
||||
const uiDepositWeightScaleStartQuote =
|
||||
bank &&
|
||||
toUiDecimals(bank.depositWeightScaleStartQuote, 6)
|
||||
const notionalDeposits =
|
||||
(bank && bank!.uiDeposits() * bank!.uiPrice) || 0
|
||||
const notionalBorrows =
|
||||
(bank && bank!.uiBorrows() * bank!.uiPrice) || 0
|
||||
|
||||
const isAboveLiqFee =
|
||||
(hasAssetWeight || borrowsEnabled) &&
|
||||
isNumericValue &&
|
||||
visibleValue > bank.liquidationFee.toNumber() * 100
|
||||
const isAboveLiqFee =
|
||||
(hasAssetWeight || borrowsEnabled) &&
|
||||
isNumericValue &&
|
||||
visibleValue > bank.liquidationFee.toNumber() * 100
|
||||
|
||||
const targetAmountVsDeposits =
|
||||
isBid && targetAmount <= notionalDeposits
|
||||
const targetAmountVsBorrows =
|
||||
isAsk && targetAmount <= notionalBorrows
|
||||
const targetAmountVsDeposits =
|
||||
isBid && targetAmount <= notionalDeposits
|
||||
const targetAmountVsBorrows =
|
||||
isAsk && targetAmount <= notionalBorrows
|
||||
|
||||
const targetAmountVsAssetWeightScale =
|
||||
isBid &&
|
||||
collateralEnabled &&
|
||||
uiBorrowWeightScaleStartQuote &&
|
||||
targetAmount <= uiBorrowWeightScaleStartQuote
|
||||
const targetAmountVsAssetWeightScale =
|
||||
isBid &&
|
||||
collateralEnabled &&
|
||||
uiBorrowWeightScaleStartQuote &&
|
||||
targetAmount <= uiBorrowWeightScaleStartQuote
|
||||
|
||||
const targetAmountVsLiabWeightScale =
|
||||
isAsk &&
|
||||
collateralEnabled &&
|
||||
uiDepositWeightScaleStartQuote &&
|
||||
targetAmount <= uiDepositWeightScaleStartQuote
|
||||
const targetAmountVsLiabWeightScale =
|
||||
isAsk &&
|
||||
collateralEnabled &&
|
||||
uiDepositWeightScaleStartQuote &&
|
||||
targetAmount <= uiDepositWeightScaleStartQuote
|
||||
|
||||
return (
|
||||
<Td
|
||||
xBorder
|
||||
key={valIdx}
|
||||
className={`!p-1 ${
|
||||
isAboveLiqFee ? 'text-th-error' : ''
|
||||
}`}
|
||||
>
|
||||
<div className="flex">
|
||||
<div className="mr-2 h-full">
|
||||
{formatValue(visibleValue)}
|
||||
</div>
|
||||
{isNumericValue && (
|
||||
<div className="ml-auto flex w-4">
|
||||
{(targetAmountVsBorrows ||
|
||||
targetAmountVsDeposits) && (
|
||||
<div className="w-2 bg-[#ffff99]"></div>
|
||||
)}
|
||||
{(targetAmountVsAssetWeightScale ||
|
||||
targetAmountVsLiabWeightScale) && (
|
||||
<div className="w-2 bg-[#0066ff]"></div>
|
||||
)}
|
||||
return (
|
||||
<Td
|
||||
xBorder={valIdx != 0}
|
||||
key={valIdx}
|
||||
className={`!py-3
|
||||
${valIdx == 0 ? 'z-1 sticky left-0 bg-th-bkg-2' : ''}
|
||||
${isAboveLiqFee ? 'text-th-error' : ''}`}
|
||||
>
|
||||
<div className="flex">
|
||||
<div className="mr-2 h-full">
|
||||
{formatValue(visibleValue)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Td>
|
||||
)
|
||||
})}
|
||||
<Td xBorder>
|
||||
{isBid &&
|
||||
collateralEnabled &&
|
||||
`${
|
||||
bank &&
|
||||
formatValue(
|
||||
bank?.scaledInitAssetWeight(bank.price).toNumber(),
|
||||
)
|
||||
} / ${
|
||||
bank && formatValue(bank.maintAssetWeight.toNumber())
|
||||
}`}
|
||||
{isNumericValue && (
|
||||
<div className="ml-auto flex w-4">
|
||||
{(targetAmountVsBorrows ||
|
||||
targetAmountVsDeposits) && (
|
||||
<div className="w-2 bg-[#ffff99]"></div>
|
||||
)}
|
||||
{(targetAmountVsAssetWeightScale ||
|
||||
targetAmountVsLiabWeightScale) && (
|
||||
<div className="w-2 bg-[#0066ff]"></div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Td>
|
||||
)
|
||||
})}
|
||||
<Td xBorder>
|
||||
{isBid &&
|
||||
collateralEnabled &&
|
||||
`${
|
||||
bank &&
|
||||
formatValue(
|
||||
bank
|
||||
?.scaledInitAssetWeight(bank.price)
|
||||
.toNumber(),
|
||||
)
|
||||
} / ${
|
||||
bank &&
|
||||
formatValue(bank.maintAssetWeight.toNumber())
|
||||
}`}
|
||||
|
||||
{isAsk &&
|
||||
borrowsEnabled &&
|
||||
`${
|
||||
bank &&
|
||||
formatValue(
|
||||
bank?.scaledInitLiabWeight(bank.price).toNumber(),
|
||||
)
|
||||
} / ${
|
||||
bank && formatValue(bank.maintLiabWeight.toNumber())
|
||||
}`}
|
||||
</Td>
|
||||
<Td>
|
||||
{idx % 2 === 0 && bank
|
||||
? Object.values(LISTING_PRESETS).find((x) => {
|
||||
return x.initLiabWeight.toFixed(1) === '1.8'
|
||||
? x.initLiabWeight.toFixed(1) ===
|
||||
bank?.initLiabWeight.toNumber().toFixed(1) &&
|
||||
x.reduceOnly === bank.reduceOnly
|
||||
: x.initLiabWeight.toFixed(1) ===
|
||||
bank?.initLiabWeight.toNumber().toFixed(1)
|
||||
})?.preset_name || ''
|
||||
: ''}
|
||||
</Td>
|
||||
<Td xBorder>
|
||||
{idx % 2 === 0
|
||||
? symbolToSuggestedPresetName[row.symbol]
|
||||
{isAsk &&
|
||||
borrowsEnabled &&
|
||||
`${
|
||||
bank &&
|
||||
formatValue(
|
||||
bank?.scaledInitLiabWeight(bank.price).toNumber(),
|
||||
)
|
||||
} / ${
|
||||
bank && formatValue(bank.maintLiabWeight.toNumber())
|
||||
}`}
|
||||
</Td>
|
||||
<Td>
|
||||
{idx % 2 === 0 && bank
|
||||
? Object.values(LISTING_PRESETS).find((x) => {
|
||||
return x.initLiabWeight.toFixed(1) === '1.8'
|
||||
? x.initLiabWeight.toFixed(1) ===
|
||||
bank?.initLiabWeight
|
||||
.toNumber()
|
||||
.toFixed(1) &&
|
||||
x.reduceOnly === bank.reduceOnly
|
||||
: x.initLiabWeight.toFixed(1) ===
|
||||
bank?.initLiabWeight.toNumber().toFixed(1)
|
||||
})?.preset_name || ''
|
||||
: ''}
|
||||
</Td>
|
||||
<Td xBorder>
|
||||
{idx % 2 === 0
|
||||
? symbolToSuggestedPresetName[row.symbol]
|
||||
: 'C'
|
||||
: ''}
|
||||
</Td>
|
||||
</TrBody>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
</Table>
|
||||
<pre className="mt-6">
|
||||
{`font color: Red
|
||||
sell: liquidation fee < price impact && init or main asset weight > 0
|
||||
buy: liquidation fee < price impact && borrows enabled
|
||||
|
||||
strip color: Yellow
|
||||
sell: target amount <= notional amount of current deposit
|
||||
buy: target amount <= notional amount of current borrows
|
||||
|
||||
strip color: Blue
|
||||
sell: target amount <= ui deposit weight scale start quote && main asset weight > 0
|
||||
buy: target amount <= ui borrows weight scale start quote && main asset weight > 0
|
||||
`}
|
||||
</pre>
|
||||
? symbolToSuggestedPresetName[row.symbol]
|
||||
: 'C'
|
||||
: ''}
|
||||
</Td>
|
||||
</TrBody>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
</Table>
|
||||
</div>
|
||||
<div className="mb-10 ml-20 mr-20 mt-1">
|
||||
<span>
|
||||
<h4 className="border-th-bkg-3 px-6 py-4">Annotation Key</h4>
|
||||
</span>
|
||||
<Table className="h-full text-xs">
|
||||
<thead>
|
||||
<TrHead
|
||||
style={{ boxShadow: '1px -5px 1px #1d1924', zIndex: 19 }}
|
||||
className=" bg-th-bkg-2"
|
||||
>
|
||||
<Th xBorder className={`text-left`}>
|
||||
Annotation
|
||||
</Th>
|
||||
<Th xBorder className={`text-left`}>
|
||||
Sell
|
||||
</Th>
|
||||
<Th xBorder className={`text-left`}>
|
||||
Buy
|
||||
</Th>
|
||||
</TrHead>
|
||||
</thead>
|
||||
<tbody>
|
||||
<TrBody className="h-10">
|
||||
<Td>
|
||||
<div className="flex text-th-error">Red Text</div>
|
||||
</Td>
|
||||
<Td>
|
||||
<div className="flex">
|
||||
{`liquidation fee < price impact && init or main asset weight > 0`}
|
||||
</div>
|
||||
</Td>
|
||||
<Td>
|
||||
<div className="flex">
|
||||
{`liquidation fee < price impact && borrows enabled `}
|
||||
</div>
|
||||
</Td>
|
||||
</TrBody>
|
||||
<TrBody className="h-10">
|
||||
<Td>
|
||||
<div className="flex">
|
||||
<div className="flex">
|
||||
<div className="mr-2 h-full"></div>
|
||||
<div className="ml-auto flex items-center">
|
||||
<div className="h-5 w-2 bg-[#ffff99]"></div>{' '}
|
||||
{/* Fixed width and height */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Td>
|
||||
<Td>
|
||||
<div className="flex">
|
||||
{`target amount <= notional amount of current deposit`}
|
||||
</div>
|
||||
</Td>
|
||||
<Td>
|
||||
<div className="flex">
|
||||
{`target amount <= notional amount of current borrows `}
|
||||
</div>
|
||||
</Td>
|
||||
</TrBody>
|
||||
<TrBody className="h-10">
|
||||
<Td>
|
||||
<div className="flex">
|
||||
<div className="flex">
|
||||
<div className="mr-2 h-full"></div>
|
||||
<div className="ml-auto flex items-center">
|
||||
<div className="h-5 w-2 bg-[#0066ff]"></div>{' '}
|
||||
{/* Fixed width and height */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Td>
|
||||
<Td>
|
||||
<div className="flex">
|
||||
{`target amount <= ui deposit weight scale start quote && main asset weight > 0`}
|
||||
</div>
|
||||
</Td>
|
||||
<Td>
|
||||
<div className="flex">
|
||||
{`target amount <= ui borrows weight scale start quote && main asset weight > 0`}
|
||||
</div>
|
||||
</Td>
|
||||
</TrBody>
|
||||
</tbody>
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="mt-8 w-full text-center">
|
||||
|
|
|
|||
Loading…
Reference in New Issue