consistency with user info tabs
This commit is contained in:
Tyler Shipe
parent
d35304e84f
commit
be031cc0fe
|
|
@ -7,11 +7,15 @@ import { InformationCircleIcon } from '@heroicons/react/outline'
|
|||
import Tooltip from './Tooltip'
|
||||
import { sleep } from '../utils'
|
||||
import { Market } from '@project-serum/serum'
|
||||
import { ZERO_I80F48 } from '@blockworks-foundation/mango-client'
|
||||
import {
|
||||
getTokenBySymbol,
|
||||
ZERO_I80F48,
|
||||
} from '@blockworks-foundation/mango-client'
|
||||
|
||||
const BalancesTable = () => {
|
||||
const balances = useBalances()
|
||||
const actions = useMangoStore((s) => s.actions)
|
||||
const mangoGroupConfig = useMangoStore((s) => s.selectedMangoGroup.config)
|
||||
|
||||
async function handleSettleAll() {
|
||||
const mangoAccount = useMangoStore.getState().selectedMangoAccount.current
|
||||
|
|
@ -117,53 +121,59 @@ const BalancesTable = () => {
|
|||
</Tr>
|
||||
</Thead>
|
||||
<Tbody>
|
||||
{balances.map((balance, index) => (
|
||||
<Tr
|
||||
key={`${index}`}
|
||||
className={`border-b border-th-bkg-3
|
||||
{balances.map((balance, index) => {
|
||||
const tokenConfig = getTokenBySymbol(
|
||||
mangoGroupConfig,
|
||||
balance.symbol.toUpperCase()
|
||||
)
|
||||
return (
|
||||
<Tr
|
||||
key={`${index}`}
|
||||
className={`border-b border-th-bkg-3
|
||||
${index % 2 === 0 ? `bg-th-bkg-3` : `bg-th-bkg-2`}
|
||||
`}
|
||||
>
|
||||
<Td
|
||||
className={`flex items-center px-4 py-2.5 whitespace-nowrap text-sm text-th-fgd-1`}
|
||||
>
|
||||
<img
|
||||
alt=""
|
||||
width="20"
|
||||
height="20"
|
||||
src={`/assets/icons/${balance.symbol.toLowerCase()}.svg`}
|
||||
className={`mr-2.5`}
|
||||
/>
|
||||
<Td
|
||||
className={`flex items-center px-4 py-2.5 whitespace-nowrap text-sm text-th-fgd-1`}
|
||||
>
|
||||
<img
|
||||
alt=""
|
||||
width="20"
|
||||
height="20"
|
||||
src={`/assets/icons/${balance.symbol.toLowerCase()}.svg`}
|
||||
className={`mr-2.5`}
|
||||
/>
|
||||
|
||||
{balance.symbol}
|
||||
</Td>
|
||||
<Td
|
||||
className={`px-4 py-2.5 whitespace-nowrap text-sm text-th-fgd-1`}
|
||||
>
|
||||
{balance.marginDeposits.toFixed()}
|
||||
</Td>
|
||||
<Td
|
||||
className={`px-4 py-2.5 whitespace-nowrap text-sm text-th-fgd-1`}
|
||||
>
|
||||
{balance.borrows.toFixed()}
|
||||
</Td>
|
||||
<Td
|
||||
className={`px-4 py-2.5 whitespace-nowrap text-sm text-th-fgd-1`}
|
||||
>
|
||||
{balance.orders}
|
||||
</Td>
|
||||
<Td
|
||||
className={`px-4 py-2.5 whitespace-nowrap text-sm text-th-fgd-1`}
|
||||
>
|
||||
{balance.unsettled}
|
||||
</Td>
|
||||
<Td
|
||||
className={`px-4 py-2.5 whitespace-nowrap text-sm text-th-fgd-1`}
|
||||
>
|
||||
{balance.net.toFixed()}
|
||||
</Td>
|
||||
</Tr>
|
||||
))}
|
||||
{balance.symbol}
|
||||
</Td>
|
||||
<Td
|
||||
className={`px-4 py-2.5 whitespace-nowrap text-sm text-th-fgd-1`}
|
||||
>
|
||||
{balance.marginDeposits.toFixed(tokenConfig.decimals)}
|
||||
</Td>
|
||||
<Td
|
||||
className={`px-4 py-2.5 whitespace-nowrap text-sm text-th-fgd-1`}
|
||||
>
|
||||
{balance.borrows.toFixed(tokenConfig.decimals)}
|
||||
</Td>
|
||||
<Td
|
||||
className={`px-4 py-2.5 whitespace-nowrap text-sm text-th-fgd-1`}
|
||||
>
|
||||
{balance.orders}
|
||||
</Td>
|
||||
<Td
|
||||
className={`px-4 py-2.5 whitespace-nowrap text-sm text-th-fgd-1`}
|
||||
>
|
||||
{balance.unsettled}
|
||||
</Td>
|
||||
<Td
|
||||
className={`px-4 py-2.5 whitespace-nowrap text-sm text-th-fgd-1`}
|
||||
>
|
||||
{balance.net.toFixed(tokenConfig.decimals)}
|
||||
</Td>
|
||||
</Tr>
|
||||
)
|
||||
})}
|
||||
</Tbody>
|
||||
</Table>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -49,7 +49,6 @@ const PositionsTable = () => {
|
|||
perpAccount.basePosition.eq(new BN(0))
|
||||
)
|
||||
)
|
||||
console.log('perp acc length', filteredPerpAccounts.length)
|
||||
|
||||
const handleSettlePnl = async (
|
||||
perpMarket: PerpMarket,
|
||||
|
|
@ -98,7 +97,7 @@ const PositionsTable = () => {
|
|||
<Thead>
|
||||
<Tr className="text-th-fgd-3">
|
||||
<Th scope="col" className="px-6 py-2 text-left font-normal">
|
||||
Market
|
||||
Perp Market
|
||||
</Th>
|
||||
<Th scope="col" className="px-2 py-2 text-left font-normal">
|
||||
Side
|
||||
|
|
@ -140,13 +139,22 @@ const PositionsTable = () => {
|
|||
<Tr
|
||||
key={`${marketIndex}`}
|
||||
className={`border-b border-th-bkg-3
|
||||
${index % 2 === 0 ? `bg-th-bkg-2` : `bg-th-bkg-3`}
|
||||
${index % 2 === 0 ? `bg-th-bkg-3` : `bg-th-bkg-2`}
|
||||
`}
|
||||
>
|
||||
<Td className="px-6 py-2.5 whitespace-nowrap text-sm text-th-fgd-1">
|
||||
{marketConfig.name}
|
||||
<Td className="px-6 py-1 whitespace-nowrap text-sm text-th-fgd-1">
|
||||
<div className="flex items-center">
|
||||
<img
|
||||
alt=""
|
||||
width="20"
|
||||
height="20"
|
||||
src={`/assets/icons/${marketConfig.baseSymbol.toLowerCase()}.svg`}
|
||||
className={`mr-2.5`}
|
||||
/>
|
||||
<div>{marketConfig.name}</div>
|
||||
</div>
|
||||
</Td>
|
||||
<Td className="px-2 py-2.5 whitespace-nowrap text-sm text-th-fgd-1">
|
||||
<Td className="px-2 py-1 whitespace-nowrap text-sm text-th-fgd-1">
|
||||
<SideBadge
|
||||
side={
|
||||
perpAccount.basePosition.gt(new BN(0))
|
||||
|
|
@ -155,25 +163,25 @@ const PositionsTable = () => {
|
|||
}
|
||||
/>
|
||||
</Td>
|
||||
<Td className="px-2 py-2.5 whitespace-nowrap text-sm text-th-fgd-1">
|
||||
<Td className="px-2 py-1 whitespace-nowrap text-sm text-th-fgd-1">
|
||||
{perpMarket.baseLotsToNumber(
|
||||
perpAccount.basePosition
|
||||
)}
|
||||
</Td>
|
||||
<Td className="px-2 py-2.5 whitespace-nowrap text-sm text-th-fgd-1">
|
||||
<Td className="px-2 py-1 whitespace-nowrap text-sm text-th-fgd-1">
|
||||
{nativeI80F48ToUi(
|
||||
perpAccount.quotePosition,
|
||||
marketConfig.quoteDecimals
|
||||
).toFixed()}
|
||||
</Td>
|
||||
<Td className="px-2 py-2.5 whitespace-nowrap text-sm text-th-fgd-1">
|
||||
<Td className="px-2 py-1 whitespace-nowrap text-sm text-th-fgd-1">
|
||||
$
|
||||
{nativeI80F48ToUi(
|
||||
perpAccount.getPnl(perpMarketInfo, price),
|
||||
marketConfig.quoteDecimals
|
||||
).toFixed()}
|
||||
</Td>
|
||||
<Td className="px-2 py-2.5 whitespace-nowrap text-sm text-th-fgd-1">
|
||||
<Td className="px-2 py-1 whitespace-nowrap text-sm text-th-fgd-1">
|
||||
{perpAccount
|
||||
.getHealth(
|
||||
perpMarketInfo,
|
||||
|
|
@ -185,7 +193,7 @@ const PositionsTable = () => {
|
|||
)
|
||||
.toFixed(3)}
|
||||
</Td>
|
||||
<Td className="px-6 whitespace-nowrap text-sm text-th-fgd-1">
|
||||
<Td className="px-6 py-1 whitespace-nowrap text-sm text-th-fgd-1">
|
||||
<div className="flex justify-end">
|
||||
<Button
|
||||
onClick={() =>
|
||||
|
|
|
|||
|
|
@ -30,38 +30,16 @@ const TradeHistoryTable = () => {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className={`flex flex-col py-4`}>
|
||||
<div className={`-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8`}>
|
||||
<div className={`align-middle inline-block min-w-full sm:px-6 lg:px-8`}>
|
||||
<div className="flex flex-col py-4">
|
||||
<div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
|
||||
<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`}>
|
||||
<Table className={`min-w-full divide-y divide-th-bkg-2`}>
|
||||
<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`}
|
||||
>
|
||||
<Th scope="col" className="px-6 py-3 text-left font-normal">
|
||||
<LinkButton
|
||||
className="flex items-center no-underline"
|
||||
onClick={() => requestSort('side')}
|
||||
|
|
@ -78,10 +56,7 @@ const TradeHistoryTable = () => {
|
|||
/>
|
||||
</LinkButton>
|
||||
</Th>
|
||||
<Th
|
||||
scope="col"
|
||||
className={`px-6 py-3 text-left font-normal`}
|
||||
>
|
||||
<Th scope="col" className="px-6 py-3 text-left font-normal">
|
||||
<LinkButton
|
||||
className="flex items-center no-underline"
|
||||
onClick={() => requestSort('size')}
|
||||
|
|
@ -98,10 +73,7 @@ const TradeHistoryTable = () => {
|
|||
/>
|
||||
</LinkButton>
|
||||
</Th>
|
||||
<Th
|
||||
scope="col"
|
||||
className={`px-6 py-3 text-left font-normal`}
|
||||
>
|
||||
<Th scope="col" className="px-6 py-3 text-left font-normal">
|
||||
<LinkButton
|
||||
className="flex items-center no-underline"
|
||||
onClick={() => requestSort('price')}
|
||||
|
|
@ -118,10 +90,7 @@ const TradeHistoryTable = () => {
|
|||
/>
|
||||
</LinkButton>
|
||||
</Th>
|
||||
<Th
|
||||
scope="col"
|
||||
className={`px-6 py-3 text-left font-normal`}
|
||||
>
|
||||
<Th scope="col" className="px-6 py-3 text-left font-normal">
|
||||
<LinkButton
|
||||
className="flex items-center no-underline"
|
||||
onClick={() => requestSort('value')}
|
||||
|
|
@ -138,10 +107,7 @@ const TradeHistoryTable = () => {
|
|||
/>
|
||||
</LinkButton>
|
||||
</Th>
|
||||
<Th
|
||||
scope="col"
|
||||
className={`px-6 py-3 text-left font-normal`}
|
||||
>
|
||||
<Th scope="col" className="px-6 py-3 text-left font-normal">
|
||||
<LinkButton
|
||||
className="flex items-center no-underline"
|
||||
onClick={() => requestSort('liquidity')}
|
||||
|
|
@ -158,10 +124,7 @@ const TradeHistoryTable = () => {
|
|||
/>
|
||||
</LinkButton>
|
||||
</Th>
|
||||
<Th
|
||||
scope="col"
|
||||
className={`px-6 py-3 text-left font-normal`}
|
||||
>
|
||||
<Th scope="col" className="px-6 py-3 text-left font-normal">
|
||||
<LinkButton
|
||||
className="flex items-center no-underline"
|
||||
onClick={() => requestSort('feeCost')}
|
||||
|
|
@ -178,10 +141,7 @@ const TradeHistoryTable = () => {
|
|||
/>
|
||||
</LinkButton>
|
||||
</Th>
|
||||
<Th
|
||||
scope="col"
|
||||
className={`px-6 py-3 text-left font-normal`}
|
||||
>
|
||||
<Th scope="col" className="px-6 py-3 text-left font-normal">
|
||||
<LinkButton
|
||||
className="flex items-center no-underline"
|
||||
onClick={() => requestSort('loadTimestamp')}
|
||||
|
|
@ -208,55 +168,25 @@ 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`}
|
||||
>
|
||||
<Td className="px-6 py-4 whitespace-nowrap text-sm text-th-fgd-1">
|
||||
<SideBadge side={trade.side} />
|
||||
</Td>
|
||||
<Td
|
||||
className={`px-6 py-4 whitespace-nowrap text-sm text-th-fgd-1`}
|
||||
>
|
||||
<Td className="px-6 py-4 whitespace-nowrap text-sm text-th-fgd-1">
|
||||
{trade.size}
|
||||
</Td>
|
||||
<Td
|
||||
className={`px-6 py-4 whitespace-nowrap text-sm text-th-fgd-1`}
|
||||
>
|
||||
<Td className="px-6 py-4 whitespace-nowrap text-sm text-th-fgd-1">
|
||||
{trade.price}
|
||||
</Td>
|
||||
<Td
|
||||
className={`px-6 py-4 whitespace-nowrap text-sm text-th-fgd-1`}
|
||||
>
|
||||
<Td className="px-6 py-4 whitespace-nowrap text-sm text-th-fgd-1">
|
||||
${trade.value.toFixed(2)}
|
||||
</Td>
|
||||
<Td
|
||||
className={`px-6 py-4 whitespace-nowrap text-sm text-th-fgd-1`}
|
||||
>
|
||||
<Td className="px-6 py-4 whitespace-nowrap text-sm text-th-fgd-1">
|
||||
{trade.liquidity}
|
||||
</Td>
|
||||
<Td
|
||||
className={`px-6 py-4 whitespace-nowrap text-sm text-th-fgd-1`}
|
||||
>
|
||||
<Td className="px-6 py-4 whitespace-nowrap text-sm text-th-fgd-1">
|
||||
${trade.feeCost}
|
||||
</Td>
|
||||
<Td
|
||||
className={`px-6 py-4 whitespace-nowrap text-sm text-th-fgd-1`}
|
||||
>
|
||||
<Td className="px-6 py-4 whitespace-nowrap text-sm text-th-fgd-1">
|
||||
{trade.loadTimestamp || trade.timestamp
|
||||
? renderTradeDateTime(
|
||||
trade.loadTimestamp || trade.timestamp
|
||||
|
|
@ -269,18 +199,11 @@ const TradeHistoryTable = () => {
|
|||
</Table>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className={`w-full text-center py-6 bg-th-bkg-1 text-th-fgd-3 rounded-md`}
|
||||
>
|
||||
<div className="w-full text-center py-6 bg-th-bkg-1 text-th-fgd-3 rounded-md">
|
||||
No trade history.
|
||||
{asPath === '/account' ? (
|
||||
<Link href={'/'}>
|
||||
<a
|
||||
className={`inline-flex ml-2 py-0
|
||||
`}
|
||||
>
|
||||
Make a trade
|
||||
</a>
|
||||
<a className="inline-flex ml-2 py-0">Make a trade</a>
|
||||
</Link>
|
||||
) : null}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -604,18 +604,10 @@ const WithdrawModal: FunctionComponent<WithdrawModalProps> = ({
|
|||
</div>
|
||||
<div className="flex justify-between pb-2">
|
||||
<div className="text-th-fgd-4">Leverage</div>
|
||||
{/* <div className="text-th-fgd-1">
|
||||
{simulation.leverage.toFixed(2)}x
|
||||
</div> */}
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<div className="text-th-fgd-4">Collateral Ratio</div>
|
||||
{/* <div className="text-th-fgd-1">
|
||||
{simulation.collateralRatio * 100 < 200
|
||||
? Math.floor(simulation.collateralRatio * 100)
|
||||
: '>200'}
|
||||
%
|
||||
</div> */}
|
||||
<div className="text-th-fgd-1">
|
||||
{/* {simulation.leverage.toFixed(2)}x */}
|
||||
X.XXx
|
||||
</div>
|
||||
</div>
|
||||
{simulation.liabsVal > 0.05 ? (
|
||||
<div className="flex justify-between pt-2">
|
||||
|
|
|
|||
|
|
@ -122,7 +122,7 @@ export function useBalances(): Balances[] {
|
|||
.sub(quoteMeta.borrows)
|
||||
.sub(I80F48.fromNumber(quoteInOrders))
|
||||
|
||||
return baseBalances.concat([
|
||||
return [
|
||||
{
|
||||
market: null,
|
||||
key: `${quoteMeta.symbol}${quoteMeta.symbol}`,
|
||||
|
|
@ -133,5 +133,5 @@ export function useBalances(): Balances[] {
|
|||
unsettled,
|
||||
net,
|
||||
},
|
||||
])
|
||||
].concat(baseBalances)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -93,7 +93,6 @@ export default function useWallet() {
|
|||
useEffect(() => {
|
||||
if (!wallet) return
|
||||
wallet.on('connect', async () => {
|
||||
console.log('connected wallet')
|
||||
sleep(250)
|
||||
await actions.fetchMangoAccounts()
|
||||
setMangoStore((state) => {
|
||||
|
|
|
|||
14
yarn.lock
14
yarn.lock
|
|
@ -995,7 +995,7 @@
|
|||
|
||||
"@blockworks-foundation/mango-client@git+https://github.com/blockworks-foundation/mango-client-v3.git":
|
||||
version "3.0.1"
|
||||
resolved "git+https://github.com/blockworks-foundation/mango-client-v3.git#300815fc84e7576c3b4fa43249958c85d1012128"
|
||||
resolved "git+https://github.com/blockworks-foundation/mango-client-v3.git#06d0d92b5d15d319ef7db5320b8427851c7c4a03"
|
||||
dependencies:
|
||||
"@project-serum/serum" "^0.13.45"
|
||||
"@project-serum/sol-wallet-adapter" "^0.2.0"
|
||||
|
|
@ -1891,14 +1891,14 @@
|
|||
integrity sha512-7eQ2xYLLI/LsicL2nejW9Wyko3lcpN6O/z0ZLHrEQsg280zIdCv1t/0m6UtBjUHokCGBQ3gYTbHzDkZ1xOBwwg==
|
||||
|
||||
"@types/node@*":
|
||||
version "16.4.1"
|
||||
resolved "https://registry.yarnpkg.com/@types/node/-/node-16.4.1.tgz#9fad171a5b701613ee8a6f4ece3c88b1034b1b03"
|
||||
integrity sha512-UW7cbLqf/Wu5XH2RKKY1cHwUNLicIDRLMraYKz+HHAerJ0ZffUEk+fMnd8qU2JaS6cAy0r8tsaf7yqHASf/Y0Q==
|
||||
version "16.4.2"
|
||||
resolved "https://registry.yarnpkg.com/@types/node/-/node-16.4.2.tgz#0a95d7fd950cb1eaca0ce11031d72e8f680b775a"
|
||||
integrity sha512-vxyhOzFCm+jC/T5KugbVsYy1DbQM0h3NCFUrVbu0+pYa/nr+heeucpqxpa8j4pUmIGLPYzboY9zIdOF0niFAjQ==
|
||||
|
||||
"@types/node@^12.12.54":
|
||||
version "12.20.16"
|
||||
resolved "https://registry.yarnpkg.com/@types/node/-/node-12.20.16.tgz#1acf34f6456208f495dac0434dd540488d17f991"
|
||||
integrity sha512-6CLxw83vQf6DKqXxMPwl8qpF8I7THFZuIwLt4TnNsumxkp1VsRZWT8txQxncT/Rl2UojTsFzWgDG4FRMwafrlA==
|
||||
version "12.20.17"
|
||||
resolved "https://registry.yarnpkg.com/@types/node/-/node-12.20.17.tgz#ffd44c2801fc527a6fe6e86bc9b900261df1c87e"
|
||||
integrity sha512-so8EHl4S6MmatPS0f9sE1ND94/ocbcEshW5OpyYthRqeRpiYyW2uXYTo/84kmfdfeNrDycARkvuiXl6nO40NGg==
|
||||
|
||||
"@types/node@^14.14.25":
|
||||
version "14.17.3"
|
||||
|
|
|
|||
Loading…
Reference in New Issue