diff --git a/components/FeeDiscountsTable.tsx b/components/FeeDiscountsTable.tsx index 2d567687..c550a8b7 100644 --- a/components/FeeDiscountsTable.tsx +++ b/components/FeeDiscountsTable.tsx @@ -61,9 +61,7 @@ const FeeDiscountsTable = () => { - ) : ( - - )} + ) : null} {showDeposit && ( diff --git a/components/FloatingElement.tsx b/components/FloatingElement.tsx index 5ec9b2c0..19728a52 100644 --- a/components/FloatingElement.tsx +++ b/components/FloatingElement.tsx @@ -1,13 +1,20 @@ -import React from 'react' +import React, { FunctionComponent } from 'react' -export default function FloatingElement({ shrink = false, children }) { +type FloatingElementProps = { + className?: string +} + +const FloatingElement: FunctionComponent = ({ + className, + children, +}) => { return (
- {children} +
{children}
) } + +export default FloatingElement diff --git a/components/MarginBalances.tsx b/components/MarginBalances.tsx index dd72059f..a37214a0 100644 --- a/components/MarginBalances.tsx +++ b/components/MarginBalances.tsx @@ -13,7 +13,7 @@ import DepositModal from './DepositModal' import WithdrawModal from './WithdrawModal' import Button from './Button' -export default function MarginStats() { +export default function MarginBalances() { const selectedMangoGroup = useMangoStore((s) => s.selectedMangoGroup.current) const selectedMarginAccount = useMangoStore( (s) => s.selectedMarginAccount.current diff --git a/components/MarginStats.tsx b/components/MarginInfo.tsx similarity index 77% rename from components/MarginStats.tsx rename to components/MarginInfo.tsx index ca26ea00..0b4d5395 100644 --- a/components/MarginStats.tsx +++ b/components/MarginInfo.tsx @@ -3,9 +3,8 @@ import { useEffect, useState } from 'react' import { nativeToUi } from '@blockworks-foundation/mango-client/lib/utils' import { groupBy } from '../utils' import useTradeHistory from '../hooks/useTradeHistory' -import useConnection from '../hooks/useConnection' +import useMangoStore from '../stores/useMangoStore' import FloatingElement from './FloatingElement' -import useMarginAccount from '../hooks/useMarginAccount' const calculatePNL = (tradeHistory, prices, mangoGroup) => { if (!tradeHistory.length) return '0.00' @@ -52,9 +51,12 @@ const calculatePNL = (tradeHistory, prices, mangoGroup) => { return total.toFixed(2) } -export default function MarginStats() { - const { connection } = useConnection() - const { marginAccount, mangoGroup } = useMarginAccount() +export default function MarginInfo() { + const connection = useMangoStore((s) => s.connection.current) + const selectedMarginAccount = useMangoStore( + (s) => s.selectedMarginAccount.current + ) + const selectedMangoGroup = useMangoStore((s) => s.selectedMangoGroup.current) const [mAccountInfo, setMAccountInfo] = useState< | { label: string @@ -65,24 +67,28 @@ export default function MarginStats() { }[] | null >(null) - const { tradeHistory } = useTradeHistory() + const tradeHistory = useTradeHistory() useEffect(() => { - if (mangoGroup) { - mangoGroup.getPrices(connection).then((prices) => { - const collateralRatio = marginAccount - ? marginAccount.getCollateralRatio(mangoGroup, prices) + if (selectedMangoGroup) { + selectedMangoGroup.getPrices(connection).then((prices) => { + const collateralRatio = selectedMarginAccount + ? selectedMarginAccount.getCollateralRatio(selectedMangoGroup, prices) : 200 - const accountEquity = marginAccount - ? marginAccount.computeValue(mangoGroup, prices) + const accountEquity = selectedMarginAccount + ? selectedMarginAccount.computeValue(selectedMangoGroup, prices) : 0 let leverage - if (marginAccount) { + if (selectedMarginAccount) { leverage = accountEquity ? ( 1 / - (marginAccount.getCollateralRatio(mangoGroup, prices) - 1) + (selectedMarginAccount.getCollateralRatio( + selectedMangoGroup, + prices + ) - + 1) ).toFixed(2) : '∞' } else { @@ -106,7 +112,7 @@ export default function MarginStats() { }, { label: 'Total PNL', - value: calculatePNL(tradeHistory, prices, mangoGroup), + value: calculatePNL(tradeHistory, prices, selectedMangoGroup), unit: '', currency: '$', desc: @@ -123,7 +129,7 @@ export default function MarginStats() { }, { label: 'Maint. Collateral Ratio', - value: (mangoGroup.maintCollRatio * 100).toFixed(0), + value: (selectedMangoGroup.maintCollRatio * 100).toFixed(0), unit: '%', currency: '', desc: @@ -131,7 +137,7 @@ export default function MarginStats() { }, { label: 'Initial Collateral Ratio', - value: (mangoGroup.initCollRatio * 100).toFixed(0), + value: (selectedMangoGroup.initCollRatio * 100).toFixed(0), currency: '', unit: '%', desc: 'The collateral ratio required to open a new margin position', @@ -140,7 +146,7 @@ export default function MarginStats() { }) } // eslint-disable-next-line - }, [marginAccount, mangoGroup]) + }, [selectedMarginAccount, selectedMangoGroup]) return ( <> diff --git a/components/TopBar.tsx b/components/TopBar.tsx index 2fbe97be..6b3124c0 100644 --- a/components/TopBar.tsx +++ b/components/TopBar.tsx @@ -13,7 +13,6 @@ import MenuItem from './MenuItem' import ThemeSwitch from './ThemeSwitch' import WalletIcon from './WalletIcon' import UiLock from './UiLock' -import DropMenu from './DropMenu' import { useRouter } from 'next/router' import WalletSelect from './WalletSelect' import useMangoStore from '../stores/useMangoStore' diff --git a/components/TradeHistoryTable.tsx b/components/TradeHistoryTable.tsx index 154a2c9f..17faa0e1 100644 --- a/components/TradeHistoryTable.tsx +++ b/components/TradeHistoryTable.tsx @@ -1,7 +1,7 @@ import useTradeHistory from '../hooks/useTradeHistory' const TradeHistoryTable = () => { - const { tradeHistory } = useTradeHistory() + const tradeHistory = useTradeHistory() return (
@@ -61,7 +61,7 @@ const TradeHistoryTable = () => { {tradeHistory.map((trade, index) => ( {
-
- +
+
diff --git a/components/UiLock.tsx b/components/UiLock.tsx index d356192a..6fb73172 100644 --- a/components/UiLock.tsx +++ b/components/UiLock.tsx @@ -15,12 +15,12 @@ const UiLock = ({ className = '' }) => {
diff --git a/hooks/useConnection.tsx b/hooks/useConnection.tsx index 4b872d67..80116683 100644 --- a/hooks/useConnection.tsx +++ b/hooks/useConnection.tsx @@ -4,9 +4,7 @@ import { IDS } from '@blockworks-foundation/mango-client' import useMangoStore from '../stores/useMangoStore' const useConnection = () => { - // console.log('loading useConnection') - - const setSolanaStore = useMangoStore((s) => s.set) + const setMangoStore = useMangoStore((s) => s.set) const { cluster, current: connection, endpoint } = useMangoStore( (s) => s.connection ) @@ -16,17 +14,17 @@ const useConnection = () => { ]) useEffect(() => { - // @ts-ignore - if (connection && endpoint === connection._rpcEndpoint) return + if (connection && endpoint === connection['_rpcEndpoint']) return console.log('setting new connection') const newConnection = new Connection(endpoint, 'recent') - setSolanaStore((state) => { + setMangoStore((state) => { state.connection.current = newConnection }) }, [endpoint]) useEffect(() => { + if (connection && endpoint === connection['_rpcEndpoint']) return const id = connection.onAccountChange(new Account().publicKey, () => {}) return () => { connection.removeAccountChangeListener(id) @@ -34,6 +32,7 @@ const useConnection = () => { }, [endpoint]) useEffect(() => { + if (connection && endpoint === connection['_rpcEndpoint']) return const id = connection.onSlotChange(() => null) return () => { connection.removeSlotChangeListener(id) diff --git a/hooks/useHydrateStore.tsx b/hooks/useHydrateStore.tsx index ced1708d..5246eef5 100644 --- a/hooks/useHydrateStore.tsx +++ b/hooks/useHydrateStore.tsx @@ -18,9 +18,14 @@ const useHydrateStore = () => { const setSerumStore = useSerumStore((s) => s.set) const selectedMarketAddress = useMangoStore(marketAddressSelector) const marketsForSelectedMangoGroup = useMangoStore(mangoGroupMarketsSelector) + const actions = useMangoStore((s) => s.actions) const { connection, dexProgramId } = useConnection() const { marketList } = useMarketList() + useEffect(() => { + actions.fetchMangoGroup() + }, [actions]) + // load selected market useEffect(() => { Market.load( @@ -76,7 +81,7 @@ const useHydrateStore = () => { }) }, [marketList]) - // hydrate orderbook for all markets in mango group + // hydrate orderbook with all markets in mango group useEffect(() => { const subscriptionIds = Object.entries(marketsForSelectedMangoGroup).map( ([, market]) => { @@ -131,6 +136,7 @@ const useHydrateStore = () => { } }, [marketsForSelectedMangoGroup]) + // fetch filled trades for selected market useInterval(() => { async function fetchFills() { const market = useMangoStore.getState().market.current diff --git a/hooks/useMarginAccount.tsx b/hooks/useMarginAccount.tsx index 328114ba..7de96ee8 100644 --- a/hooks/useMarginAccount.tsx +++ b/hooks/useMarginAccount.tsx @@ -23,12 +23,6 @@ const useMarginAccount = () => { } }, [connected, actions]) - useEffect(() => { - if (selectedMarginAccount) { - actions.fetchTradeHistory() - } - }, [selectedMarginAccount]) - useInterval(() => { if (connected) { actions.fetchMarginAccounts() diff --git a/hooks/useTradeHistory.tsx b/hooks/useTradeHistory.tsx index de973f66..df4911e5 100644 --- a/hooks/useTradeHistory.tsx +++ b/hooks/useTradeHistory.tsx @@ -1,4 +1,4 @@ -import { useState, useEffect } from 'react' +import { useEffect, useRef } from 'react' import useMangoStore from '../stores/useMangoStore' import useSerumStore from '../stores/useSerumStore' import useMarket from './useMarket' @@ -19,7 +19,7 @@ const formatTradeHistory = (newTradeHistory) => { marketName: trade.marketName ? trade.marketName : `${trade.baseCurrency}/${trade.quoteCurrency}`, - key: `${trade.orderId}${trade.side}${trade.uuid}`, + key: `${trade.orderId}-${trade.uuid}`, liquidity: trade.maker || trade?.eventFlags?.maker ? 'Maker' : 'Taker', } }) @@ -27,7 +27,17 @@ const formatTradeHistory = (newTradeHistory) => { } const useFills = () => { - const fills = useSerumStore((s) => s.fills) + const fillsRef = useRef(useSerumStore.getState().fills) + const fills = fillsRef.current + useEffect( + () => + useSerumStore.subscribe( + (fills) => (fillsRef.current = fills as []), + (state) => state.fills + ), + [] + ) + const { market, marketName } = useMarket() const marginAccount = useMangoStore((s) => s.selectedMarginAccount.current) const selectedMangoGroup = useMangoStore((s) => s.selectedMangoGroup.current) @@ -44,7 +54,6 @@ const useFills = () => { export const useTradeHistory = () => { const eventQueueFills = useFills() - const [allTrades, setAllTrades] = useState([]) const tradeHistory = useMangoStore((s) => s.tradeHistory) const marginAccount = useMangoStore((s) => s.selectedMarginAccount.current) const actions = useMangoStore((s) => s.actions) @@ -55,22 +64,19 @@ export const useTradeHistory = () => { } }, 12000) - useEffect(() => { - if (eventQueueFills && eventQueueFills.length > 0) { - const newFills = eventQueueFills.filter( - (fill) => - !tradeHistory.find((t) => t.orderId === fill.orderId.toString()) - ) - const newTradeHistory = [...newFills, ...tradeHistory] - if (newFills.length > 0 && newTradeHistory.length !== allTrades.length) { - const formattedTradeHistory = formatTradeHistory(newTradeHistory) - - setAllTrades(formattedTradeHistory) - } + const allTrades = [] + if (eventQueueFills && eventQueueFills.length > 0) { + const newFills = eventQueueFills.filter( + (fill) => + !tradeHistory.flat().find((t) => t.orderId === fill.orderId.toString()) + ) + const newTradeHistory = [...newFills, ...tradeHistory] + if (newFills.length > 0 && newTradeHistory.length !== allTrades.length) { + return formatTradeHistory(newTradeHistory) } - }, [tradeHistory, eventQueueFills]) + } - return { tradeHistory: allTrades } + return tradeHistory.flat() } export default useTradeHistory diff --git a/pages/stats.tsx b/pages/stats.tsx index 345773b4..5241db3e 100644 --- a/pages/stats.tsx +++ b/pages/stats.tsx @@ -191,7 +191,7 @@ export default function StatsPage() {
- +

Mango Stats

@@ -253,7 +253,7 @@ export default function StatsPage() {
{selectedAsset ? ( - +
Historical