finish up spot slider

2022-09-26 15:56:06 -04:00 · 2022-09-26 15:56:06 -04:00 · bb50f35806
parent cd75f5c3f5
commit bb50f35806
4 changed files with 143 additions and 59 deletions
--- a/components/trade/AdvancedTradeForm.tsx
+++ b/components/trade/AdvancedTradeForm.tsx
@ -10,8 +10,11 @@ import Tooltip from '@components/shared/Tooltip'
 import mangoStore from '@store/mangoStore'
 import Decimal from 'decimal.js'
 import { useTranslation } from 'next-i18next'
-import { useCallback, useMemo, useState } from 'react'
-import NumberFormat, { NumberFormatValues } from 'react-number-format'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import NumberFormat, {
+  NumberFormatValues,
+  SourceInfo,
+} from 'react-number-format'
 import { notify } from 'utils/notifications'
 import SpotSlider from './SpotSlider'
 import { calculateMarketPrice } from 'utils/tradeForm'
@ -41,18 +44,51 @@ const AdvancedTradeForm = () => {
  )

  const handlePriceChange = useCallback(
-    (e: NumberFormatValues) => {
+    (e: NumberFormatValues, info: SourceInfo) => {
+      if (info.source !== 'event') return
      set((s) => {
        s.tradeForm.price = e.value
+        if (s.tradeForm.baseSize && Number(e.value)) {
+          s.tradeForm.quoteSize = (
+            parseFloat(e.value) * parseFloat(s.tradeForm.baseSize)
+          ).toString()
+        }
      })
    },
    [set]
  )

  const handleBaseSizeChange = useCallback(
-    (e: NumberFormatValues) => {
+    (e: NumberFormatValues, info: SourceInfo) => {
+      if (info.source !== 'event') return
+      console.log('ho')
+
      set((s) => {
        s.tradeForm.baseSize = e.value
+
+        if (s.tradeForm.price && Number(e.value)) {
+          s.tradeForm.quoteSize = (
+            parseFloat(s.tradeForm.price) * parseFloat(e.value)
+          ).toString()
+        }
+      })
+    },
+    [set]
+  )
+
+  const handleQuoteSizeChange = useCallback(
+    (e: NumberFormatValues, info: SourceInfo) => {
+      if (info.source !== 'event') return
+      console.log('hi')
+
+      set((s) => {
+        s.tradeForm.quoteSize = e.value
+
+        if (Number(s.tradeForm.price)) {
+          s.tradeForm.baseSize = (
+            parseFloat(e.value) / parseFloat(s.tradeForm.price)
+          ).toString()
+        }
      })
    },
    [set]
@ -91,6 +127,20 @@ const AdvancedTradeForm = () => {
    [set]
  )

+  useEffect(() => {
+    const group = mangoStore.getState().group
+    if (!group || !selectedMarket) return
+    const baseBank = group?.getFirstBankByTokenIndex(
+      selectedMarket.baseTokenIndex
+    )
+    if (baseBank.uiPrice) {
+      const price = baseBank.uiPrice.toString()
+      set((s) => {
+        s.tradeForm.price = price
+      })
+    }
+  }, [set, selectedMarket])
+
  const handlePlaceOrder = useCallback(async () => {
    const client = mangoStore.getState().client
    const group = mangoStore.getState().group
@ -202,7 +252,7 @@ const AdvancedTradeForm = () => {
            <div className="mb-2 mt-4 flex items-center justify-between">
              <p className="text-xs text-th-fgd-3">Limit Price</p>
            </div>
-            <div className="default-transition flex items-center rounded-md border border-th-bkg-4 bg-th-bkg-1 p-3 text-sm font-bold text-th-fgd-1 md:py-2 md:text-lg md:hover:border-th-fgd-4 md:hover:bg-th-bkg-2">
+            <div className="default-transition flex items-center rounded-md border border-th-bkg-4 bg-th-bkg-1 p-2 text-xs font-bold text-th-fgd-1 md:hover:border-th-fgd-4 md:hover:bg-th-bkg-2 lg:text-base">
              <NumberFormat
                inputMode="decimal"
                thousandSeparator=","
@ -216,7 +266,7 @@ const AdvancedTradeForm = () => {
                value={tradeForm.price}
                onValueChange={handlePriceChange}
              />
-              <div className="ml-2 text-sm font-normal text-th-fgd-4">
+              <div className="text-xs font-normal text-th-fgd-4">
                {quoteSymbol}
              </div>
            </div>
@ -225,22 +275,42 @@ const AdvancedTradeForm = () => {
        <div className="my-2 flex items-center justify-between">
          <p className="text-xs text-th-fgd-3">{t('amount')}</p>
        </div>
-        <div className="default-transition flex items-center rounded-md border border-th-bkg-4 bg-th-bkg-1 p-3 text-sm font-bold text-th-fgd-1 md:py-2 md:text-lg md:hover:border-th-fgd-4 md:hover:bg-th-bkg-2">
-          <NumberFormat
-            inputMode="decimal"
-            thousandSeparator=","
-            allowNegative={false}
-            isNumericString={true}
-            decimalScale={6}
-            name="amountIn"
-            id="amountIn"
-            className="w-full bg-transparent font-mono focus:outline-none"
-            placeholder="0.00"
-            value={tradeForm.baseSize}
-            onValueChange={handleBaseSizeChange}
-          />
-          <div className="ml-2 text-sm font-normal text-th-fgd-4">
-            {baseSymbol}
+        <div className="flex flex-col">
+          <div className="default-transition flex items-center rounded-md border border-th-bkg-4 bg-th-bkg-1 p-2 text-xs font-bold text-th-fgd-1 md:hover:border-th-fgd-4 md:hover:bg-th-bkg-2 lg:text-base">
+            <NumberFormat
+              inputMode="decimal"
+              thousandSeparator=","
+              allowNegative={false}
+              isNumericString={true}
+              decimalScale={6}
+              name="amountIn"
+              id="amountIn"
+              className="w-full bg-transparent font-mono focus:outline-none"
+              placeholder="0.00"
+              value={tradeForm.baseSize}
+              onValueChange={handleBaseSizeChange}
+            />
+            <div className="text-xs font-normal text-th-fgd-4">
+              {baseSymbol}
+            </div>
+          </div>
+          <div className="default-transition mt-1 flex items-center rounded-md border border-th-bkg-4 bg-th-bkg-1 p-2 text-xs font-bold text-th-fgd-1 md:hover:border-th-fgd-4 md:hover:bg-th-bkg-2 lg:text-base">
+            <NumberFormat
+              inputMode="decimal"
+              thousandSeparator=","
+              allowNegative={false}
+              isNumericString={true}
+              decimalScale={6}
+              name="amountIn"
+              id="amountIn"
+              className="w-full bg-transparent font-mono focus:outline-none"
+              placeholder="0.00"
+              value={tradeForm.quoteSize}
+              onValueChange={handleQuoteSizeChange}
+            />
+            <div className="text-xs font-normal text-th-fgd-4">
+              {quoteSymbol}
+            </div>
          </div>
        </div>
      </div>
--- a/components/trade/Orderbook.tsx
+++ b/components/trade/Orderbook.tsx
@ -158,7 +158,6 @@ const Orderbook = () => {
  // const [openOrderPrices, setOpenOrderPrices] = useState<any[]>([])
  const [isScrolled, setIsScrolled] = useState(false)
  const [orderbookData, setOrderbookData] = useState<any | null>(null)
-  const [displayCumulativeSize, setDisplayCumulativeSize] = useState(false)
  const [grouping, setGrouping] = useState(0.01)
  const [showBuys, setShowBuys] = useState(true)
  const [showSells, setShowSells] = useState(true)
@ -438,17 +437,9 @@ const Orderbook = () => {
                      // )}
                      key={orderbookData?.asks[index].price}
                      price={orderbookData?.asks[index].price}
-                      size={
-                        displayCumulativeSize
-                          ? orderbookData?.asks[index].cumulativeSize
-                          : orderbookData?.asks[index].size
-                      }
+                      size={orderbookData?.asks[index].size}
                      side="sell"
-                      sizePercent={
-                        displayCumulativeSize
-                          ? orderbookData?.asks[index].maxSizePercent
-                          : orderbookData?.asks[index].sizePercent
-                      }
+                      sizePercent={orderbookData?.asks[index].sizePercent}
                      grouping={grouping}
                    />
                  ) : null}
@ -482,17 +473,9 @@ const Orderbook = () => {
                    //   grouping
                    // )}
                    price={orderbookData?.bids[index].price}
-                    size={
-                      displayCumulativeSize
-                        ? orderbookData?.bids[index].cumulativeSize
-                        : orderbookData?.bids[index].size
-                    }
+                    size={orderbookData?.bids[index].size}
                    side="buy"
-                    sizePercent={
-                      displayCumulativeSize
-                        ? orderbookData?.bids[index].maxSizePercent
-                        : orderbookData?.bids[index].sizePercent
-                    }
+                    sizePercent={orderbookData?.bids[index].sizePercent}
                    grouping={grouping}
                  />
                ) : null}
@ -538,26 +521,29 @@ const OrderbookRow = ({
      () =>
        element.current?.classList.contains(`${flashClassName}`) &&
        element.current?.classList.remove(`${flashClassName}`),
-      250
+      500
    )
    return () => clearTimeout(id)
  }, [price, size])

-  const formattedSize =
-    minOrderSize && !isNaN(size)
+  const formattedSize = useMemo(() => {
+    return minOrderSize && !isNaN(size)
      ? floorToDecimal(size, getDecimalCount(minOrderSize))
      : new Decimal(size)
+  }, [size, minOrderSize])

-  const formattedPrice =
-    tickSize && !isNaN(price)
+  const formattedPrice = useMemo(() => {
+    return tickSize && !isNaN(price)
      ? floorToDecimal(price, getDecimalCount(tickSize))
      : new Decimal(price)
+  }, [price, tickSize])

-  // const handlePriceClick = () => {
-  //   set((state) => {
-  //     state.tradeForm.price = Number(formattedPrice)
-  //   })
-  // }
+  const handlePriceClick = useCallback(() => {
+    const set = mangoStore.getState().set
+    set((state) => {
+      state.tradeForm.price = formattedPrice.toFixed()
+    })
+  }, [formattedPrice])

  // const handleSizeClick = () => {
  //   set((state) => {
@ -580,6 +566,7 @@ const OrderbookRow = ({
    <div
      className={`relative flex h-[24px] cursor-pointer justify-between border-b border-b-th-bkg-1 text-sm`}
      ref={element}
+      onClick={handlePriceClick}
    >
      <>
        <div className="flex w-full items-center justify-between hover:bg-th-bkg-2">
@ -596,7 +583,6 @@ const OrderbookRow = ({
          </div>
          <div
            className={`z-10 w-full pr-4 text-right font-mono text-xs leading-5 md:leading-6`}
-            // onClick={handlePriceClick}
          >
            {formattedPrice.toFixed(groupingDecimalCount)}
          </div>
--- a/components/trade/SpotSlider.tsx
+++ b/components/trade/SpotSlider.tsx
@ -4,12 +4,12 @@ import Decimal from 'decimal.js'
 import { useCallback, useMemo, useState } from 'react'

 const SpotSlider = () => {
-  const [amount, setAmount] = useState<string>()
  const side = mangoStore((s) => s.tradeForm.side)
  const selectedMarket = mangoStore((s) => s.selectedMarket.current)
+  const mangoAccount = mangoStore((s) => s.mangoAccount.current)
+  const tradeForm = mangoStore((s) => s.tradeForm)

  const leverageMax = useMemo(() => {
-    const mangoAccount = mangoStore.getState().mangoAccount.current
    const group = mangoStore.getState().group
    const set = mangoStore.getState().set
    if (!mangoAccount || !group || !selectedMarket) return 100
@ -28,20 +28,42 @@ const SpotSlider = () => {

      return new Decimal(maxBase.toString()).toNumber()
    }
-  }, [side, selectedMarket])
+  }, [side, selectedMarket, mangoAccount])

  const handleSlide = useCallback((val: string) => {
    const set = mangoStore.getState().set

    set((s) => {
-      s.tradeForm.baseSize = val
+      if (s.tradeForm.side === 'buy') {
+        s.tradeForm.quoteSize = val
+
+        if (Number(s.tradeForm.price)) {
+          s.tradeForm.baseSize = (
+            parseFloat(val) / parseFloat(s.tradeForm.price)
+          ).toString()
+        } else {
+          s.tradeForm.baseSize = ''
+        }
+      } else if (s.tradeForm.side === 'sell') {
+        s.tradeForm.baseSize = val
+
+        if (Number(s.tradeForm.price)) {
+          s.tradeForm.quoteSize = (
+            parseFloat(val) * parseFloat(s.tradeForm.price)
+          ).toString()
+        }
+      }
    })
  }, [])

  return (
    <div className="w-full px-4">
      <LeverageSlider
-        amount={0}
+        amount={
+          tradeForm.side === 'buy'
+            ? parseFloat(tradeForm.quoteSize)
+            : parseFloat(tradeForm.baseSize)
+        }
        leverageMax={leverageMax}
        onChange={handleSlide}
      />
--- a/components/wallet/ConnectWalletButton.tsx
+++ b/components/wallet/ConnectWalletButton.tsx
@ -32,6 +32,12 @@ export const handleWalletConnect = async (wallet: Wallet) => {
        type: 'error',
        description: `Please install ${wallet.adapter.name} and then reload this page.`,
      })
+    } else {
+      notify({
+        title: `${wallet.adapter.name} Error`,
+        type: 'error',
+        description: `${wallet.adapter.name} not available.`,
+      })
    }
  }
 }