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

consistency with user info tabs

This commit is contained in:
Tyler Shipe 2021-07-24 16:15:27 -04:00
parent d35304e84f
commit be031cc0fe
7 changed files with 108 additions and 176 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
components/BalancesTable.tsx
View File

@ -7,11 +7,15 @@ import { InformationCircleIcon } from '@heroicons/react/outline'
import Tooltip from './Tooltip' import Tooltip from './Tooltip'
import { sleep } from '../utils' import { sleep } from '../utils'
import { Market } from '@project-serum/serum' 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 BalancesTable = () => {
const balances = useBalances() const balances = useBalances()
const actions = useMangoStore((s) => s.actions) const actions = useMangoStore((s) => s.actions)
const mangoGroupConfig = useMangoStore((s) => s.selectedMangoGroup.config)
async function handleSettleAll() { async function handleSettleAll() {
const mangoAccount = useMangoStore.getState().selectedMangoAccount.current const mangoAccount = useMangoStore.getState().selectedMangoAccount.current
@ -117,53 +121,59 @@ const BalancesTable = () => {
</Tr> </Tr>
</Thead> </Thead>
<Tbody> <Tbody>
{balances.map((balance, index) => ( {balances.map((balance, index) => {
<Tr const tokenConfig = getTokenBySymbol(
key={`${index}`} mangoGroupConfig,
className={`border-b border-th-bkg-3 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`} ${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 <Td
alt="" className={`flex items-center px-4 py-2.5 whitespace-nowrap text-sm text-th-fgd-1`}
width="20" >
height="20" <img
src={`/assets/icons/${balance.symbol.toLowerCase()}.svg`} alt=""
className={`mr-2.5`} width="20"
/> height="20"
src={`/assets/icons/${balance.symbol.toLowerCase()}.svg`}
className={`mr-2.5`}
/>
{balance.symbol} {balance.symbol}
</Td> </Td>
<Td <Td
className={`px-4 py-2.5 whitespace-nowrap text-sm text-th-fgd-1`} className={`px-4 py-2.5 whitespace-nowrap text-sm text-th-fgd-1`}
> >
{balance.marginDeposits.toFixed()} {balance.marginDeposits.toFixed(tokenConfig.decimals)}
</Td> </Td>
<Td <Td
className={`px-4 py-2.5 whitespace-nowrap text-sm text-th-fgd-1`} className={`px-4 py-2.5 whitespace-nowrap text-sm text-th-fgd-1`}
> >
{balance.borrows.toFixed()} {balance.borrows.toFixed(tokenConfig.decimals)}
</Td> </Td>
<Td <Td
className={`px-4 py-2.5 whitespace-nowrap text-sm text-th-fgd-1`} className={`px-4 py-2.5 whitespace-nowrap text-sm text-th-fgd-1`}
> >
{balance.orders} {balance.orders}
</Td> </Td>
<Td <Td
className={`px-4 py-2.5 whitespace-nowrap text-sm text-th-fgd-1`} className={`px-4 py-2.5 whitespace-nowrap text-sm text-th-fgd-1`}
> >
{balance.unsettled} {balance.unsettled}
</Td> </Td>
<Td <Td
className={`px-4 py-2.5 whitespace-nowrap text-sm text-th-fgd-1`} className={`px-4 py-2.5 whitespace-nowrap text-sm text-th-fgd-1`}
> >
{balance.net.toFixed()} {balance.net.toFixed(tokenConfig.decimals)}
</Td> </Td>
</Tr> </Tr>
))} )
})}
</Tbody> </Tbody>
</Table> </Table>
</div> </div>

30
components/PositionsTable.tsx
View File

@ -49,7 +49,6 @@ const PositionsTable = () => {
perpAccount.basePosition.eq(new BN(0)) perpAccount.basePosition.eq(new BN(0))
) )
) )
console.log('perp acc length', filteredPerpAccounts.length)
const handleSettlePnl = async ( const handleSettlePnl = async (
perpMarket: PerpMarket, perpMarket: PerpMarket,
@ -98,7 +97,7 @@ const PositionsTable = () => {
<Thead> <Thead>
<Tr className="text-th-fgd-3"> <Tr className="text-th-fgd-3">
<Th scope="col" className="px-6 py-2 text-left font-normal"> <Th scope="col" className="px-6 py-2 text-left font-normal">
Market Perp Market
</Th> </Th>
<Th scope="col" className="px-2 py-2 text-left font-normal"> <Th scope="col" className="px-2 py-2 text-left font-normal">
Side Side
@ -140,13 +139,22 @@ const PositionsTable = () => {
<Tr <Tr
key={`${marketIndex}`} key={`${marketIndex}`}
className={`border-b border-th-bkg-3 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"> <Td className="px-6 py-1 whitespace-nowrap text-sm text-th-fgd-1">
{marketConfig.name} <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>
<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 <SideBadge
side={ side={
perpAccount.basePosition.gt(new BN(0)) perpAccount.basePosition.gt(new BN(0))
@ -155,25 +163,25 @@ const PositionsTable = () => {
} }
/> />
</Td> </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( {perpMarket.baseLotsToNumber(
perpAccount.basePosition perpAccount.basePosition
)} )}
</Td> </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( {nativeI80F48ToUi(
perpAccount.quotePosition, perpAccount.quotePosition,
marketConfig.quoteDecimals marketConfig.quoteDecimals
).toFixed()} ).toFixed()}
</Td> </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( {nativeI80F48ToUi(
perpAccount.getPnl(perpMarketInfo, price), perpAccount.getPnl(perpMarketInfo, price),
marketConfig.quoteDecimals marketConfig.quoteDecimals
).toFixed()} ).toFixed()}
</Td> </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 {perpAccount
.getHealth( .getHealth(
perpMarketInfo, perpMarketInfo,
@ -185,7 +193,7 @@ const PositionsTable = () => {
) )
.toFixed(3)} .toFixed(3)}
</Td> </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"> <div className="flex justify-end">
<Button <Button
onClick={() => onClick={() =>

121
components/TradeHistoryTable.tsx
View File

@ -30,38 +30,16 @@ const TradeHistoryTable = () => {
} }
return ( return (
<div className={`flex flex-col py-4`}> <div className="flex flex-col py-4">
<div className={`-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8`}> <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="align-middle inline-block min-w-full sm:px-6 lg:px-8">
{tradeHistory && tradeHistory.length ? ( {tradeHistory && tradeHistory.length ? (
<div className={`shadow overflow-hidden border-b border-th-bkg-2`}> <div className="shadow overflow-hidden border-b border-th-bkg-2">
<Table className={`min-w-full divide-y divide-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> <Thead>
<Tr className="text-th-fgd-3 text-xs"> <Tr className="text-th-fgd-3 text-xs">
<Th <Th scope="col" className="px-6 py-3 text-left font-normal">
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 <LinkButton
className="flex items-center no-underline" className="flex items-center no-underline"
onClick={() => requestSort('side')} onClick={() => requestSort('side')}
@ -78,10 +56,7 @@ const TradeHistoryTable = () => {
/> />
</LinkButton> </LinkButton>
</Th> </Th>
<Th <Th scope="col" className="px-6 py-3 text-left font-normal">
scope="col"
className={`px-6 py-3 text-left font-normal`}
>
<LinkButton <LinkButton
className="flex items-center no-underline" className="flex items-center no-underline"
onClick={() => requestSort('size')} onClick={() => requestSort('size')}
@ -98,10 +73,7 @@ const TradeHistoryTable = () => {
/> />
</LinkButton> </LinkButton>
</Th> </Th>
<Th <Th scope="col" className="px-6 py-3 text-left font-normal">
scope="col"
className={`px-6 py-3 text-left font-normal`}
>
<LinkButton <LinkButton
className="flex items-center no-underline" className="flex items-center no-underline"
onClick={() => requestSort('price')} onClick={() => requestSort('price')}
@ -118,10 +90,7 @@ const TradeHistoryTable = () => {
/> />
</LinkButton> </LinkButton>
</Th> </Th>
<Th <Th scope="col" className="px-6 py-3 text-left font-normal">
scope="col"
className={`px-6 py-3 text-left font-normal`}
>
<LinkButton <LinkButton
className="flex items-center no-underline" className="flex items-center no-underline"
onClick={() => requestSort('value')} onClick={() => requestSort('value')}
@ -138,10 +107,7 @@ const TradeHistoryTable = () => {
/> />
</LinkButton> </LinkButton>
</Th> </Th>
<Th <Th scope="col" className="px-6 py-3 text-left font-normal">
scope="col"
className={`px-6 py-3 text-left font-normal`}
>
<LinkButton <LinkButton
className="flex items-center no-underline" className="flex items-center no-underline"
onClick={() => requestSort('liquidity')} onClick={() => requestSort('liquidity')}
@ -158,10 +124,7 @@ const TradeHistoryTable = () => {
/> />
</LinkButton> </LinkButton>
</Th> </Th>
<Th <Th scope="col" className="px-6 py-3 text-left font-normal">
scope="col"
className={`px-6 py-3 text-left font-normal`}
>
<LinkButton <LinkButton
className="flex items-center no-underline" className="flex items-center no-underline"
onClick={() => requestSort('feeCost')} onClick={() => requestSort('feeCost')}
@ -178,10 +141,7 @@ const TradeHistoryTable = () => {
/> />
</LinkButton> </LinkButton>
</Th> </Th>
<Th <Th scope="col" className="px-6 py-3 text-left font-normal">
scope="col"
className={`px-6 py-3 text-left font-normal`}
>
<LinkButton <LinkButton
className="flex items-center no-underline" className="flex items-center no-underline"
onClick={() => requestSort('loadTimestamp')} onClick={() => requestSort('loadTimestamp')}
@ -208,55 +168,25 @@ const TradeHistoryTable = () => {
${index % 2 === 0 ? `bg-th-bkg-3` : `bg-th-bkg-2`} ${index % 2 === 0 ? `bg-th-bkg-3` : `bg-th-bkg-2`}
`} `}
> >
<Td <Td className="px-6 py-4 whitespace-nowrap text-sm text-th-fgd-1">
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} /> <SideBadge side={trade.side} />
</Td> </Td>
<Td <Td className="px-6 py-4 whitespace-nowrap text-sm text-th-fgd-1">
className={`px-6 py-4 whitespace-nowrap text-sm text-th-fgd-1`}
>
{trade.size} {trade.size}
</Td> </Td>
<Td <Td className="px-6 py-4 whitespace-nowrap text-sm text-th-fgd-1">
className={`px-6 py-4 whitespace-nowrap text-sm text-th-fgd-1`}
>
{trade.price} {trade.price}
</Td> </Td>
<Td <Td className="px-6 py-4 whitespace-nowrap text-sm text-th-fgd-1">
className={`px-6 py-4 whitespace-nowrap text-sm text-th-fgd-1`}
>
${trade.value.toFixed(2)} ${trade.value.toFixed(2)}
</Td> </Td>
<Td <Td className="px-6 py-4 whitespace-nowrap text-sm text-th-fgd-1">
className={`px-6 py-4 whitespace-nowrap text-sm text-th-fgd-1`}
>
{trade.liquidity} {trade.liquidity}
</Td> </Td>
<Td <Td className="px-6 py-4 whitespace-nowrap text-sm text-th-fgd-1">
className={`px-6 py-4 whitespace-nowrap text-sm text-th-fgd-1`}
>
${trade.feeCost} ${trade.feeCost}
</Td> </Td>
<Td <Td className="px-6 py-4 whitespace-nowrap text-sm text-th-fgd-1">
className={`px-6 py-4 whitespace-nowrap text-sm text-th-fgd-1`}
>
{trade.loadTimestamp || trade.timestamp {trade.loadTimestamp || trade.timestamp
? renderTradeDateTime( ? renderTradeDateTime(
trade.loadTimestamp || trade.timestamp trade.loadTimestamp || trade.timestamp
@ -269,18 +199,11 @@ const TradeHistoryTable = () => {
</Table> </Table>
</div> </div>
) : ( ) : (
<div <div className="w-full text-center py-6 bg-th-bkg-1 text-th-fgd-3 rounded-md">
className={`w-full text-center py-6 bg-th-bkg-1 text-th-fgd-3 rounded-md`}
>
No trade history. No trade history.
{asPath === '/account' ? ( {asPath === '/account' ? (
<Link href={'/'}> <Link href={'/'}>
<a <a className="inline-flex ml-2 py-0">Make a trade</a>
className={`inline-flex ml-2 py-0
`}
>
Make a trade
</a>
</Link> </Link>
) : null} ) : null}
</div> </div>

16
components/WithdrawModal.tsx
View File

@ -604,18 +604,10 @@ const WithdrawModal: FunctionComponent<WithdrawModalProps> = ({
</div> </div>
<div className="flex justify-between pb-2"> <div className="flex justify-between pb-2">
<div className="text-th-fgd-4">Leverage</div> <div className="text-th-fgd-4">Leverage</div>
{/* <div className="text-th-fgd-1"> <div className="text-th-fgd-1">
{simulation.leverage.toFixed(2)}x {/* {simulation.leverage.toFixed(2)}x */}
</div> */} X.XXx
</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> </div>
{simulation.liabsVal > 0.05 ? ( {simulation.liabsVal > 0.05 ? (
<div className="flex justify-between pt-2"> <div className="flex justify-between pt-2">

4
hooks/useBalances.tsx
View File

@ -122,7 +122,7 @@ export function useBalances(): Balances[] {
.sub(quoteMeta.borrows) .sub(quoteMeta.borrows)
.sub(I80F48.fromNumber(quoteInOrders)) .sub(I80F48.fromNumber(quoteInOrders))
return baseBalances.concat([ return [
{ {
market: null, market: null,
key: `${quoteMeta.symbol}${quoteMeta.symbol}`, key: `${quoteMeta.symbol}${quoteMeta.symbol}`,
@ -133,5 +133,5 @@ export function useBalances(): Balances[] {
unsettled, unsettled,
net, net,
}, },
]) ].concat(baseBalances)
} }

1
hooks/useWallet.tsx
View File

@ -93,7 +93,6 @@ export default function useWallet() {
useEffect(() => { useEffect(() => {
if (!wallet) return if (!wallet) return
wallet.on('connect', async () => { wallet.on('connect', async () => {
console.log('connected wallet')
sleep(250) sleep(250)
await actions.fetchMangoAccounts() await actions.fetchMangoAccounts()
setMangoStore((state) => { setMangoStore((state) => {

14
yarn.lock
View File

@ -995,7 +995,7 @@
"@blockworks-foundation/mango-client@git+https://github.com/blockworks-foundation/mango-client-v3.git": "@blockworks-foundation/mango-client@git+https://github.com/blockworks-foundation/mango-client-v3.git":
version "3.0.1" 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: dependencies:
"@project-serum/serum" "^0.13.45" "@project-serum/serum" "^0.13.45"
"@project-serum/sol-wallet-adapter" "^0.2.0" "@project-serum/sol-wallet-adapter" "^0.2.0"
@ -1891,14 +1891,14 @@
integrity sha512-7eQ2xYLLI/LsicL2nejW9Wyko3lcpN6O/z0ZLHrEQsg280zIdCv1t/0m6UtBjUHokCGBQ3gYTbHzDkZ1xOBwwg== integrity sha512-7eQ2xYLLI/LsicL2nejW9Wyko3lcpN6O/z0ZLHrEQsg280zIdCv1t/0m6UtBjUHokCGBQ3gYTbHzDkZ1xOBwwg==
"@types/node@*": "@types/node@*":
version "16.4.1" version "16.4.2"
resolved "https://registry.yarnpkg.com/@types/node/-/node-16.4.1.tgz#9fad171a5b701613ee8a6f4ece3c88b1034b1b03" resolved "https://registry.yarnpkg.com/@types/node/-/node-16.4.2.tgz#0a95d7fd950cb1eaca0ce11031d72e8f680b775a"
integrity sha512-UW7cbLqf/Wu5XH2RKKY1cHwUNLicIDRLMraYKz+HHAerJ0ZffUEk+fMnd8qU2JaS6cAy0r8tsaf7yqHASf/Y0Q== integrity sha512-vxyhOzFCm+jC/T5KugbVsYy1DbQM0h3NCFUrVbu0+pYa/nr+heeucpqxpa8j4pUmIGLPYzboY9zIdOF0niFAjQ==
"@types/node@^12.12.54": "@types/node@^12.12.54":
version "12.20.16" version "12.20.17"
resolved "https://registry.yarnpkg.com/@types/node/-/node-12.20.16.tgz#1acf34f6456208f495dac0434dd540488d17f991" resolved "https://registry.yarnpkg.com/@types/node/-/node-12.20.17.tgz#ffd44c2801fc527a6fe6e86bc9b900261df1c87e"
integrity sha512-6CLxw83vQf6DKqXxMPwl8qpF8I7THFZuIwLt4TnNsumxkp1VsRZWT8txQxncT/Rl2UojTsFzWgDG4FRMwafrlA== integrity sha512-so8EHl4S6MmatPS0f9sE1ND94/ocbcEshW5OpyYthRqeRpiYyW2uXYTo/84kmfdfeNrDycARkvuiXl6nO40NGg==
"@types/node@^14.14.25": "@types/node@^14.14.25":
version "14.17.3" version "14.17.3"