give depth chart its own tab

2023-07-25 08:52:09 +10:00 · 2023-07-25 08:52:09 +10:00 · 01f03022bf
parent f1e0770106
commit 01f03022bf
11 changed files with 62 additions and 110 deletions
--- a/apis/market/auctionHouse.ts
+++ b/apis/market/auctionHouse.ts
@ -19,7 +19,7 @@ export const fetchFilteredListing = async (
  auctionHouse: AuctionHouse,
  filter: string,
  page: number,
-  perPage: number
+  perPage: number,
 ) => {
  const listings = (
    await metaplex.auctionHouse().findListings({
@ -29,12 +29,12 @@ export const fetchFilteredListing = async (
    .filter((x) =>
      filter === ALL_FILTER
        ? true
-        : x.sellerAddress.equals(metaplex.identity().publicKey)
+        : x.sellerAddress.equals(metaplex.identity().publicKey),
    )
    .filter((x) => !x.canceledAt && !x.purchaseReceiptAddress)
  const filteredListings = listings.slice(
    (page - 1) * perPage,
-    page * perPage
+    page * perPage,
  ) as LazyListing[]

  return {
@ -45,12 +45,12 @@ export const fetchFilteredListing = async (

 export const fetchFilteredBids = async (
  metaplex: Metaplex,
-  auctionHouse: AuctionHouse
+  auctionHouse: AuctionHouse,
 ) => {
  const bids = await metaplex.auctionHouse().findBids({
    auctionHouse,
  })
  return bids.filter(
-    (x) => !x.canceledAt && !x.purchaseReceiptAddress
+    (x) => !x.canceledAt && !x.purchaseReceiptAddress,
  ) as LazyBid[]
 }
--- a/components/nftMarket/AllBidsView.tsx
+++ b/components/nftMarket/AllBidsView.tsx
@ -103,7 +103,7 @@ const AllBidsView = () => {
                .map((x, idx) => {
                  const listing = listings?.results?.find(
                    (nft: Listing) =>
-                      nft.asset.mint.toString() === x.asset.mint.toString()
+                      nft.asset.mint.toString() === x.asset.mint.toString(),
                  )
                  return (
                    <TrBody key={idx}>
@ -126,7 +126,7 @@ const AllBidsView = () => {
                        <p className="text-right">
                          {toUiDecimals(
                            x.price.basisPoints.toNumber(),
-                            MANGO_MINT_DECIMALS
+                            MANGO_MINT_DECIMALS,
                          )}
                          <span className="font-body">{' MNGO'}</span>
                        </p>
@ -138,7 +138,7 @@ const AllBidsView = () => {
                              <>
                                {toUiDecimals(
                                  listing.price.basisPoints.toNumber(),
-                                  MANGO_MINT_DECIMALS
+                                  MANGO_MINT_DECIMALS,
                                )}
                                <span className="font-body">{' MNGO'}</span>
                              </>
@ -159,7 +159,7 @@ const AllBidsView = () => {
                          !x.buyerAddress.equals(publicKey) &&
                          nfts.find(
                            (ownNft) =>
-                              ownNft.mint === x.asset.address.toBase58()
+                              ownNft.mint === x.asset.address.toBase58(),
                          ) ? (
                            <NftMarketButton
                              onClick={() =>
@ -167,8 +167,9 @@ const AllBidsView = () => {
                                  x,
                                  nfts.find(
                                    (ownNft) =>
-                                      ownNft.mint === x.asset.address.toBase58()
-                                  )!.tokenAccount
+                                      ownNft.mint ===
+                                      x.asset.address.toBase58(),
+                                  )!.tokenAccount,
                                )
                              }
                              colorClass="fgd-3"
--- a/components/nftMarket/AssetBidsModal.tsx
+++ b/components/nftMarket/AssetBidsModal.tsx
@ -23,7 +23,7 @@ const AssetBidsModal = ({
  const { data: lazyBids, refetch: reftechBids } = useBids()
  const { refetch: refetchLazyListings } = useLazyListings()
  const assetBids = lazyBids?.filter((x) =>
-    x.metadataAddress.equals(listing.asset.metadataAddress)
+    x.metadataAddress.equals(listing.asset.metadataAddress),
  )

  const acceptBid = async (lazyBid: LazyBid) => {
--- a/components/nftMarket/BidNftModal.tsx
+++ b/components/nftMarket/BidNftModal.tsx
@ -64,7 +64,7 @@ const BidNftModal = ({ isOpen, onClose, listing }: ListingModalProps) => {
                <span className="font-display">
                  {toUiDecimals(
                    listing.price.basisPoints.toNumber(),
-                    MANGO_MINT_DECIMALS
+                    MANGO_MINT_DECIMALS,
                  )}{' '}
                  <span className="font-bold">MNGO</span>
                </span>
--- a/components/nftMarket/ListingsView.tsx
+++ b/components/nftMarket/ListingsView.tsx
@ -104,13 +104,13 @@ const ListingsView = () => {
        {listings?.results?.map((x, idx) => {
          const imgSource = x.asset.json?.image
          const nftBids = bids?.filter((bid) =>
-            bid.metadataAddress.equals(x.asset.metadataAddress)
+            bid.metadataAddress.equals(x.asset.metadataAddress),
          )
          const bestBid = nftBids
            ? nftBids.reduce((a, c) => {
                const price = toUiDecimals(
                  c.price.basisPoints.toNumber(),
-                  MANGO_MINT_DECIMALS
+                  MANGO_MINT_DECIMALS,
                )
                if (price > a) {
                  a = price
@ -141,7 +141,7 @@ const ListingsView = () => {
                      <span className="font-display text-base">
                        {toUiDecimals(
                          x.price.basisPoints.toNumber(),
-                          MANGO_MINT_DECIMALS
+                          MANGO_MINT_DECIMALS,
                        )}{' '}
                        <span className="font-body font-bold">MNGO</span>
                      </span>
--- a/components/nftMarket/SellNftModal.tsx
+++ b/components/nftMarket/SellNftModal.tsx
@ -41,9 +41,8 @@ const SellNftModal = ({ isOpen, onClose }: ModalProps) => {
      seller: publicKey!,
      mint: new PublicKey(mint),
    })
-    const isCurrentlyListed = currentListings?.filter(
-      (x) => !x.canceledAt
-    ).length
+    const isCurrentlyListed = currentListings?.filter((x) => !x.canceledAt)
+      .length
    if (isCurrentlyListed) {
      throw 'Item is currently listed by you'
    }
--- a/components/trade/Orderbook.tsx
+++ b/components/trade/Orderbook.tsx
@ -10,7 +10,6 @@ import {
 } from 'utils/numbers'
 import {
  ANIMATION_SETTINGS_KEY,
-  DEPTH_CHART_KEY,
  // USE_ORDERBOOK_FEED_KEY,
 } from 'utils/constants'
 import { useTranslation } from 'next-i18next'
@ -22,7 +21,6 @@ import { BookSide, Serum3Market } from '@blockworks-foundation/mango-v4'
 import useSelectedMarket from 'hooks/useSelectedMarket'
 import { INITIAL_ANIMATION_SETTINGS } from '@components/settings/AnimationSettings'
 import { OrderbookFeed } from '@blockworks-foundation/mango-feeds'
-import Switch from '@components/forms/Switch'
 import { breakpoints } from 'utils/theme'
 import {
  decodeBook,
@ -55,12 +53,7 @@ const Orderbook = () => {
  //     ? localStorage.getItem(USE_ORDERBOOK_FEED_KEY) === 'true'
  //     : true
  // )
-  const [showDepthChart, setShowDepthChart] = useLocalStorageState<boolean>(
-    DEPTH_CHART_KEY,
-    false,
-  )
  const { width } = useViewport()
-  const isMobile = width ? width < breakpoints.lg : false
  const [orderbookData, setOrderbookData] = useState<OrderbookData | null>(null)
  const currentOrderbookData = useRef<OrderbookL2>()

@ -430,19 +423,10 @@ const Orderbook = () => {

  return (
    <div>
-      <div className="flex h-10 items-center justify-between border-b border-th-bkg-3 px-4">
-        {!isMobile ? (
-          <Switch
-            checked={showDepthChart}
-            onChange={() => setShowDepthChart(!showDepthChart)}
-            small
-          >
-            <span className="text-xxs">{t('trade:depth')}</span>
-          </Switch>
-        ) : null}
+      <div className="h-10 flex items-center justify-between border-b border-th-bkg-3 px-4">
        {market ? (
          <>
-            <p className="text-xs lg:hidden">{t('trade:grouping')}:</p>
+            <p className="text-xs">{t('trade:grouping')}:</p>
            <div id="trade-step-four">
              <Tooltip
                className="hidden md:block"
--- a/components/trade/OrderbookAndTrades.tsx
+++ b/components/trade/OrderbookAndTrades.tsx
@ -1,12 +1,8 @@
 import TabButtons from '@components/shared/TabButtons'
-import { useEffect, useMemo, useState } from 'react'
+import { useState } from 'react'
 import Orderbook from './Orderbook'
 import RecentTrades from './RecentTrades'
 import DepthChart from './DepthChart'
-import useLocalStorageState from 'hooks/useLocalStorageState'
-import { DEPTH_CHART_KEY } from 'utils/constants'
-import { useViewport } from 'hooks/useViewport'
-import { breakpoints } from 'utils/theme'

 export const TABS: [string, number][] = [
  ['trade:book', 0],
@ -16,45 +12,24 @@ export const TABS: [string, number][] = [

 const OrderbookAndTrades = () => {
  const [activeTab, setActiveTab] = useState('trade:book')
-  const [showDepthChart] = useLocalStorageState<boolean>(DEPTH_CHART_KEY, false)
-  const { width } = useViewport()
-  const hideDepthTab = width ? width > breakpoints.lg : false
-
-  const tabsToShow = useMemo(() => {
-    if (hideDepthTab) {
-      return TABS.filter((t) => !t[0].includes('depth'))
-    }
-    return TABS
-  }, [hideDepthTab])
-
-  useEffect(() => {
-    if (hideDepthTab && activeTab === 'trade:depth') {
-      setActiveTab('trade:book')
-    }
-  }, [activeTab, hideDepthTab])

  return (
-    <div className="hide-scroll h-full">
+    <div className="h-full">
      <div className="hide-scroll overflow-x-auto border-b border-th-bkg-3">
        <TabButtons
          activeValue={activeTab}
          onChange={(tab: string) => setActiveTab(tab)}
-          values={tabsToShow}
-          fillWidth={!showDepthChart || !hideDepthTab}
+          values={TABS}
+          fillWidth
          showBorders
        />
      </div>
      <div
-        className={`flex ${activeTab === 'trade:book' ? 'visible' : 'hidden'}`}
+        className={`h-full ${
+          activeTab === 'trade:book' ? 'visible' : 'hidden'
+        }`}
      >
-        {showDepthChart ? (
-          <div className="hidden w-1/2 border-r border-th-bkg-3 lg:block">
-            <DepthChart />
-          </div>
-        ) : null}
-        <div className={showDepthChart ? 'w-full lg:w-1/2' : 'w-full'}>
-          <Orderbook />
-        </div>
+        <Orderbook />
      </div>
      <div
        className={`h-full ${
--- a/components/trade/TradeAdvancedPage.tsx
+++ b/components/trade/TradeAdvancedPage.tsx
@ -20,11 +20,7 @@ import OrderbookAndTrades from './OrderbookAndTrades'
 // import TradeOnboardingTour from '@components/tours/TradeOnboardingTour'
 import FavoriteMarketsBar from './FavoriteMarketsBar'
 import useLocalStorageState from 'hooks/useLocalStorageState'
-import {
-  DEPTH_CHART_KEY,
-  SIDEBAR_COLLAPSE_KEY,
-  TRADE_LAYOUT_KEY,
-} from 'utils/constants'
+import { SIDEBAR_COLLAPSE_KEY, TRADE_LAYOUT_KEY } from 'utils/constants'
 import TradeHotKeys from './TradeHotKeys'

 export type TradeLayout =
@ -59,7 +55,6 @@ const TradeAdvancedPage = () => {
    'chartLeft',
  )
  const [isCollapsed] = useLocalStorageState(SIDEBAR_COLLAPSE_KEY, false)
-  const [showDepthChart] = useLocalStorageState<boolean>(DEPTH_CHART_KEY, false)

  const totalCols = 24
  const gridBreakpoints = useMemo(() => {
@ -89,31 +84,31 @@ const TradeAdvancedPage = () => {
      chartLeft: { xxxl: 0, xxl: 0, xl: 0, lg: 0 },
      chartMiddleOBRight: { xxxl: 4, xxl: 5, xl: 5, lg: 5 },
      chartMiddleOBLeft: {
-        xxxl: showDepthChart ? 7 : 4,
-        xxl: showDepthChart ? 7 : 4,
-        xl: showDepthChart ? 7 : 4,
-        lg: showDepthChart ? 8 : 5,
+        xxxl: 4,
+        xxl: 4,
+        xl: 5,
+        lg: 5,
      },
      chartRight: {
-        xxxl: showDepthChart ? 12 : 9,
-        xxl: showDepthChart ? 12 : 9,
-        xl: showDepthChart ? 12 : 9,
-        lg: showDepthChart ? 14 : 11,
+        xxxl: 9,
+        xxl: 9,
+        xl: 10,
+        lg: 11,
      },
    }

    const bookXPos = {
      chartLeft: {
-        xxxl: showDepthChart ? 13 : 16,
-        xxl: showDepthChart ? 12 : 15,
-        xl: showDepthChart ? 12 : 15,
-        lg: showDepthChart ? 11 : 14,
+        xxxl: 16,
+        xxl: 15,
+        xl: 14,
+        lg: 14,
      },
      chartMiddleOBRight: {
-        xxxl: showDepthChart ? 17 : 20,
-        xxl: showDepthChart ? 17 : 20,
-        xl: showDepthChart ? 17 : 20,
-        lg: showDepthChart ? 16 : 19,
+        xxxl: 20,
+        xxl: 20,
+        xl: 20,
+        lg: 19,
      },
      chartMiddleOBLeft: { xxxl: 0, xxl: 0, xl: 0, lg: 0 },
      chartRight: { xxxl: 4, xxl: 5, xl: 5, lg: 5 },
@ -133,14 +128,14 @@ const TradeAdvancedPage = () => {
          i: 'tv-chart',
          x: chartXPos[tradeLayout].xxxl,
          y: 1,
-          w: showDepthChart ? 13 : 16,
+          w: 16,
          h: 640,
        },
        {
          i: 'orderbook',
          x: bookXPos[tradeLayout].xxxl,
          y: 1,
-          w: showDepthChart ? 7 : 4,
+          w: 4,
          h: 640,
        },
        {
@ -164,14 +159,14 @@ const TradeAdvancedPage = () => {
          i: 'tv-chart',
          x: chartXPos[tradeLayout].xxl,
          y: 1,
-          w: showDepthChart ? 12 : 15,
+          w: 15,
          h: 552,
        },
        {
          i: 'orderbook',
          x: bookXPos[tradeLayout].xxl,
          y: 1,
-          w: showDepthChart ? 7 : 4,
+          w: 4,
          h: 552,
        },
        {
@ -195,14 +190,14 @@ const TradeAdvancedPage = () => {
          i: 'tv-chart',
          x: chartXPos[tradeLayout].xl,
          y: 1,
-          w: showDepthChart ? 12 : 15,
+          w: 14,
          h: 552,
        },
        {
          i: 'orderbook',
          x: bookXPos[tradeLayout].xl,
          y: 1,
-          w: showDepthChart ? 7 : 4,
+          w: 5,
          h: 552,
        },
        {
@ -226,14 +221,14 @@ const TradeAdvancedPage = () => {
          i: 'tv-chart',
          x: chartXPos[tradeLayout].lg,
          y: 1,
-          w: showDepthChart ? 11 : 14,
+          w: 14,
          h: 552,
        },
        {
          i: 'orderbook',
          x: bookXPos[tradeLayout].lg,
          y: 1,
-          w: showDepthChart ? 8 : 5,
+          w: 5,
          h: 552,
        },
        {
@ -259,7 +254,7 @@ const TradeAdvancedPage = () => {
        { i: 'balances', x: 0, y: 2, w: 17, h: 428 + marketHeaderHeight },
      ],
    }
-  }, [height, showDepthChart, tradeLayout])
+  }, [height, tradeLayout])

  const [layouts, setLayouts] = useState<Layouts>(defaultLayouts)
  const [breakpoint, setBreakpoint] = useState('')
@ -273,7 +268,7 @@ const TradeAdvancedPage = () => {

  useLayoutEffect(() => {
    handleLayoutChange(undefined, defaultLayouts)
-  }, [breakpoint, showDepthChart, tradeLayout])
+  }, [breakpoint, tradeLayout])

  return showMobileView ? (
    <MobileTradeAdvancedPage />
--- a/hooks/market/useAuctionHouse.ts
+++ b/hooks/market/useAuctionHouse.ts
@ -23,7 +23,7 @@ export function useAuctionHouse() {
      staleTime: refetchMs,
      retry: 1,
      refetchInterval: refetchMs,
-    }
+    },
  )
 }

@ -45,7 +45,7 @@ export function useLazyListings(filter = ALL_FILTER, page = 1, perPage = 9) {
      staleTime: refetchMs,
      retry: 1,
      refetchInterval: refetchMs,
-    }
+    },
  )
 }

@ -58,7 +58,7 @@ export function useListings(filter = ALL_FILTER, page = 1) {

  const loadMetadatas = async (
    lazyListings: LazyListing[],
-    totalPages: number
+    totalPages: number,
  ) => {
    const listingsWithMeta = []
    for (const listing of lazyListings) {
@ -83,7 +83,7 @@ export function useListings(filter = ALL_FILTER, page = 1) {
      staleTime: refetchMs,
      retry: 1,
      refetchInterval: refetchMs,
-    }
+    },
  )
 }

@ -100,7 +100,7 @@ export function useBids() {
      staleTime: refetchMs,
      retry: 1,
      refetchInterval: refetchMs,
-    }
+    },
  )
 }

--- a/utils/constants.ts
+++ b/utils/constants.ts
@ -59,8 +59,6 @@ export const ACCEPT_TERMS_KEY = 'termsOfUseAccepted-0.1'

 export const TRADE_LAYOUT_KEY = 'tradeLayoutKey-0.1'

-export const DEPTH_CHART_KEY = 'showDepthChart-0.1'
-
 export const STATS_TAB_KEY = 'activeStatsTab-0.1'

 export const USE_ORDERBOOK_FEED_KEY = 'useOrderbookFeed-0.1'
@ -115,7 +113,7 @@ export const SWITCHBOARD_PROGRAM_ID =
  'SW1TCH7qEPTdLsDHRgPuMQjbQxKdH2aBStViMFnt64f'

 export const AUCTION_HOUSE_ID = new PublicKey(
-  'BGBBt6G9bp36i5qt7PWjBWg3VNef1zPozAN9RFsEPDkh'
+  'BGBBt6G9bp36i5qt7PWjBWg3VNef1zPozAN9RFsEPDkh',
 )
 export const CUSTOM_TOKEN_ICONS: { [key: string]: boolean } = {
  bonk: true,