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

add market to trade history

This commit is contained in:
Tyler Shipe 2021-07-27 12:22:50 -04:00
parent e20506bd66
commit bca4899e80
4 changed files with 77 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
components/AccountsModal.tsx
View File

@ -11,7 +11,7 @@ import {
MangoAccount,
MangoCache,
MangoGroup,
ZERO_I80F48,
// ZERO_I80F48,
} from '@blockworks-foundation/mango-client'
import { abbreviateAddress } from '../utils'
import useLocalStorageState from '../hooks/useLocalStorageState'
@ -187,17 +187,17 @@ const AccountInfo = ({
}) => {
const accountEquity = mangoAccount.computeValue(mangoGroup, mangoCache)
const leverage = accountEquity.gt(ZERO_I80F48)
? mangoAccount
.getLiabsVal(mangoGroup, mangoCache)
.div(accountEquity)
.toFixed(2)
: '0.00'
// const leverage = accountEquity.gt(ZERO_I80F48)
// ? mangoAccount
// .getLiabsVal(mangoGroup, mangoCache)
// .div(accountEquity)
// .toFixed(2)
// : '0.00'
return (
<div className="text-th-fgd-3 text-xs">
${accountEquity.toFixed(2)}
<span className="px-1.5 text-th-fgd-4">|</span>
{/* <span className="px-1.5 text-th-fgd-4">|</span>
<span
className={
parseFloat(leverage) > 4
@ -208,7 +208,7 @@ const AccountInfo = ({
}
>
{leverage}x
</span>
</span> */}
</div>
)
}

40
components/MarginInfo.tsx
View File

@ -19,10 +19,10 @@ export default function MarginInfo() {
? mangoAccount.computeValue(mangoGroup, mangoCache)
: ZERO_I80F48
const leverage =
mangoAccount && equity.gt(ZERO_I80F48)
? mangoAccount.getLiabsVal(mangoGroup, mangoCache).div(equity)
: 0.0
// const leverage =
// mangoAccount && equity.gt(ZERO_I80F48)
// ? mangoAccount.getLiabsVal(mangoGroup, mangoCache).div(equity)
// : 0.0
return (
<FloatingElement showConnect>
@ -38,12 +38,12 @@ export default function MarginInfo() {
</Tooltip>
<div className="text-th-fgd-1">${equity.toFixed(2)}</div>
</div>
<div className="flex justify-between pt-2 pb-2">
{/* <div className="flex justify-between pt-2 pb-2">
<div className="font-normal text-th-fgd-3 leading-4">
Leverage
</div>
<div className="text-th-fgd-1">{leverage.toFixed(2)}x</div>
</div>
</div> */}
<div className={`flex justify-between pt-2 pb-2`}>
<div className="font-normal text-th-fgd-3 leading-4">
Total Assets Value
@ -66,7 +66,31 @@ export default function MarginInfo() {
: 0}
</div>
</div>
<div className="flex justify-between pt-2 pb-2">
{/* <div className={`flex justify-between pt-2 pb-2`}>
<div className="font-normal text-th-fgd-3 leading-4">
Maint Health
</div>
<div className={`text-th-fgd-1`}>
{mangoAccount
? mangoAccount
.getHealth(mangoGroup, mangoCache, 'Maint')
.toFixed(2)
: 0}
</div>
</div>
<div className={`flex justify-between pt-2 pb-2`}>
<div className="font-normal text-th-fgd-3 leading-4">
Init Health
</div>
<div className={`text-th-fgd-1`}>
{mangoAccount
? mangoAccount
.getHealth(mangoGroup, mangoCache, 'Init')
.toFixed(2)
: 0}
</div>
</div> */}
{/* <div className="flex justify-between pt-2 pb-2">
<Tooltip content="Must be above 0% to borrow funds">
<div className="cursor-help font-normal text-th-fgd-3 border-b border-th-fgd-3 border-dashed border-opacity-20 leading-4 default-transition hover:border-th-bkg-2 hover:text-th-fgd-3">
Init Ratio
@ -80,7 +104,7 @@ export default function MarginInfo() {
: 100.0}
%
</div>
</div>
</div> */}
</div>
<div className="border border-th-bkg-3 mt-4 p-4 rounded">
<div className="flex flex-col">

2
components/PositionsTable.tsx
View File

@ -134,6 +134,8 @@ const PositionsTable = () => {
const perpMarket = allMarkets[
marketConfig.publicKey.toString()
] as PerpMarket
console.log('perp account: ', perpAccount)
console.log('perp market: ', perpMarket)
return (
<Tr

35
components/TradeHistoryTable.tsx
View File

@ -37,10 +37,29 @@ const TradeHistoryTable = () => {
<div className="align-middle inline-block min-w-full sm:px-6 lg:px-8">
{tradeHistory && tradeHistory.length ? (
<div className="shadow overflow-hidden border-b border-th-bkg-2">
<div className="text-xs text-th-fgd-4">For selected market</div>
<Table className="min-w-full divide-y divide-th-bkg-2">
<Thead>
<Tr className="text-th-fgd-3 text-xs">
<Th
scope="col"
className={`px-6 py-3 text-left font-normal`}
>
<LinkButton
className="flex items-center no-underline"
onClick={() => requestSort('market')}
>
Market
<ArrowSmDownIcon
className={`default-transition flex-shrink-0 h-4 w-4 ml-1 ${
sortConfig?.key === 'market'
? sortConfig.direction === 'ascending'
? 'transform rotate-180'
: 'transform rotate-360'
: null
}`}
/>
</LinkButton>
</Th>
<Th scope="col" className="px-6 py-3 text-left font-normal">
<LinkButton
className="flex items-center no-underline"
@ -170,6 +189,20 @@ const TradeHistoryTable = () => {
${index % 2 === 0 ? `bg-th-bkg-3` : `bg-th-bkg-2`}
`}
>
<Td className="px-6 py-4 whitespace-nowrap text-sm text-th-fgd-1">
<div className="flex items-center">
<img
alt=""
width="20"
height="20"
src={`/assets/icons/${trade.marketName
.split(/-|\//)[0]
.toLowerCase()}.svg`}
className={`mr-2.5`}
/>
<div>{trade.marketName}</div>
</div>
</Td>
<Td className="px-6 py-4 whitespace-nowrap text-sm text-th-fgd-1">
<SideBadge side={trade.side} />
</Td>