From 00a85cded2817658b1cc64b127623e54b5101d0c Mon Sep 17 00:00:00 2001 From: Tyler Shipe Date: Mon, 16 Aug 2021 13:00:43 -0400 Subject: [PATCH] Merge in styling changes --- .../{MarginInfo.tsx => AccountInfo.tsx} | 0 components/DepositModal.tsx | 212 +----------------- components/MarketPosition.tsx | 70 +++--- components/Tooltip.tsx | 21 +- components/TradePageGrid.tsx | 20 +- components/account-page/AccountOverview.tsx | 14 +- 6 files changed, 87 insertions(+), 250 deletions(-) rename components/{MarginInfo.tsx => AccountInfo.tsx} (100%) diff --git a/components/MarginInfo.tsx b/components/AccountInfo.tsx similarity index 100% rename from components/MarginInfo.tsx rename to components/AccountInfo.tsx diff --git a/components/DepositModal.tsx b/components/DepositModal.tsx index f915084e..e4f36adb 100644 --- a/components/DepositModal.tsx +++ b/components/DepositModal.tsx @@ -1,14 +1,6 @@ import React, { FunctionComponent, useEffect, useState } from 'react' -import { Disclosure } from '@headlessui/react' -import { - ExclamationCircleIcon, - InformationCircleIcon, -} from '@heroicons/react/outline' -import { - ChevronLeftIcon, - ChevronDownIcon, - ChevronUpIcon, -} from '@heroicons/react/solid' +import { ExclamationCircleIcon } from '@heroicons/react/outline' +import { ChevronLeftIcon } from '@heroicons/react/solid' import Modal from './Modal' import Input from './Input' import AccountSelect from './AccountSelect' @@ -16,7 +8,6 @@ import { ElementTitle } from './styles' import useMangoStore from '../stores/useMangoStore' import Loading from './Loading' import Button, { LinkButton } from './Button' -import Tooltip from './Tooltip' import Slider from './Slider' import InlineNotification from './InlineNotification' import { deposit } from '../utils/mango' @@ -35,13 +26,9 @@ const DepositModal: FunctionComponent = ({ settleDeficit, tokenSymbol = '', }) => { - // const groupConfig = useMangoGroupConfig() - // const tokenSymbols = useMemo(() => groupConfig.tokens.map(t => t.symbol), [groupConfig]); - const [inputAmount, setInputAmount] = useState(settleDeficit || '') const [submitting, setSubmitting] = useState(false) - const [simulation /*setSimulation*/] = useState(null) - const [showSimulation, setShowSimulation] = useState(false) + const [showConfirm, setShowConfirm] = useState(false) const [invalidAmountMessage, setInvalidAmountMessage] = useState('') const [sliderPercentage, setSliderPercentage] = useState(0) const [maxButtonTransition, setMaxButtonTransition] = useState(false) @@ -50,9 +37,6 @@ const DepositModal: FunctionComponent = ({ const setMangoStore = useMangoStore((s) => s.set) const [selectedAccount, setSelectedAccount] = useState(walletTokens[0]) - // const prices = [] //useMangoStore((s) => s.selectedMangoGroup.prices) - // const selectedMangoGroup = useMangoStore((s) => s.selectedMangoGroup.current) - useEffect(() => { if (tokenSymbol) { const symbolAccount = walletTokens.find( @@ -79,54 +63,6 @@ const DepositModal: FunctionComponent = ({ onClose() } - /* TODO: simulation - useEffect(() => { - if (!selectedMangoGroup || !selectedMangoAccount || !selectedAccount) - return - - const mintDecimals = selectedMangoGroup.mintDecimals[tokenIndex] - const groupIndex = selectedMangoGroup.indexes[tokenIndex] - const deposits = selectedMangoAccount.getUiDeposit( - selectedMangoGroup, - tokenIndex - ) - - // simulate change to deposits based on input amount - const newDeposit = Math.max(0, +inputAmount + +deposits) - - // clone MangoAccount and arrays to not modify selectedMangoAccount - const simulation = new MangoAccount(null, selectedMangoAccount) - simulation.deposits = [...selectedMangoAccount.deposits] - simulation.borrows = [...selectedMangoAccount.borrows] - - // update with simulated values - simulation.deposits[tokenIndex] = - uiToNative(newDeposit, mintDecimals).toNumber() / groupIndex.deposit - - const equity = simulation.computeValue(selectedMangoGroup, prices) - const assetsVal = simulation.getAssetsVal(selectedMangoGroup, prices) - const liabsVal = simulation.getLiabsVal(selectedMangoGroup, prices) - const collateralRatio = simulation.getCollateralRatio( - selectedMangoGroup, - prices - ) - const leverage = 1 / Math.max(0, collateralRatio - 1) - setSimulation({ - equity, - assetsVal, - liabsVal, - collateralRatio, - leverage, - }) - }, [ - inputAmount, - prices, - tokenIndex, - selectedMangoAccount, - selectedMangoGroup, - ]) - */ - const handleAccountSelect = (account) => { setInputAmount('') setSliderPercentage(0) @@ -173,38 +109,6 @@ const DepositModal: FunctionComponent = ({ }) } - const renderAccountRiskStatus = ( - collateralRatio: number, - isRiskLevel?: boolean, - isStatusIcon?: boolean - ) => { - if (collateralRatio < 1.25) { - return isRiskLevel ? ( -
High
- ) : isStatusIcon ? ( - 'bg-th-red' - ) : ( - 'border-th-red text-th-red' - ) - } else if (collateralRatio > 1.25 && collateralRatio < 1.5) { - return isRiskLevel ? ( -
Moderate
- ) : isStatusIcon ? ( - 'bg-th-orange' - ) : ( - 'border-th-orange text-th-orange' - ) - } else { - return isRiskLevel ? ( -
Low
- ) : isStatusIcon ? ( - 'bg-th-green' - ) : ( - 'border-th-green text-th-green' - ) - } - } - const validateAmountInput = (amount) => { if (Number(amount) <= 0) { setInvalidAmountMessage('Enter an amount to deposit') @@ -261,7 +165,7 @@ const DepositModal: FunctionComponent = ({ return ( - {!showSimulation ? ( + {!showConfirm ? ( <> Deposit Funds @@ -306,20 +210,6 @@ const DepositModal: FunctionComponent = ({ onChange={(e) => onChangeAmountInput(e.target.value)} suffix={selectedAccount?.config.symbol} /> - {/* {simulation ? ( - - - {simulation?.leverage < 5 - ? simulation?.leverage.toFixed(2) - : '>5'} - x - - - ) : null} */} {invalidAmountMessage ? (
@@ -338,9 +228,10 @@ const DepositModal: FunctionComponent = ({
- {simulation ? ( - - {({ open }) => ( - <> - -
-
- - - - - Account Health Check - - - -
- {open ? ( - - ) : ( - - )} -
- - -
-
-
Account Value
-
- ${simulation?.assetsVal.toFixed(2)} -
-
-
-
Account Risk
-
- {renderAccountRiskStatus( - simulation?.collateralRatio, - true - )} -
-
-
-
Leverage
-
- {simulation?.leverage.toFixed(2)}x -
-
-
-
Collateral Ratio
-
- {simulation?.collateralRatio * 100 < 200 - ? Math.floor(simulation?.collateralRatio * 100) - : '>200'} - % -
-
- {simulation?.liabsVal > 0.05 ? ( -
-
Borrow Value
-
- ${simulation?.liabsVal.toFixed(2)} -
-
- ) : null} -
- - - )} - - ) : null}
-
- Unsettled PnL -
+ + Settling will update your USDC balance to reflect the PnL + amount.{' '} + + Learn more + +
+ } + > + + Unsettled PnL + +
{perpAccount ? formatUsdValue( @@ -174,14 +190,14 @@ export default function MarketPosition() { onClick={() => handleSettlePnl(selectedMarket, perpAccount)} className="ml-2 text-th-primary text-xs disabled:cursor-not-allowed disabled:opacity-60 disabled:hover:underline" disabled={ - perpAccount && - +nativeI80F48ToUi( - perpAccount.getPnl( - mangoGroup.perpMarkets[marketIndex], - mangoGroupCache.priceCache[marketIndex].price - ), - marketConfig.quoteDecimals - ) === 0 + perpAccount + ? perpAccount + .getPnl( + mangoGroup.perpMarkets[marketIndex], + mangoGroupCache.priceCache[marketIndex].price + ) + .eq(ZERO_I80F48) + : true } > Settle @@ -262,22 +278,22 @@ export default function MarketPosition() { > Interest Rates
+
+ + {i80f48ToPercent( + mangoGroup.getDepositRate(tokenIndex) + ).toFixed(2)} + % + + {' / '} + + {i80f48ToPercent( + mangoGroup.getBorrowRate(tokenIndex) + ).toFixed(2)} + % + +
-
- - {i80f48ToPercent( - mangoGroup.getDepositRate(tokenIndex) - ).toFixed(2)} - % - - {' / '} - - {i80f48ToPercent( - mangoGroup.getBorrowRate(tokenIndex) - ).toFixed(2)} - % - -
) diff --git a/components/Tooltip.tsx b/components/Tooltip.tsx index 4d8e4488..c77af3f4 100644 --- a/components/Tooltip.tsx +++ b/components/Tooltip.tsx @@ -1,17 +1,14 @@ -import React, { FunctionComponent, ReactNode } from 'react' +import React, { ReactNode } from 'react' import Tippy from '@tippyjs/react' import 'tippy.js/animations/scale.css' type TooltipProps = { content: ReactNode className?: string + children?: ReactNode } -const Tooltip: FunctionComponent = ({ - children, - content, - className, -}) => { +const Tooltip = ({ children, content, className }: TooltipProps) => { return ( = ({ ) } +const Content = ({ className, children }) => { + return ( +
+ {children} +
+ ) +} + +Tooltip.Content = Content + export default Tooltip diff --git a/components/TradePageGrid.tsx b/components/TradePageGrid.tsx index a0b5a731..86ae2f7f 100644 --- a/components/TradePageGrid.tsx +++ b/components/TradePageGrid.tsx @@ -8,7 +8,7 @@ const TVChartContainer = dynamic( import { useEffect, useState } from 'react' import FloatingElement from '../components/FloatingElement' import Orderbook from '../components/Orderbook' -import MarginInfo from './MarginInfo' +import AccountInfo from './AccountInfo' import MarketPosition from './MarketPosition' import TradeForm from './TradeForm' import UserInfo from './UserInfo' @@ -26,12 +26,12 @@ export const defaultLayouts = { { i: 'marketTrades', x: 6, y: 1, w: 3, h: 13 }, { i: 'marketPosition', x: 9, y: 3, w: 3, h: 13 }, { i: 'userInfo', x: 0, y: 2, w: 9, h: 19 }, - { i: 'marginInfo', x: 9, y: 4, w: 3, h: 15 }, + { i: 'accountInfo', x: 9, y: 4, w: 3, h: 15 }, ], lg: [ { i: 'tvChart', x: 0, y: 0, w: 8, h: 28, minW: 2 }, { i: 'marketPosition', x: 8, y: 0, w: 4, h: 13, minW: 2 }, - { i: 'marginInfo', x: 8, y: 1, w: 4, h: 15, minW: 2 }, + { i: 'accountInfo', x: 8, y: 1, w: 4, h: 15, 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 }, @@ -40,7 +40,7 @@ export const defaultLayouts = { md: [ { i: 'tvChart', x: 0, y: 0, w: 8, h: 28, minW: 2 }, { i: 'marketPosition', x: 8, y: 0, w: 4, h: 13, minW: 2 }, - { i: 'marginInfo', x: 8, y: 1, w: 4, h: 15, minW: 2 }, + { i: 'accountInfo', x: 8, y: 1, w: 4, h: 15, 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 }, @@ -49,7 +49,7 @@ export const defaultLayouts = { sm: [ { i: 'tvChart', x: 0, y: 0, w: 12, h: 25, minW: 6 }, { i: 'marketPosition', x: 0, y: 1, w: 6, h: 15, minW: 2 }, - { i: 'marginInfo', x: 6, y: 1, w: 6, h: 15, minW: 2 }, + { i: 'accountInfo', x: 6, y: 1, w: 6, h: 15, 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 }, { i: 'marketTrades', x: 6, y: 3, w: 6, h: 17, minW: 2 }, @@ -58,7 +58,7 @@ export const defaultLayouts = { xs: [ { i: 'tvChart', x: 0, y: 0, w: 0, h: 0, minW: 6 }, { i: 'marketPosition', x: 0, y: 1, w: 6, h: 13, minW: 2 }, - { i: 'marginInfo', x: 0, y: 2, w: 6, h: 15, minW: 2 }, + { i: 'accountInfo', x: 0, y: 2, w: 6, h: 15, 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 }, { i: 'marketTrades', x: 0, y: 5, w: 6, h: 17, minW: 2 }, @@ -66,7 +66,7 @@ export const defaultLayouts = { ], } -export const GRID_LAYOUT_KEY = 'mangoSavedLayouts-3.0.4' +export const GRID_LAYOUT_KEY = 'mangoSavedLayouts-3.0.6' const TradePageGrid = () => { const { uiLocked } = useMangoStore((s) => s.settings) @@ -84,7 +84,7 @@ const TradePageGrid = () => { const [mounted, setMounted] = useState(false) useEffect(() => setMounted(true), []) if (!mounted) return null - // TODO enable savedLayouts + return ( {
-
- +
+
diff --git a/components/account-page/AccountOverview.tsx b/components/account-page/AccountOverview.tsx index 2326d000..db7ef940 100644 --- a/components/account-page/AccountOverview.tsx +++ b/components/account-page/AccountOverview.tsx @@ -4,7 +4,8 @@ import styled from '@emotion/styled' import { Menu } from '@headlessui/react' import Link from 'next/link' import { - ChartBarIcon, + // ChartBarIcon, + ScaleIcon, CurrencyDollarIcon, ExclamationIcon, DotsHorizontalIcon, @@ -255,7 +256,7 @@ export default function AccountOverview() {
-
+ {/*
PNL
@@ -265,6 +266,15 @@ export default function AccountOverview() { )}
+
*/} +
+
Leverage
+
+ + + {mangoAccount.getLeverage(mangoGroup, mangoCache).toFixed(2)}x + +
Health Ratio