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 additional spot/perp data to trade page

This commit is contained in:
saml33 2021-07-21 00:21:58 +10:00 committed by Tyler Shipe
parent ccde7a3e24
commit ce0eeffac0
8 changed files with 352 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
components/DayHighLow.tsx Normal file
View File

@ -0,0 +1,25 @@
import { StyledMarketInfoLabel } from './MarketHeader'
const DayHighLow = () => {
return (
<div className="pr-6">
<StyledMarketInfoLabel className="text-center text-th-fgd-3">
24h Range
</StyledMarketInfoLabel>
<div className="flex items-center">
<div className="pr-2 text-th-fgd-1 text-xs">$XX.XX</div>
<div className="h-1.5 flex rounded bg-th-bkg-3 w-24">
<div
style={{
width: `50%`,
}}
className="flex rounded bg-th-primary"
></div>
</div>
<div className="pl-2 text-th-fgd-1 text-xs">$XX.XX</div>
</div>
</div>
)
}
export default DayHighLow

34
components/MarginInfo.tsx
View File

@ -2,6 +2,7 @@ import { ZERO_I80F48 } from '@blockworks-foundation/mango-client'
import { HeartIcon } from '@heroicons/react/outline'
import useMangoStore from '../stores/useMangoStore'
import FloatingElement from './FloatingElement'
import { ElementTitle } from './styles'
import Tooltip from './Tooltip'
export default function MarginInfo() {
@ -24,13 +25,14 @@ export default function MarginInfo() {
return (
<FloatingElement>
<div className="flex flex-col h-full justify-between">
<ElementTitle>Account</ElementTitle>
<div>
{mangoAccount ? (
<div>
<div className={`flex justify-between pt-2 pb-2`}>
<Tooltip content="Account value">
<div
className={`cursor-help font-normal text-th-fgd-4 border-b border-th-fgd-4 border-dashed border-opacity-20 leading-4 default-transition hover:border-th-bkg-2 hover:text-th-fgd-3`}
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`}
>
Equity
</div>
@ -38,21 +40,15 @@ export default function MarginInfo() {
<div className={`text-th-fgd-1`}>${equity.toFixed(2)}</div>
</div>
<div className={`flex justify-between pt-2 pb-2`}>
<Tooltip content="Leverage">
<div
className={`cursor-help font-normal text-th-fgd-4 border-b border-th-fgd-4 border-dashed border-opacity-20 leading-4 default-transition hover:border-th-bkg-2 hover:text-th-fgd-3`}
>
Leverage
</div>
</Tooltip>
<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 className={`flex justify-between pt-2 pb-2`}>
<Tooltip content="Leverage">
<div
className={`cursor-help font-normal text-th-fgd-4 border-b border-th-fgd-4 border-dashed border-opacity-20 leading-4 default-transition hover:border-th-bkg-2 hover:text-th-fgd-3`}
>
Current Assets Value
<div className="font-normal text-th-fgd-3 leading-4">
Total Assets Value
</div>
</Tooltip>
<div className={`text-th-fgd-1`}>
@ -61,10 +57,8 @@ export default function MarginInfo() {
</div>
<div className={`flex justify-between pt-2 pb-2`}>
<Tooltip content="Leverage">
<div
className={`cursor-help font-normal text-th-fgd-4 border-b border-th-fgd-4 border-dashed border-opacity-20 leading-4 default-transition hover:border-th-bkg-2 hover:text-th-fgd-3`}
>
Current Liabilities Value
<div className="font-normal text-th-fgd-3 leading-4">
Total Liabilities Value
</div>
</Tooltip>
<div className={`text-th-fgd-1`}>
@ -74,7 +68,7 @@ export default function MarginInfo() {
<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-4 border-b border-th-fgd-4 border-dashed border-opacity-20 leading-4 default-transition hover:border-th-bkg-2 hover:text-th-fgd-3`}
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
</div>
@ -88,7 +82,7 @@ export default function MarginInfo() {
</div>
</div>
) : null}
<div className="bg-th-bkg-1 p-4 rounded">
<div className="bg-th-bkg-3 mt-4 p-4 rounded">
<div className="flex flex-col">
<div className="flex justify-between">
<div className="flex items-center">
@ -98,7 +92,7 @@ export default function MarginInfo() {
<div className="text-right">{maintHealth.toFixed(2)}%</div>
</div>
<div className="mt-4">
<div className="h-2 flex rounded bg-th-bkg-3">
<div className="h-1.5 flex rounded bg-th-fgd-4">
<div
style={{
width: `${maintHealth}%`,

57
components/MarketHeader.tsx
View File

@ -1,4 +1,5 @@
import React, { useCallback, useMemo, useState } from 'react'
import styled from '@emotion/styled'
import useMangoStore from '../stores/useMangoStore'
import usePrevious from '../hooks/usePrevious'
import useInterval from '../hooks/useInterval'
@ -6,6 +7,11 @@ import ChartApi from '../utils/chartDataConnector'
import UiLock from './UiLock'
import ManualRefresh from './ManualRefresh'
import useOraclePrice from '../hooks/useOraclePrice'
import DayHighLow from './DayHighLow'
export const StyledMarketInfoLabel = styled.div`
font-size: 0.7rem;
`
const MarketHeader = () => {
const oraclePrice = useOraclePrice()
@ -72,7 +78,7 @@ const MarketHeader = () => {
className={`flex items-end sm:items-center justify-between pt-4 px-6 md:px-6`}
>
<div className="flex flex-col sm:flex-row sm:items-center">
<div className="pb-3 sm:pb-0 w-44">
<div className="pb-3 sm:pb-0 pr-8">
<div className="flex items-center">
<img
alt=""
@ -92,17 +98,21 @@ const MarketHeader = () => {
</div>
</div>
<div className="flex items-center">
<div className="pr-4 sm:pr-0 sm:w-24">
<div className="text-th-fgd-4 text-xs">Oracle price</div>
<div className="font-semibold mt-0.5">
<div className="pr-6">
<StyledMarketInfoLabel className="text-th-fgd-3">
Oracle price
</StyledMarketInfoLabel>
<div className="font-semibold text-th-fgd-1 text-xs">
{oraclePrice ? oraclePrice.toFixed(2) : '--'}
</div>
</div>
<div className="pr-4 sm:pr-0 sm:w-24">
<div className="mb-0.5 text-th-fgd-4 text-xs">24hr Change</div>
<div className="pr-4">
<StyledMarketInfoLabel className="text-th-fgd-3">
24h Change
</StyledMarketInfoLabel>
{ohlcv && !loading ? (
<div
className={`font-semibold ${
className={`font-semibold text-xs ${
change > 0
? `text-th-green`
: change < 0
@ -117,16 +127,16 @@ const MarketHeader = () => {
<MarketDataLoader />
)}
</div>
<div className="pr-4 sm:pr-0 sm:w-24">
<div className="mb-0.5 text-th-fgd-4 text-xs">24hr Vol</div>
<div className={`font-semibold`}>
<div className="pr-6">
<StyledMarketInfoLabel className="text-th-fgd-3">
24h Vol
</StyledMarketInfoLabel>
<div className="font-semibold text-th-fgd-1 text-xs">
{ohlcv && !loading && volume ? (
volume !== '--' ? (
<>
{volume.toFixed(2)}
<span className="ml-1 text-th-fgd-3 text-xs">
{baseSymbol}
</span>
<span className="ml-1 text-th-fgd-3">{baseSymbol}</span>
</>
) : (
volume
@ -136,6 +146,25 @@ const MarketHeader = () => {
)}
</div>
</div>
<DayHighLow />
{selectedMarketName.includes('PERP') ? (
<>
<div className="pr-6">
<StyledMarketInfoLabel className="text-th-fgd-3">
Funding (8h Ave)
</StyledMarketInfoLabel>
<div className="font-semibold text-th-fgd-1 text-xs">
0.001%
</div>
</div>
<div className="pr-6">
<StyledMarketInfoLabel className="text-th-fgd-3">
Open Interest
</StyledMarketInfoLabel>
<div className="font-semibold text-th-fgd-1 text-xs">$XXXm</div>
</div>
</>
) : null}
</div>
</div>
<div className="flex">
@ -149,5 +178,5 @@ const MarketHeader = () => {
export default MarketHeader
const MarketDataLoader = () => (
<div className="animate-pulse bg-th-bkg-3 h-5 w-10 rounded-sm" />
<div className="animate-pulse bg-th-bkg-3 h-3.5 mt-0.5 w-10 rounded-sm" />
)

242
components/MarketPosition.tsx Normal file
View File

@ -0,0 +1,242 @@
import { useCallback, useState } from 'react'
import FloatingElement from './FloatingElement'
import { ElementTitle } from './styles'
import useMangoStore from '../stores/useMangoStore'
import { i80f48ToPercent, tokenPrecision } from '../utils/index'
import DepositModal from './DepositModal'
import WithdrawModal from './WithdrawModal'
// import BorrowModal from './BorrowModal'
import Button, { LinkButton } from './Button'
import Tooltip from './Tooltip'
// import AccountsModal from './AccountsModal'
import SideBadge from './SideBadge'
export default function MarketPosition() {
const selectedMangoGroup = useMangoStore((s) => s.selectedMangoGroup.current)
const marketConfig = useMangoStore((s) => s.selectedMarket.config)
const baseSymbol = marketConfig.baseSymbol
const selectedMarketName = marketConfig.name
const selectedMangoGroupConfig = useMangoStore(
(s) => s.selectedMangoGroup.config
)
const selectedMangoGroupCache = useMangoStore(
(s) => s.selectedMangoGroup.cache
)
const selectedMangoAccount = useMangoStore(
(s) => s.selectedMangoAccount.current
)
const loadingMangoAccount = useMangoStore(
(s) => s.selectedMangoAccount.initialLoad
)
const connected = useMangoStore((s) => s.wallet.connected)
const [showDepositModal, setShowDepositModal] = useState(false)
const [showWithdrawModal, setShowWithdrawModal] = useState(false)
// const [showAccountsModal, setShowAccountsModal] = useState(false)
// const [showBorrowModal, setShowBorrowModal] = useState(false)
const handleCloseDeposit = useCallback(() => {
setShowDepositModal(false)
}, [])
const handleCloseWithdraw = useCallback(() => {
setShowWithdrawModal(false)
}, [])
// const handleCloseBorrow = useCallback(() => {
// setShowBorrowModal(false)
// }, [])
// const handleCloseAccounts = useCallback(() => {
// setShowAccountsModal(false)
// }, [])
return selectedMarketName.includes('PERP') ? (
<FloatingElement>
<ElementTitle>Position</ElementTitle>
<div className="pt-2">
<div className={`flex items-center justify-between pt-2 pb-2`}>
<div className="font-normal text-th-fgd-3 leading-4">Side</div>
<SideBadge side="long" />
</div>
<div className={`flex justify-between pt-2 pb-2`}>
<div className="font-normal text-th-fgd-3 leading-4">Size</div>
<div className={`text-th-fgd-1`}>X.XXX BTC</div>
</div>
<div className={`flex justify-between pt-2 pb-2`}>
<div className="font-normal text-th-fgd-3 leading-4">
Notional Size
</div>
<div className={`text-th-fgd-1`}>$XXX.XX</div>
</div>
<div className={`flex justify-between pt-2 pb-2`}>
<div className="font-normal text-th-fgd-3 leading-4">PNL</div>
<div className={`text-th-fgd-1`}>$XX.XX</div>
</div>
<div className={`flex justify-between pt-2 pb-2`}>
<div className="font-normal text-th-fgd-3 leading-4">
Break-even Price
</div>
<div className={`text-th-fgd-1`}>$XX,XXX.XX</div>
</div>
<div className={`flex justify-between pt-2 pb-2`}>
<Tooltip content="Leverage">
<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`}
>
Estimated Liquidation Price
</div>
</Tooltip>
<div className={`text-th-fgd-1`}>$XX,XXX.XX</div>
</div>
</div>
<Button
className="mt-4 w-full"
disabled={!connected}
onClick={() => console.log('close position')}
>
Market Close Position
</Button>
</FloatingElement>
) : (
<>
<FloatingElement>
<ElementTitle>Balances</ElementTitle>
{selectedMangoGroup ? (
<div className="pt-2">
{selectedMangoGroupConfig.tokens
.filter((t) => t.symbol === baseSymbol || t.symbol === 'USDC')
.reverse()
.map(({ symbol, mintKey }) => {
const tokenIndex = selectedMangoGroup.getTokenIndex(mintKey)
return (
<div
className="border border-th-bkg-3 mb-4 p-3 rounded-md"
key={mintKey.toString()}
>
<div className="border-b border-th-bkg-3 flex items-center justify-between mb-3 pb-3">
<div className="flex items-center">
<img
alt=""
src={`/assets/icons/${symbol.toLowerCase()}.svg`}
className={`h-5 mr-2.5 w-auto`}
/>
<span className="text-th-fgd-2">{symbol}</span>
</div>
<div className="flex">
<LinkButton
className="text-th-fgd-3 text-xs"
onClick={() => setShowDepositModal(true)}
disabled={!connected || loadingMangoAccount}
>
Deposit
</LinkButton>
<LinkButton
className="ml-4 text-th-fgd-3 text-xs"
onClick={() => setShowWithdrawModal(true)}
disabled={
!connected ||
!selectedMangoAccount ||
loadingMangoAccount
}
>
Withdraw
</LinkButton>
</div>
</div>
<div className="flex">
<div className="w-1/4">
<div className="text-th-fgd-3 tiny-text">Deposits</div>
<div className={`text-th-fgd-1`}>
{selectedMangoAccount
? selectedMangoAccount
.getUiDeposit(
selectedMangoGroupCache.rootBankCache[
tokenIndex
],
selectedMangoGroup,
tokenIndex
)
.toFixed(tokenPrecision[symbol])
: (0).toFixed(tokenPrecision[symbol])}
</div>
</div>
<div className="w-1/4">
<div className="text-th-fgd-3 tiny-text">Borrows</div>
<div className={`text-th-fgd-1`}>
{selectedMangoAccount
? selectedMangoAccount
.getUiBorrow(
selectedMangoGroupCache.rootBankCache[
tokenIndex
],
selectedMangoGroup,
tokenIndex
)
.toFixed(tokenPrecision[symbol])
: (0).toFixed(tokenPrecision[symbol])}
</div>
</div>
<div className="w-1/4">
<Tooltip content="Maximum available with leverage">
<div
className={`cursor-help font-normal pb-0.5 text-th-fgd-3 tiny-text default-transition hover:border-th-bkg-2 hover:text-th-fgd-3`}
>
Available
</div>
</Tooltip>
<div className={`text-th-fgd-1`}>0.00</div>
</div>
<div className="w-1/4">
<Tooltip content="Deposit APY and Borrow APR">
<div
className={`cursor-help font-normal pb-0.5 text-th-fgd-3 tiny-text default-transition hover:border-th-bkg-2 hover:text-th-fgd-3`}
>
Interest Rates
</div>
</Tooltip>
<div className={`text-th-fgd-1`}>
<span className={`text-th-green`}>
{i80f48ToPercent(
selectedMangoGroup.getDepositRate(tokenIndex)
).toFixed(2)}
%
</span>
<span className={`text-th-fgd-4`}>{' / '}</span>
<span className={`text-th-red`}>
{i80f48ToPercent(
selectedMangoGroup.getBorrowRate(tokenIndex)
).toFixed(2)}
%
</span>
</div>
</div>
</div>
</div>
)
})}
</div>
) : null}
</FloatingElement>
{showDepositModal && (
<DepositModal isOpen={showDepositModal} onClose={handleCloseDeposit} />
)}
{showWithdrawModal && (
<WithdrawModal
isOpen={showWithdrawModal}
onClose={handleCloseWithdraw}
/>
)}
{/* {showBorrowModal && (
<BorrowModal isOpen={showBorrowModal} onClose={handleCloseBorrow} />
)} */}
{/* {showAccountsModal ? (
<AccountsModal
onClose={handleCloseAccounts}
isOpen={showAccountsModal}
/>
) : null} */}
</>
)
}

2
components/MarketsModal.tsx
View File

@ -67,7 +67,7 @@ const MarketsModal = ({
/>
)}
</div>
<div className="flex items-center justify-between pt-2.5 px-2.5 text-th-fgd-4 text-xs">
<div className="flex items-center justify-between pt-2.5 px-2.5 text-th-fgd-3">
<StyledColumnHeader>Market</StyledColumnHeader>
<div className="flex justify-between">
<StyledColumnHeader className="text-right w-20">

2
components/SideBadge.tsx
View File

@ -8,7 +8,7 @@ const SideBadge: FunctionComponent<SideBadgeProps> = ({ side }) => {
return (
<div
className={`rounded inline-block ${
side === 'buy'
side === 'buy' || side === 'long'
? 'border border-th-green text-th-green'
: 'border border-th-red text-th-red'
}

35
components/TradePageGrid.tsx
View File

@ -9,7 +9,7 @@ import { useEffect, useState } from 'react'
import FloatingElement from '../components/FloatingElement'
import Orderbook from '../components/Orderbook'
import MarginInfo from './MarginInfo'
import MarginBalances from './MarginBalances'
import MarketPosition from './MarketPosition'
import TradeForm from './TradeForm'
import UserInfo from './UserInfo'
import RecentMarketTrades from './RecentMarketTrades'
@ -22,16 +22,18 @@ export const defaultLayouts = {
xl: [
{ i: 'tvChart', x: 0, y: 0, w: 6, h: 30 },
{ i: 'orderbook', x: 6, y: 0, w: 3, h: 17 },
{ i: 'balanceInfo', x: 9, y: 0, w: 3, h: 6 },
{ i: 'tradeForm', x: 9, y: 0, w: 3, h: 14 },
{ i: 'marketTrades', x: 6, y: 1, w: 3, h: 13 },
{ i: 'tradeForm', x: 9, y: 1, w: 3, h: 12 },
{ i: 'balanceInfo', x: 9, y: 1, w: 3, h: 15 },
{ i: 'marketPosition', x: 9, y: 1, w: 3, h: 15 },
{ i: 'userInfo', x: 0, y: 2, w: 9, h: 19 },
{ i: 'marginInfo', x: 9, y: 2, w: 3, h: 13 },
{ i: 'marginInfo', x: 9, y: 2, w: 3, h: 14 },
],
lg: [
{ i: 'tvChart', x: 0, y: 0, w: 8, h: 26, minW: 2 },
{ i: 'balanceInfo', x: 8, y: 0, w: 4, h: 6, minW: 2 },
{ i: 'marginInfo', x: 8, y: 1, w: 4, h: 13, minW: 2 },
{ i: 'tvChart', x: 0, y: 0, w: 8, h: 29, minW: 2 },
{ i: 'balanceInfo', x: 8, y: 0, w: 4, h: 15, minW: 2 },
{ i: 'marketPosition', x: 8, y: 0, w: 4, h: 15, minW: 2 },
{ i: 'marginInfo', x: 8, y: 1, w: 4, h: 14, minW: 2 },
{ i: 'orderbook', x: 0, y: 2, w: 4, h: 17, minW: 2 },
{ i: 'tradeForm', x: 4, y: 2, w: 4, h: 17, minW: 3 },
{ i: 'marketTrades', x: 8, y: 2, w: 4, h: 17, minW: 2 },
@ -39,7 +41,8 @@ export const defaultLayouts = {
],
md: [
{ i: 'tvChart', x: 0, y: 0, w: 8, h: 26, minW: 2 },
{ i: 'balanceInfo', x: 8, y: 0, w: 4, h: 6, minW: 2 },
{ i: 'balanceInfo', x: 8, y: 0, w: 4, h: 15, minW: 2 },
{ i: 'marketPosition', x: 8, y: 0, w: 4, h: 15, minW: 2 },
{ i: 'marginInfo', x: 8, y: 1, w: 4, h: 13, minW: 2 },
{ i: 'orderbook', x: 0, y: 2, w: 4, h: 17, minW: 2 },
{ i: 'tradeForm', x: 4, y: 2, w: 4, h: 17, minW: 3 },
@ -48,7 +51,8 @@ export const defaultLayouts = {
],
sm: [
{ i: 'tvChart', x: 0, y: 0, w: 12, h: 25, minW: 6 },
{ i: 'balanceInfo', x: 0, y: 1, w: 6, h: 6, minW: 2 },
{ i: 'balanceInfo', x: 0, y: 1, w: 6, h: 15, minW: 2 },
{ i: 'marketPosition', x: 0, y: 1, w: 6, h: 15, minW: 2 },
{ i: 'marginInfo', x: 6, y: 1, w: 6, h: 13, minW: 2 },
{ i: 'tradeForm', x: 0, y: 2, w: 12, h: 13, minW: 3 },
{ i: 'orderbook', x: 0, y: 3, w: 6, h: 17, minW: 3 },
@ -57,7 +61,8 @@ export const defaultLayouts = {
],
xs: [
{ i: 'tvChart', x: 0, y: 0, w: 0, h: 0, minW: 6 },
{ i: 'balanceInfo', x: 0, y: 1, w: 6, h: 6, minW: 2 },
{ i: 'balanceInfo', x: 0, y: 1, w: 6, h: 15, minW: 2 },
{ i: 'marketPosition', x: 0, y: 1, w: 6, h: 15, minW: 2 },
{ i: 'marginInfo', x: 0, y: 2, w: 6, h: 13, minW: 2 },
{ i: 'tradeForm', x: 0, y: 3, w: 12, h: 13, minW: 3 },
{ i: 'orderbook', x: 0, y: 4, w: 6, h: 17, minW: 3 },
@ -88,7 +93,7 @@ const TradePageGrid = () => {
return (
<ResponsiveGridLayout
className="layout"
layouts={savedLayouts || defaultLayouts}
layouts={defaultLayouts}
breakpoints={{ xl: 1600, lg: 1200, md: 1110, sm: 768, xs: 0 }}
cols={{ xl: 12, lg: 12, md: 12, sm: 12, xs: 1 }}
rowHeight={15}
@ -113,9 +118,13 @@ const TradePageGrid = () => {
<div key="userInfo">
<UserInfo />
</div>
<div key="balanceInfo">
<MarginBalances />
<div key="marketPosition">
<MarketPosition />
</div>
{/* TODO: Delete MarginBalances */}
{/* <div key="balanceInfo">
<MarginBalances />
</div> */}
<div key="marketTrades">
<RecentMarketTrades />
</div>

4
styles/index.css
View File

@ -78,6 +78,10 @@ button {
@apply transition-all duration-500;
}
.tiny-text {
font-size: 0.7rem;
}
/* Chart */
.TVChartContainer {