diff --git a/components/MarginBalances.tsx b/components/MarginBalances.tsx index 2bed36a..609dfca 100644 --- a/components/MarginBalances.tsx +++ b/components/MarginBalances.tsx @@ -73,17 +73,23 @@ export default function MarginBalances() { {selectedMangoGroup ? (
+ | ||||||
---|---|---|---|---|---|---|
Assets | -+ | Deposits | -+ | Borrows | -+ | Interest (APY) | + | {selectedMarginAccount ? floorToDecimal( selectedMarginAccount.getUiDeposit( @@ -112,14 +118,14 @@ export default function MarginBalances() { ).toFixed(tokenPrecision[name]) : (0).toFixed(tokenPrecision[name])} | -+ | {selectedMarginAccount ? selectedMarginAccount .getUiBorrow(selectedMangoGroup, i) .toFixed(tokenPrecision[name]) : (0).toFixed(tokenPrecision[name])} | -+ |
+{(selectedMangoGroup.getDepositRate(i) * 100).toFixed(2)}
%
diff --git a/components/Orderbook.tsx b/components/Orderbook.tsx
index 845d873..be03cd3 100644
--- a/components/Orderbook.tsx
+++ b/components/Orderbook.tsx
@@ -1,48 +1,74 @@
import React, { useRef, useEffect, useState } from 'react'
import styled from '@emotion/styled'
+import { css, keyframes } from '@emotion/react'
import useInterval from '../hooks/useInterval'
import usePrevious from '../hooks/usePrevious'
import { isEqual, getDecimalCount } from '../utils/'
-import { ArrowUpIcon, ArrowDownIcon } from '@heroicons/react/solid'
+import {
+ ArrowUpIcon,
+ ArrowDownIcon,
+ SwitchHorizontalIcon,
+} from '@heroicons/react/solid'
import useMarkPrice from '../hooks/useMarkPrice'
import useOrderbook from '../hooks/useOrderbook'
import useMarket from '../hooks/useMarket'
import { ElementTitle } from './styles'
import useMangoStore from '../stores/useMangoStore'
+import Tooltip from './Tooltip'
+import FloatingElement from './FloatingElement'
const Line = styled.div
-
- {orderbookData?.asks.map(({ price, size, sizePercent }) => (
- Size ({baseCurrency})
- Price ({quoteCurrency})
-
+
+
+
+
+
+
+ Size ({baseCurrency})
+
+ Price ({quoteCurrency})
+
+ Size ({baseCurrency})
+
+
+
+ {orderbookData?.bids.map(
+ ({ price, size, sizePercent }) => (
+
+
+ {/*
+
+ */}
+ {orderbookData?.asks.map(
+ ({ price, size, sizePercent }) => (
+
+ Ask ({quoteCurrency})
+
+
+ Size ({baseCurrency})
+
+
+
+ >
+ ) : (
+ Spread
+
+ {orderbookData?.spread.toFixed(2)}
+
+
+ {orderbookData?.spreadPercentage.toFixed(2)}%
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+
+
+
+
+
+
+ {orderbookData?.asks.map(({ price, size, sizePercent }) => (
+
+ Size ({baseCurrency})
+
+
+ Price ({quoteCurrency})
+
+
+
+ {orderbookData?.bids.map(({ price, size, sizePercent }) => (
+ Spread
+
+ {orderbookData?.spread.toFixed(2)}
+
+
+ {orderbookData?.spreadPercentage.toFixed(2)}%
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
{invert ? (
<>
-
+ {formattedPrice}
+
+ {formattedPrice}
+
{formattedSize}
@@ -206,7 +428,7 @@ const OrderbookRow = React.memo
{formattedPrice}
@@ -233,7 +455,7 @@ const MarkPriceComponent = React.memo<{ markPrice: number }>(
return (
previousMarkPrice
? `text-th-green`
: markPrice < previousMarkPrice
@@ -242,10 +464,10 @@ const MarkPriceComponent = React.memo<{ markPrice: number }>(
}`}
>
{markPrice > previousMarkPrice && (
-
diff --git a/components/RecentMarketTrades.tsx b/components/RecentMarketTrades.tsx
index fdb3ca1..305bccf 100644
--- a/components/RecentMarketTrades.tsx
+++ b/components/RecentMarketTrades.tsx
@@ -35,7 +35,7 @@ export default function PublicTrades() {
return (
+ Price ({quoteCurrency})
Size ({baseCurrency})
Time
diff --git a/components/TradeForm.tsx b/components/TradeForm.tsx
index 183d941..10d7e23 100644
--- a/components/TradeForm.tsx
+++ b/components/TradeForm.tsx
@@ -259,7 +259,7 @@ export default function TradeForm() {
disabled={tradeType === 'Market'}
prefix={'Price'}
suffix={quoteCurrency}
- className="rounded-none"
+ className="rounded-r-none"
wrapperClassName="w-3/5"
/>
-
|