use imported mangoClient in trade form; display userInfo component

2021-06-18 11:17:49 -04:00 · 2021-06-18 11:17:49 -04:00 · 3df663614a
parent 370d25f7bd
commit 3df663614a
7 changed files with 129 additions and 76 deletions
--- a/components/OpenOrdersTable.tsx
+++ b/components/OpenOrdersTable.tsx
@ -3,11 +3,11 @@ import Link from 'next/link'
 import { ArrowSmDownIcon } from '@heroicons/react/solid'
 import { useRouter } from 'next/router'
 import { useOpenOrders } from '../hooks/useOpenOrders'
-import { cancelOrderAndSettle } from '../utils/mango'
+// import { cancelOrderAndSettle } from '../utils/mango'
 import Button, { LinkButton } from './Button'
 import Loading from './Loading'
-import { PublicKey } from '@solana/web3.js'
-import useConnection from '../hooks/useConnection'
+// import { PublicKey } from '@solana/web3.js'
+// import useConnection from '../hooks/useConnection'
 import useMangoStore from '../stores/useMangoStore'
 import { notify } from '../utils/notifications'
 import { Table, Thead, Tbody, Tr, Th, Td } from 'react-super-responsive-table'
@ -19,11 +19,11 @@ const OpenOrdersTable = () => {
  const openOrders = useOpenOrders()
  const { items, requestSort, sortConfig } = useSortableData(openOrders)
  const [cancelId, setCancelId] = useState(null)
-  const { connection, programId } = useConnection()
+  // const { connection, programId } = useConnection()
  const actions = useMangoStore((s) => s.actions)

  const handleCancelOrder = async (order) => {
-    const wallet = useMangoStore.getState().wallet.current
+    // const wallet = useMangoStore.getState().wallet.current
    const selectedMangoGroup =
      useMangoStore.getState().selectedMangoGroup.current
    const selectedMarginAccount =
@ -31,15 +31,15 @@ const OpenOrdersTable = () => {
    setCancelId(order?.orderId)
    try {
      if (!selectedMangoGroup || !selectedMarginAccount) return
-      await cancelOrderAndSettle(
-        connection,
-        new PublicKey(programId),
-        selectedMangoGroup,
-        selectedMarginAccount,
-        wallet,
-        order.market,
-        order
-      )
+      // await cancelOrderAndSettle(
+      //   connection,
+      //   new PublicKey(programId),
+      //   selectedMangoGroup,
+      //   selectedMarginAccount,
+      //   wallet,
+      //   order.market,
+      //   order
+      // )
      actions.fetchMarginAccounts()
    } catch (e) {
      notify({
--- a/components/TradeForm.tsx
+++ b/components/TradeForm.tsx
@ -4,19 +4,26 @@ import useMarket from '../hooks/useMarket'
 import useIpAddress from '../hooks/useIpAddress'
 import useConnection from '../hooks/useConnection'
 import { PublicKey } from '@solana/web3.js'
-import { getTokenBySymbol, IDS, PerpMarket } from '@blockworks-foundation/mango-client'
+import {
+  getTokenBySymbol,
+  IDS,
+  PerpMarket,
+} from '@blockworks-foundation/mango-client'
 import { notify } from '../utils/notifications'
 // import { placeAndSettle } from '../utils/mango'
 import { calculateMarketPrice, getDecimalCount } from '../utils'
 import FloatingElement from './FloatingElement'
 import { floorToDecimal } from '../utils/index'
-import useMangoStore from '../stores/useMangoStore'
+import useMangoStore, { mangoClient } from '../stores/useMangoStore'
 import Button from './Button'
 import TradeType from './TradeType'
 import Input from './Input'
 import Switch from './Switch'
 import { Market } from '@project-serum/serum'
-import { I80F48, NEG_ONE_I80F48 } from '@blockworks-foundation/mango-client/lib/src/fixednum'
+import {
+  I80F48,
+  NEG_ONE_I80F48,
+} from '@blockworks-foundation/mango-client/lib/src/fixednum'

 const StyledRightInput = styled(Input)`
  border-left: 1px solid transparent;
@ -27,14 +34,14 @@ export default function TradeForm() {
  const connected = useMangoStore((s) => s.wallet.connected)
  const actions = useMangoStore((s) => s.actions)
  const { connection, cluster } = useConnection()
-  const groupConfig = useMangoStore((s) => s.selectedMangoGroup.config);
-  const marketConfig = useMangoStore((s) => s.selectedMarket.config);
-  const market = useMangoStore((s) => s.selectedMarket.current);
+  const groupConfig = useMangoStore((s) => s.selectedMangoGroup.config)
+  const marketConfig = useMangoStore((s) => s.selectedMarket.config)
+  const market = useMangoStore((s) => s.selectedMarket.current)
  const { side, baseSize, quoteSize, price, tradeType } = useMangoStore(
    (s) => s.tradeForm
  )
  let { ipAllowed } = useIpAddress()
-  ipAllowed = true;
+  ipAllowed = true
  const [postOnly, setPostOnly] = useState(false)
  const [ioc, setIoc] = useState(false)
  const [submitting, setSubmitting] = useState(false)
@ -49,7 +56,7 @@ export default function TradeForm() {
      ),
    []
  )
-  console.log({orderbook, orderBookRef});
+  console.log({ orderbook, orderBookRef })

  const setSide = (side) =>
    set((s) => {
@ -98,31 +105,43 @@ export default function TradeForm() {
      ),
    []
  )
-  let minOrderSize = "0";
+  let minOrderSize = '0'
  if (market instanceof Market && market.minOrderSize) {
-    minOrderSize = market.minOrderSize.toString();
+    minOrderSize = market.minOrderSize.toString()
  } else if (market instanceof PerpMarket) {
-    const baseDecimals = getTokenBySymbol(groupConfig, marketConfig.base_symbol).decimals;
-    const baseUnit = I80F48.fromNumber(Math.pow(10, baseDecimals));
-    const baseLotSize = I80F48.fromI64(market.contractSize);
-    minOrderSize = baseLotSize.div(baseUnit).toString();
+    const baseDecimals = getTokenBySymbol(
+      groupConfig,
+      marketConfig.base_symbol
+    ).decimals
+    const baseUnit = I80F48.fromNumber(Math.pow(10, baseDecimals))
+    const baseLotSize = I80F48.fromI64(market.contractSize)
+    minOrderSize = baseLotSize.div(baseUnit).toString()
  }
-  const sizeDecimalCount = getDecimalCount(minOrderSize);
+  const sizeDecimalCount = getDecimalCount(minOrderSize)

-  let tickSize = 1;
+  let tickSize = 1
  if (market instanceof Market) {
-    tickSize = market.tickSize;
+    tickSize = market.tickSize
  } else if (market instanceof PerpMarket) {
-    const baseDecimals = getTokenBySymbol(groupConfig, marketConfig.base_symbol).decimals;
-    const baseUnit = I80F48.fromNumber(Math.pow(10, baseDecimals));
-    const baseLotSize = I80F48.fromI64(market.contractSize);
-    const quoteDecimals = getTokenBySymbol(groupConfig, groupConfig.quote_symbol).decimals;
-    const quoteUnit = I80F48.fromNumber(Math.pow(10, quoteDecimals));
-    const quoteLotSize = I80F48.fromI64(market.quoteLotSize);
-    tickSize = quoteLotSize.mul(baseUnit).div(baseLotSize).div(quoteUnit).toNumber();
+    const baseDecimals = getTokenBySymbol(
+      groupConfig,
+      marketConfig.base_symbol
+    ).decimals
+    const baseUnit = I80F48.fromNumber(Math.pow(10, baseDecimals))
+    const baseLotSize = I80F48.fromI64(market.contractSize)
+    const quoteDecimals = getTokenBySymbol(
+      groupConfig,
+      groupConfig.quote_symbol
+    ).decimals
+    const quoteUnit = I80F48.fromNumber(Math.pow(10, quoteDecimals))
+    const quoteLotSize = I80F48.fromI64(market.quoteLotSize)
+    tickSize = quoteLotSize
+      .mul(baseUnit)
+      .div(baseLotSize)
+      .div(quoteUnit)
+      .toNumber()
  }

-  
  const onSetPrice = (price: number | '') => {
    setPrice(price)
    if (!price) return
@ -179,8 +198,6 @@ export default function TradeForm() {
  }

  async function onSubmit() {
-
-
    if (!price && tradeType === 'Limit') {
      console.warn('Missing price')
      notify({
@ -197,7 +214,6 @@ export default function TradeForm() {
      return
    }

-    const client = useMangoStore.getState().mangoClient
    const marginAccount = useMangoStore.getState().selectedMarginAccount.current
    const mangoGroup = useMangoStore.getState().selectedMangoGroup.current
    const wallet = useMangoStore.getState().wallet.current
@ -206,20 +222,30 @@ export default function TradeForm() {
    setSubmitting(true)

    try {
-      let orderPrice = Number(price);
+      let orderPrice = Number(price)
      if (tradeType === 'Market') {
        orderPrice = calculateMarketPrice(orderbook, baseSize, side)
      }

-      console.log('place', orderPrice, baseSize);
+      console.log('place', orderPrice, baseSize)

-      const orderType = ioc ? 'ioc' : postOnly ? 'postOnly' : 'limit';
+      const orderType = ioc ? 'ioc' : postOnly ? 'postOnly' : 'limit'
      if (market instanceof Market) {
-        client.placeSpotOrder(mangoGroup, marginAccount, mangoGroup.merpsCache, market, wallet, side, orderPrice, baseSize, orderType)
+        mangoClient.placeSpotOrder(
+          mangoGroup,
+          marginAccount,
+          mangoGroup.merpsCache,
+          market,
+          wallet,
+          side,
+          orderPrice,
+          baseSize,
+          orderType
+        )
      } else {
        //
      }
-      
+
      console.log('Successfully placed trade!')

      setPrice('')
@ -243,9 +269,9 @@ export default function TradeForm() {
      setIoc(true)
      setPrice('')
    } else {
-      const priceOnBook = side === 'buy' ? orderbook?.asks : orderbook?.bids;
+      const priceOnBook = side === 'buy' ? orderbook?.asks : orderbook?.bids
      if (priceOnBook && priceOnBook.length > 0 && priceOnBook[0].length > 0) {
-        setPrice(priceOnBook[0][0]);
+        setPrice(priceOnBook[0][0])
      }
      setIoc(false)
    }
@ -254,7 +280,13 @@ export default function TradeForm() {
  const disabledTradeButton =
    (!price && tradeType === 'Limit') || !baseSize || !connected || submitting

-    console.log('dis', (!price && tradeType === 'Limit'), !baseSize, !connected, submitting);
+  console.log(
+    'dis',
+    !price && tradeType === 'Limit',
+    !baseSize,
+    !connected,
+    submitting
+  )

  return (
    <FloatingElement>
--- a/components/TradePageGrid.tsx
+++ b/components/TradePageGrid.tsx
@ -11,7 +11,7 @@ import Orderbook from '../components/Orderbook'
 // import MarginInfo from './MarginInfo'
 import MarginBalances from './MarginBalances'
 import TradeForm from './TradeForm'
-// import UserInfo from './UserInfo'
+import UserInfo from './UserInfo'
 // import RecentMarketTrades from './RecentMarketTrades'
 import useMangoStore from '../stores/useMangoStore'
 import useLocalStorageState from '../hooks/useLocalStorageState'
@ -104,7 +104,9 @@ const TradePageGrid = () => {
      <div key="orderbook">{<Orderbook />}</div>
      <div key="tradeForm">{<TradeForm />}</div>
      <div key="marginInfo">{/* <MarginInfo /> */}</div>
-      <div key="userInfo">{/* <UserInfo /> */}</div>
+      <div key="userInfo">
+        <UserInfo />
+      </div>
      <div key="balanceInfo">
        <MarginBalances />
      </div>
--- a/components/UserInfo.tsx
+++ b/components/UserInfo.tsx
@ -1,11 +1,12 @@
 import { useState } from 'react'
 import FloatingElement from './FloatingElement'
 import OpenOrdersTable from './OpenOrdersTable'
-import BalancesTable from './BalancesTable'
-import TradeHistoryTable from './TradeHistoryTable'
-import FeeDiscountsTable from './FeeDiscountsTable'
+// import BalancesTable from './BalancesTable'
+// import TradeHistoryTable from './TradeHistoryTable'
+// import FeeDiscountsTable from './FeeDiscountsTable'

-const TABS = ['Open Orders', 'Balances', 'Trade History', 'Fee Discounts']
+// const TABS = ['Open Orders', 'Balances', 'Trade History', 'Fee Discounts']
+const TABS = ['Open Orders']

 const UserInfoTabs = ({ activeTab, setActiveTab }) => {
  const handleTabChange = (tabName) => {
@ -60,12 +61,12 @@ const TabContent = ({ activeTab }) => {
  switch (activeTab) {
    case 'Orders':
      return <OpenOrdersTable />
-    case 'Balances':
-      return <BalancesTable />
-    case 'Trade History':
-      return <TradeHistoryTable />
-    case 'Fee Discounts':
-      return <FeeDiscountsTable />
+    // case 'Balances':
+    //   return <BalancesTable />
+    // case 'Trade History':
+    //   return <TradeHistoryTable />
+    // case 'Fee Discounts':
+    //   return <FeeDiscountsTable />
    default:
      return <OpenOrdersTable />
  }
--- a/hooks/useHydrateStore.tsx
+++ b/hooks/useHydrateStore.tsx
@ -3,7 +3,7 @@ import { Market } from '@project-serum/serum'
 // import { AccountInfo, PublicKey } from '@solana/web3.js'
 import { PublicKey } from '@solana/web3.js'
 import useConnection from './useConnection'
-import useMangoStore from '../stores/useMangoStore'
+import useMangoStore, { mangoClient } from '../stores/useMangoStore'
 // import useSerumStore from '../stores/useSerumStore'
 // import useMarketList from './useMarketList'
 import useInterval from './useInterval'
@ -12,13 +12,11 @@ import { PerpMarket } from '@blockworks-foundation/mango-client'
 const SECONDS = 1000
 // const _SLOW_REFRESH_INTERVAL = 60 * SECONDS

-
 const useHydrateStore = () => {
  const setMangoStore = useMangoStore((s) => s.set)
  const actions = useMangoStore((s) => s.actions)
  const groupConfig = useMangoStore((s) => s.selectedMangoGroup.config)
  const marketConfig = useMangoStore((s) => s.selectedMarket.config)
-  const mangoClient = useMangoStore((s) => s.mangoClient);

  const { connection } = useConnection()
  // const { marketList } = useMarketList()
@ -46,7 +44,14 @@ const useHydrateStore = () => {
          const askAccount = market['_decoded'].asks
          const askInfo = await connection.getAccountInfo(askAccount)

-          console.log('spot', market, bidAccount.toString(), bidInfo, askAccount.toString(), askInfo);
+          console.log(
+            'spot',
+            market,
+            bidAccount.toString(),
+            bidInfo,
+            askAccount.toString(),
+            askInfo
+          )
          setMangoStore((state) => {
            state.selectedMarket.current = market
            state.selectedMarket.askInfo = askInfo
@ -62,17 +67,24 @@ const useHydrateStore = () => {
        })
    } else {
      mangoClient.getPerpMarket(marketConfig.key).then(async (market) => {
-        const bidInfo = await connection.getAccountInfo(market.bids);
-        const askInfo = await connection.getAccountInfo(market.asks);
+        const bidInfo = await connection.getAccountInfo(market.bids)
+        const askInfo = await connection.getAccountInfo(market.asks)

-        console.log('perp', market, market.bids.toString(), bidInfo, market.asks.toString(), askInfo);
+        console.log(
+          'perp',
+          market,
+          market.bids.toString(),
+          bidInfo,
+          market.asks.toString(),
+          askInfo
+        )

        setMangoStore((state) => {
          state.selectedMarket.current = market
          state.selectedMarket.askInfo = askInfo
          state.selectedMarket.bidInfo = bidInfo
        })
-      });
+      })
    }
  }, [connection, mangoClient, marketConfig, groupConfig, setMangoStore])

--- a/hooks/useOpenOrders.tsx
+++ b/hooks/useOpenOrders.tsx
@ -22,11 +22,17 @@ export function useOpenOrders() {
  const accountInfos = useMangoStore((s) => s.accountInfos)
  const { marketList } = useMarketList()

+  console.log('in useOpenorders, before if')
+  console.log('markets length', markets.length)
  if (!mangoGroup || !marginAccount || !accountInfos) return null
+  console.log('in useOpenorders, after if')

  const openOrders = Object.entries(markets).map(([address, market]) => {
-    const marketIndex = mangoGroup.getMarketIndex(market)
-    const openOrdersAccount = marginAccount.openOrdersAccounts[marketIndex]
+    const marketIndex = mangoGroup.getSpotMarketIndex(market)
+    const openOrdersAccount = marginAccount.spotOpenOrdersAccounts[marketIndex]
+    console.log('=================')
+    console.log('my open orders acc: ', openOrdersAccount)
+
    const marketName = marketList.find(
      (mkt) => mkt.address.toString() === address
    ).name
--- a/yarn.lock
+++ b/yarn.lock
@ -995,7 +995,7 @@

 "@blockworks-foundation/mango-client@git+ssh://git@github.com/blockworks-foundation/merps-ts#ts/ui-exports":
  version "0.0.0"
-  resolved "git+ssh://git@github.com/blockworks-foundation/merps-ts#a6cff31646ef10da33ac1f9b9663b5df263e8a0a"
+  resolved "git+ssh://git@github.com/blockworks-foundation/merps-ts#49b4ebc87bd8c81cda0cef977a44360af733da04"
  dependencies:
    "@project-serum/serum" "^0.13.38"
    "@project-serum/sol-wallet-adapter" "^0.2.0"
@ -1837,9 +1837,9 @@
  integrity sha512-bpcvu/MKHHeYX+qeEN8GE7DIravODWdACVA1ctevD8CN24RhPZIKMn9ntfAsrvLfSX3cR5RrBKAbYm9bGs0A+Q==

 "@types/node@*":
-  version "15.12.2"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-15.12.2.tgz#1f2b42c4be7156ff4a6f914b2fb03d05fa84e38d"
-  integrity sha512-zjQ69G564OCIWIOHSXyQEEDpdpGl+G348RAKY0XXy9Z5kU9Vzv1GMNnkar/ZJ8dzXB3COzD9Mo9NtRZ4xfgUww==
+  version "15.12.3"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-15.12.3.tgz#2817bf5f25bc82f56579018c53f7d41b1830b1af"
+  integrity sha512-SNt65CPCXvGNDZ3bvk1TQ0Qxoe3y1RKH88+wZ2Uf05dduBCqqFQ76ADP9pbT+Cpvj60SkRppMCh2Zo8tDixqjQ==

 "@types/node@^12.12.54":
  version "12.20.15"