update navigation transitions and ordering

2022-02-18 17:24:06 -05:00 · 2022-02-18 17:24:06 -05:00 · 7ca2e6d31f
parent 138a664c77
commit 7ca2e6d31f
8 changed files with 57 additions and 55 deletions
--- a/components/MarketDetails.tsx
+++ b/components/MarketDetails.tsx
@ -180,23 +180,6 @@ const MarketDetails = () => {
      <div className="flex flex-col lg:flex-row lg:items-center">
        <div className="hidden md:block md:pb-4 md:pr-6 lg:pb-0">
          <div className="flex items-center">
-            <div className="flex items-center">
-              <img
-                alt=""
-                width="24"
-                height="24"
-                src={`/assets/icons/${baseSymbol.toLowerCase()}.svg`}
-                className={`mr-2.5`}
-              />
-
-              <div className="font-semibold pr-0.5 text-xl">{baseSymbol}</div>
-              <span className="text-th-fgd-4 text-xl">
-                {isPerpMarket ? '-' : '/'}
-              </span>
-              <div className="font-semibold pl-0.5 text-xl">
-                {isPerpMarket ? 'PERP' : groupConfig.quoteSymbol}
-              </div>
-            </div>
            <SwitchMarketDropdown />
          </div>
        </div>
--- a/components/MarketNavItem.tsx
+++ b/components/MarketNavItem.tsx
@ -44,12 +44,13 @@ const MarketNavItem: FunctionComponent<MarketNavItemProps> = ({
    <div className="text-th-fgd-3">
      <div className="flex items-center">
        <FavoriteMarketButton market={market} />
+
        <button
          className="font-normal flex items-center justify-between w-full"
          onClick={() => selectMarket(market)}
        >
          <div
-            className={`flex items-center text-xs hover:text-th-primary w-full whitespace-nowrap ${
+            className={`flex items-center text-xs w-full whitespace-nowrap py-1.5 hover:text-th-primary ${
              asPath.includes(market.name) ||
              (asPath === '/' && initialMarket.name === market.name)
                ? 'text-th-primary'
--- a/components/SwitchMarketDropdown.tsx
+++ b/components/SwitchMarketDropdown.tsx
@ -1,14 +1,19 @@
 import { Fragment, useCallback, useMemo, useRef, useState } from 'react'
 import useMangoGroupConfig from '../hooks/useMangoGroupConfig'
 import { Popover, Transition } from '@headlessui/react'
-import { SearchIcon } from '@heroicons/react/outline'
-import { SwitchHorizontalIcon, XIcon } from '@heroicons/react/solid'
+import { ChevronDownIcon, SearchIcon } from '@heroicons/react/outline'
+import { XIcon } from '@heroicons/react/solid'
 import Input from './Input'
 import { useTranslation } from 'next-i18next'
 import MarketNavItem from './MarketNavItem'
+import useMangoStore from '../stores/useMangoStore'

 const SwitchMarketDropdown = () => {
  const groupConfig = useMangoGroupConfig()
+  const marketConfig = useMangoStore((s) => s.selectedMarket.config)
+  const baseSymbol = marketConfig.baseSymbol
+  const isPerpMarket = marketConfig.kind === 'perp'
+
  const markets = useMemo(
    () => [...groupConfig.spotMarkets, ...groupConfig.perpMarkets],
    [groupConfig]
@ -52,21 +57,38 @@ const SwitchMarketDropdown = () => {
  return (
    <Popover>
      {({ open }) => (
-        <div className="flex flex-col ml-2 relative">
+        <div className="flex flex-col relative">
          <Popover.Button
            className={`focus:outline-none focus:bg-th-bkg-3 ${
              open && 'bg-th-bkg-3'
            }`}
            ref={buttonRef}
          >
-            <div
-              className={`flex h-10 items-center justify-center rounded-none w-10 hover:text-th-primary`}
-            >
-              {open ? (
-                <XIcon className="h-5 w-5" />
-              ) : (
-                <SwitchHorizontalIcon className="h-5 w-5" />
-              )}
+            <div className="flex items-center pl-2 hover:text-th-primary">
+              <img
+                alt=""
+                width="24"
+                height="24"
+                src={`/assets/icons/${baseSymbol.toLowerCase()}.svg`}
+                className={`mr-2.5`}
+              />
+
+              <div className="font-semibold pr-0.5 text-xl">{baseSymbol}</div>
+              <span className="text-th-fgd-4 text-xl">
+                {isPerpMarket ? '-' : '/'}
+              </span>
+              <div className="font-semibold pl-0.5 text-xl">
+                {isPerpMarket ? 'PERP' : groupConfig.quoteSymbol}
+              </div>
+              <div
+                className={`flex h-10 items-center justify-center rounded-none w-10`}
+              >
+                {open ? (
+                  <XIcon className="h-5 w-5" />
+                ) : (
+                  <ChevronDownIcon className="h-5 w-5" />
+                )}
+              </div>
            </div>
          </Popover.Button>
          <Transition
@ -81,7 +103,7 @@ const SwitchMarketDropdown = () => {
            leaveTo="opacity-0"
          >
            <Popover.Panel
-              className="absolute bg-th-bkg-3 max-h-96 overflow-y-auto p-4 left-1/2 transform -translate-x-1/2 rounded-b-md rounded-tl-md thin-scroll top-12 w-72 z-10"
+              className="absolute bg-th-bkg-3 max-h-96 overflow-y-auto p-4 left-0 transform rounded-b-md rounded-tl-md thin-scroll top-12 w-72 z-10"
              static
            >
              <div className="pb-2.5">
@ -94,7 +116,7 @@ const SwitchMarketDropdown = () => {
                />
              </div>
              {searchString.length > 0 ? (
-                <div className="pt-1.5 space-y-2.5">
+                <div className="pt-1.5">
                  {filteredMarkets.length > 0 ? (
                    filteredMarkets.map((mkt) => (
                      <MarketNavItem
@ -109,14 +131,14 @@ const SwitchMarketDropdown = () => {
                  )}
                </div>
              ) : (
-                <div className="space-y-2.5">
-                  <div className="flex justify-between pt-1.5">
-                    <h4 className="text-xs">{t('spot')}</h4>
+                <div className="">
+                  <div className="flex justify-between py-1.5">
+                    <h4 className="text-xs">{t('perp')}</h4>
                    <p className="mb-0 text-th-fgd-4 text-xs">
                      {t('rolling-change')}
                    </p>
                  </div>
-                  {spotMarkets.map((mkt) => (
+                  {perpMarkets.map((mkt) => (
                    <MarketNavItem
                      buttonRef={buttonRef}
                      onClick={() => setSearchString('')}
@ -124,13 +146,13 @@ const SwitchMarketDropdown = () => {
                      key={mkt.name}
                    />
                  ))}
-                  <div className="flex justify-between pt-1.5">
-                    <h4 className="text-xs">{t('perp')}</h4>
+                  <div className="flex justify-between py-1.5">
+                    <h4 className="text-xs">{t('spot')}</h4>
                    <p className="mb-0 text-th-fgd-4 text-xs">
                      {t('rolling-change')}
                    </p>
                  </div>
-                  {perpMarkets.map((mkt) => (
+                  {spotMarkets.map((mkt) => (
                    <MarketNavItem
                      buttonRef={buttonRef}
                      onClick={() => setSearchString('')}
--- a/components/TopBar.tsx
+++ b/components/TopBar.tsx
@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useState } from 'react'
 import Link from 'next/link'
 import { abbreviateAddress } from '../utils/index'
 import useLocalStorageState from '../hooks/useLocalStorageState'
@ -13,7 +13,6 @@ import { DEFAULT_MARKET_KEY, initialMarket } from './SettingsModal'
 import { useTranslation } from 'next-i18next'
 import Settings from './Settings'
 import TradeNavMenu from './TradeNavMenu'
-import useMangoGroupConfig from '../hooks/useMangoGroupConfig'

 const StyledNewLabel = ({ children, ...props }) => (
  <div style={{ fontSize: '0.5rem', marginLeft: '1px' }} {...props}>
@ -30,18 +29,11 @@ const TopBar = () => {
    DEFAULT_MARKET_KEY,
    initialMarket
  )
-  const actions = useMangoStore((s) => s.actions)
-  const groupConfig = useMangoGroupConfig()
-  const markets = [...groupConfig.spotMarkets, ...groupConfig.perpMarkets]

  const handleCloseAccounts = useCallback(() => {
    setShowAccountsModal(false)
  }, [])

-  useEffect(() => {
-    actions.fetchMarketInfo(markets)
-  }, [])
-
  return (
    <>
      <nav className={`bg-th-bkg-2`}>
--- a/components/TradeNavMenu.tsx
+++ b/components/TradeNavMenu.tsx
@ -112,10 +112,10 @@ const TradeNavMenu = () => {
            appear={true}
            show={open}
            as={Fragment}
-            enter="transition-all ease-in duration-200"
-            enterFrom="opacity-0 transform scale-75"
+            enter="transition-all ease-in duration-100"
+            enterFrom="opacity-0 transform scale-90"
            enterTo="opacity-100 transform scale-100"
-            leave="transition ease-out duration-200"
+            leave="transition ease-out duration-100"
            leaveFrom="opacity-100"
            leaveTo="opacity-0"
          >
@ -128,7 +128,7 @@ const TradeNavMenu = () => {
                />
              </div>
              <div className="bg-th-bkg-3 col-span-2 p-4 rounded-br-lg">
-                <div className="grid grid-cols-2 grid-flow-row gap-x-6 gap-y-2.5">
+                <div className="grid grid-cols-2 grid-flow-row gap-x-6">
                  {markets.map((mkt) => (
                    <MarketNavItem
                      buttonRef={buttonRef}
--- a/hooks/useHydrateStore.tsx
+++ b/hooks/useHydrateStore.tsx
@ -75,7 +75,6 @@ const useHydrateStore = () => {
  useInterval(() => {
    actions.fetchMangoGroup()
    actions.fetchWalletTokens()
-    actions.fetchMarketInfo()
  }, 120 * SECONDS)

  useEffect(() => {
--- a/stores/useMangoStore.tsx
+++ b/stores/useMangoStore.tsx
@ -407,7 +407,6 @@ const useMangoStore = create<MangoStore>((set, get) => {
        ])
          .then((values) => {
            const [mangoAccounts, delegatedAccounts] = values
-            console.log(mangoAccounts.length, delegatedAccounts.length)
            if (mangoAccounts.length + delegatedAccounts.length > 0) {
              const sortedAccounts = mangoAccounts
                .slice()
@ -534,6 +533,7 @@ const useMangoStore = create<MangoStore>((set, get) => {
                  }
                })
            })
+            actions.fetchMarketInfo()
          })
          .catch((err) => {
            if (mangoGroupRetryAttempt < 2) {
@ -856,9 +856,14 @@ const useMangoStore = create<MangoStore>((set, get) => {
          })
        }
      },
-      async fetchMarketInfo(markets) {
+      async fetchMarketInfo() {
        const set = get().set
        const marketInfos = []
+        const groupConfig = get().selectedMangoGroup.config
+        const markets = [...groupConfig.spotMarkets, ...groupConfig.perpMarkets]
+
+        if (!markets) return
+
        await Promise.all(
          markets.map(async (market) => {
            const response = await fetch(
--- a/styles/index.css
+++ b/styles/index.css
@ -112,7 +112,7 @@ button.transition-none {
 }

 .default-transition {
-  @apply transition-all duration-300;
+  @apply transition-all duration-200;
 }

 .tiny-text {