add market data header to trade page (#9)

* add market data header to trade page
2021-05-18 15:33:04 +10:00 · 2021-05-18 15:33:04 +10:00 · a49f7e2fe9
parent 8e4bd926a7
commit a49f7e2fe9
14 changed files with 377 additions and 254 deletions
--- a/components/AlertsList.tsx
+++ b/components/AlertsList.tsx
@ -107,7 +107,7 @@ const AlertsList = () => {
            >
              <Popover.Panel
                static
-                className="absolute z-10 mt-3 right-0 md:transform md:-translate-x-1/2 md:left-1/2 w-64"
+                className="absolute z-10 mt-4 right-0 md:transform md:-translate-x-1/2 md:left-1/2 w-64"
              >
                <div className="bg-th-bkg-1 p-4 overflow-auto max-h-80 rounded-lg shadow-lg thin-scroll">
                  {loading ? (
--- a/components/ConnectWalletButton.tsx
+++ b/components/ConnectWalletButton.tsx
@ -1,22 +1,63 @@
+import { useEffect, useState } from 'react'
 import styled from '@emotion/styled'
 import useMangoStore from '../stores/useMangoStore'
+import { Menu } from '@headlessui/react'
+import { DuplicateIcon, LinkIcon, LogoutIcon } from '@heroicons/react/outline'
+import { ChevronUpIcon, ChevronDownIcon } from '@heroicons/react/solid'
 import { WALLET_PROVIDERS, DEFAULT_PROVIDER } from '../hooks/useWallet'
 import useLocalStorageState from '../hooks/useLocalStorageState'
+import { abbreviateAddress, copyToClipboard } from '../utils'
 import WalletSelect from './WalletSelect'
 import { WalletIcon } from './icons'

 const StyledWalletTypeLabel = styled.div`
-  font-size: 0.6rem;
+  font-size: 0.65rem;
 `

+const StyledWalletButtonWrapper = styled.div`
+  width: 196px;
+`
+
+const Code = styled.code`
+  border: 1px solid hsla(0, 0%, 39.2%, 0.2);
+  border-radius: 3px;
+  background: hsla(0, 0%, 58.8%, 0.1);
+  font-size: 0.75rem;
+`
+
+const WALLET_OPTIONS = [
+  { name: 'Copy address', icon: <DuplicateIcon /> },
+  { name: 'Disconnect', icon: <LogoutIcon /> },
+]
+
 const ConnectWalletButton = () => {
  const wallet = useMangoStore((s) => s.wallet.current)
+  const connected = useMangoStore((s) => s.wallet.connected)
  const set = useMangoStore((s) => s.set)
+  const [isCopied, setIsCopied] = useState(false)
  const [savedProviderUrl] = useLocalStorageState(
    'walletProvider',
    DEFAULT_PROVIDER.url
  )

+  useEffect(() => {
+    if (isCopied) {
+      const timer = setTimeout(() => {
+        setIsCopied(false)
+      }, 2000)
+      return () => clearTimeout(timer)
+    }
+  }, [isCopied])
+
+  const handleWalletMenu = (option) => {
+    if (option === 'Copy address') {
+      copyToClipboard(wallet.publicKey)
+      setIsCopied(true)
+    } else {
+      wallet.disconnect()
+    }
+  }
+
  const handleWalletConect = () => {
    wallet.connect()
    set((state) => {
@ -25,26 +66,72 @@ const ConnectWalletButton = () => {
  }

  return (
-    <div className="flex justify-between border border-th-primary rounded-md h-11 w-48">
-      <button
-        onClick={handleWalletConect}
-        disabled={!wallet}
-        className="text-th-primary hover:text-th-fgd-1 hover:bg-th-primary focus:outline-none disabled:text-th-fgd-4 disabled:cursor-wait rounded-r-none"
-      >
-        <div className="flex flex-row items-center px-2 justify-center h-full rounded-l default-transition hover:text-th-fgd-1">
-          <WalletIcon className="w-5 h-5 mr-3 fill-current" />
-          <div>
-            <span className="whitespace-nowrap">Connect Wallet</span>
-            <StyledWalletTypeLabel className="font-normal text-th-fgd-1 text-left leading-3">
-              {WALLET_PROVIDERS.find((p) => p.url === savedProviderUrl)?.name}
-            </StyledWalletTypeLabel>
+    <StyledWalletButtonWrapper className="h-14">
+      {connected && wallet?.publicKey ? (
+        <Menu>
+          {({ open }) => (
+            <div className="relative h-full">
+              <Menu.Button className="h-full w-full px-3 bg-th-bkg-1 rounded-none focus:outline-none text-th-primary hover:text-th-fgd-1">
+                <div className="flex flex-row items-center justify-between">
+                  <div className="flex items-center">
+                    <WalletIcon className="w-4 h-4 mr-3 text-th-green fill-current" />
+                    <Code className="p-1 text-th-fgd-3 font-light">
+                      {isCopied
+                        ? 'Copied!'
+                        : abbreviateAddress(wallet.publicKey)}
+                    </Code>
+                  </div>
+                  <div className="pl-2">
+                    {open ? (
+                      <ChevronUpIcon className="h-4 w-4" />
+                    ) : (
+                      <ChevronDownIcon className="h-4 w-4" />
+                    )}
+                  </div>
+                </div>
+              </Menu.Button>
+              <Menu.Items className="z-20 mt-1 p-1 absolute right-0 md:transform md:-translate-x-1/2 md:left-1/2 bg-th-bkg-1 divide-y divide-th-bkg-3 shadow-lg outline-none rounded-md w-36">
+                {WALLET_OPTIONS.map(({ name, icon }) => (
+                  <Menu.Item key={name}>
+                    <button
+                      className="flex flex-row font-normal items-center rounded-none w-full p-2 hover:bg-th-bkg-2 hover:cursor-pointer focus:outline-none"
+                      onClick={() => handleWalletMenu(name)}
+                    >
+                      <div className="w-4 h-4 mr-2">{icon}</div>
+                      {name}
+                    </button>
+                  </Menu.Item>
+                ))}
+              </Menu.Items>
+            </div>
+          )}
+        </Menu>
+      ) : (
+        <div className="bg-th-bkg-1 h-full flex divide-x divide-th-bkg-3 justify-between">
+          <button
+            onClick={handleWalletConect}
+            disabled={!wallet}
+            className="rounded-none text-th-primary hover:bg-th-primary focus:outline-none disabled:text-th-fgd-4 disabled:cursor-wait"
+          >
+            <div className="flex flex-row items-center px-3 justify-center h-full default-transition hover:text-th-bkg-1">
+              <WalletIcon className="w-4 h-4 mr-2 fill-current" />
+              <div>
+                <div className="mb-0.5 whitespace-nowrap">Connect Wallet</div>
+                <StyledWalletTypeLabel className="font-normal text-th-fgd-4 text-left leading-3 tracking-wider">
+                  {
+                    WALLET_PROVIDERS.find((p) => p.url === savedProviderUrl)
+                      ?.name
+                  }
+                </StyledWalletTypeLabel>
+              </div>
+            </div>
+          </button>
+          <div className="relative h-full">
+            <WalletSelect isPrimary />
          </div>
        </div>
-      </button>
-      <div className="relative h-full">
-        <WalletSelect isPrimary />
-      </div>
-    </div>
+      )}
+    </StyledWalletButtonWrapper>
  )
 }

--- a/components/DropMenu.tsx
+++ b/components/DropMenu.tsx
@ -45,7 +45,7 @@ const DropMenu: FunctionComponent<DropMenuProps> = ({
              leaveTo="opacity-0 translate-y-1"
            >
              <Listbox.Options
-                className={`absolute z-10 mt-3 right-0 md:transform md:-translate-x-1/2 md:left-1/2 w-24 bg-th-bkg-1 divide-y divide-th-bkg-3 shadow-lg outline-none rounded-md`}
+                className={`absolute z-10 mt-4 p-1 right-0 md:transform md:-translate-x-1/2 md:left-1/2 w-24 bg-th-bkg-1 divide-y divide-th-bkg-3 shadow-lg outline-none rounded-md`}
              >
                {options.map((option) => (
                  <Listbox.Option key={option.name} value={option.name}>
--- a/components/ManualRefresh.tsx
+++ b/components/ManualRefresh.tsx
@ -0,0 +1,34 @@
+import { useState } from 'react'
+import { RefreshClockwiseIcon } from './icons'
+import useMangoStore from '../stores/useMangoStore'
+import Tooltip from './Tooltip'
+
+const ManualRefresh = ({ className = '' }) => {
+  const [spin, setSpin] = useState(false)
+  const actions = useMangoStore((s) => s.actions)
+
+  const handleRefreshData = async () => {
+    setSpin(true)
+    await actions.fetchMarginAccounts()
+    await actions.fetchWalletBalances()
+    await actions.fetchTradeHistory()
+    setSpin(false)
+  }
+
+  return (
+    <div className={`inline-flex relative ${className}`}>
+      <Tooltip content="Refresh Data" className="text-xs py-1">
+        <button
+          onClick={() => handleRefreshData()}
+          className="flex items-center justify-center rounded-full bg-th-bkg-3 w-8 h-8 hover:text-th-primary focus:outline-none"
+        >
+          <RefreshClockwiseIcon
+            className={`w-4 h-4 ${spin ? 'animate-spin' : null}`}
+          />
+        </button>
+      </Tooltip>
+    </div>
+  )
+}
+
+export default ManualRefresh
--- a/components/MarketHeader.tsx
+++ b/components/MarketHeader.tsx
@ -1,33 +1,138 @@
-import React from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
 import useMangoStore from '../stores/useMangoStore'
 import useMarkPrice from '../hooks/useMarkPrice'
 import usePrevious from '../hooks/usePrevious'
-import { isEqual } from '../utils/'
-import { ArrowUpIcon, ArrowDownIcon } from '@heroicons/react/solid'
+import useInterval from '../hooks/useInterval'
+import ChartApi from '../utils/chartDataConnector'
 import UiLock from './UiLock'
+import ManualRefresh from './ManualRefresh'

 const MarketHeader = () => {
-  const selectedMarketName = useMangoStore((s) => s.selectedMarket.name)
  const markPrice = useMarkPrice()
+  const selectedMarketName = useMangoStore((s) => s.selectedMarket.name)
+  const previousMarketName: string = usePrevious(selectedMarketName)
+  const marginAccount = useMangoStore((s) => s.selectedMarginAccount.current)
+  const connected = useMangoStore((s) => s.wallet.connected)
+
+  const [ohlcv, setOhlcv] = useState(null)
+  const [loading, setLoading] = useState(false)
+  const change = ohlcv ? ((ohlcv.c[0] - ohlcv.o[0]) / ohlcv.o[0]) * 100 : '--'
+  const volume = ohlcv ? ohlcv.v[0] : '--'
+
+  const fetchOhlcv = useCallback(async () => {
+    // calculate from and to date (0:00UTC to 23:59:59UTC)
+    const date = new Date()
+    const utcDate = date.getUTCDate()
+    let utcFrom = new Date(
+      Date.UTC(date.getFullYear(), date.getMonth(), date.getDate())
+    )
+    utcFrom.setUTCDate(utcDate)
+    utcFrom.setUTCHours(0)
+    utcFrom.setUTCMinutes(0)
+    utcFrom.setUTCSeconds(0)
+    let utcTo = new Date(
+      Date.UTC(date.getFullYear(), date.getMonth(), date.getDate())
+    )
+    utcTo.setUTCDate(utcDate)
+    utcTo.setUTCHours(23)
+    utcTo.setUTCMinutes(59)
+    utcTo.setUTCSeconds(59)
+    const from = utcFrom.getTime() / 1000
+    const to = utcTo.getTime() / 1000
+
+    const ohlcv = await ChartApi.getOhlcv(selectedMarketName, '1D', from, to)
+    if (ohlcv) {
+      setOhlcv(ohlcv)
+      setLoading(false)
+    }
+  }, [selectedMarketName])
+
+  useInterval(async () => {
+    fetchOhlcv()
+  }, 5000)
+
+  useMemo(() => {
+    if (previousMarketName !== selectedMarketName) {
+      setLoading(true)
+    }
+  }, [selectedMarketName])

  return (
-    <div className={`flex items-center justify-between pt-4 px-4 sm:px-10`}>
-      <div className="flex items-center">
-        <img
-          alt=""
-          width="32"
-          height="32"
-          src={`/assets/icons/${selectedMarketName
-            .split('/')[0]
-            .toLowerCase()}.svg`}
-          className={`mr-3`}
-        />
-        <div className={`font-semibold text-lg pr-4`}>{selectedMarketName}</div>
-        <div className={`text-lg pr-4`}>{markPrice}</div>
-        <ChangePercentage change={markPrice} />
+    <div
+      className={`flex items-end sm:items-center justify-between pt-6 px-6 md:px-9`}
+    >
+      <div className="flex flex-col sm:flex-row sm:items-center">
+        <div className="pb-3 sm:pb-0 w-44">
+          <div className="flex items-center">
+            <img
+              alt=""
+              width="24"
+              height="24"
+              src={`/assets/icons/${selectedMarketName
+                .split('/')[0]
+                .toLowerCase()}.svg`}
+              className={`mr-2.5`}
+            />
+
+            <div className="font-semibold pr-1.5 text-xl">
+              {selectedMarketName.split('/')[0]}
+            </div>
+            <span className="text-th-fgd-4 text-xl">/</span>
+            <div className="font-semibold pl-1.5 text-xl">
+              {selectedMarketName.split('/')[1]}
+            </div>
+          </div>
+        </div>
+        <div className="flex items-center">
+          <div className="pr-4 sm:pr-0 sm:w-24">
+            <div className="text-th-fgd-4 text-xs">Mark price</div>
+            <div className="font-semibold mt-0.5">
+              {markPrice ? markPrice.toFixed(2) : '--'}
+            </div>
+          </div>
+          <div className="pr-4 sm:pr-0 sm:w-24">
+            <div className="mb-0.5 text-th-fgd-4 text-xs">24hr Change</div>
+            {ohlcv && !loading ? (
+              <div
+                className={`font-semibold ${
+                  change > 0
+                    ? `text-th-green`
+                    : change < 0
+                    ? `text-th-red`
+                    : `text-th-fgd-1`
+                }`}
+              >
+                {change > 0 && <span className={`text-th-green`}>+</span>}
+                {change !== '--' ? `${change.toFixed(2)}%` : change}
+              </div>
+            ) : (
+              <MarketDataLoader />
+            )}
+          </div>
+          <div className="pr-4 sm:pr-0 sm:w-24">
+            <div className="mb-0.5 text-th-fgd-4 text-xs">24hr Vol</div>
+            <div className={`font-semibold`}>
+              {ohlcv && !loading ? (
+                volume !== '--' ? (
+                  <>
+                    {volume.toFixed(2)}
+                    <span className="ml-1 text-th-fgd-3 text-xs">
+                      {selectedMarketName.split('/')[0]}
+                    </span>
+                  </>
+                ) : (
+                  volume
+                )
+              ) : (
+                <MarketDataLoader />
+              )}
+            </div>
+          </div>
+        </div>
      </div>
-      <div className="flex items-center justify-center rounded-full bg-th-bkg-3 w-8 h-8">
+      <div className="flex">
        <UiLock />
+        {connected && marginAccount ? <ManualRefresh className="pl-2" /> : null}
      </div>
    </div>
  )
@ -35,30 +140,6 @@ const MarketHeader = () => {

 export default MarketHeader

-const ChangePercentage = React.memo<{ change: number }>(
-  ({ change }) => {
-    const previousChange: number = usePrevious(change)
-
-    return (
-      <div
-        className={`flex justify-center items-center font-semibold mt-1 ${
-          change > previousChange
-            ? `text-th-green`
-            : change < previousChange
-            ? `text-th-red`
-            : `text-th-fgd-1`
-        }`}
-      >
-        {change > previousChange && (
-          <ArrowUpIcon className={`h-4 w-4 mr-1 text-th-green`} />
-        )}
-        {change < previousChange && (
-          <ArrowDownIcon className={`h-4 w-4 mr-1 text-th-red`} />
-        )}
-        {change === previousChange && <div className={`h-4 w-4 mr-1`} />}
-        {`${change}%` || '--'}
-      </div>
-    )
-  },
-  (prevProps, nextProps) => isEqual(prevProps, nextProps, ['change'])
+const MarketDataLoader = () => (
+  <div className="animate-pulse bg-th-bkg-3 h-5 w-10 rounded-sm" />
 )
--- a/components/MarketSelect.tsx
+++ b/components/MarketSelect.tsx
@ -21,33 +21,34 @@ const MarketSelect = () => {
  }

  return (
-    <div className="bg-th-bkg-3">
+    <div className="bg-th-bkg-3 py-2">
      <div className="flex justify-between items-center">
-        <div className="flex items-center py-2 px-4 md:px-10">
+        <div className="flex items-center px-4 md:px-10">
+          <div className="border-r border-th-fgd-4 pr-4 text-th-fgd-4 text-xs">
+            MARKETS
+          </div>
          {Object.entries(spotMarkets).map(([name, address]) => (
            <div
-              className={`flex px-2 py-1 mr-2 rounded-md cursor-pointer default-transition bg-th-bkg-2
+              className={`border-r border-th-fgd-4 cursor-pointer default-transition flex font-semibold px-4 text-xs hover:text-th-primary
              ${
                selectedMarketName === name
                  ? `text-th-primary`
-                  : `text-th-fgd-1 opacity-50 hover:opacity-100`
+                  : `text-th-fgd-3`
              }
            `}
              onClick={() => handleChange(name)}
              key={address as string}
            >
-              <div className="pr-1">{name.split('/')[0]}</div>
-              <span className="text-th-fgd-4">/</span>
-              <div className="pl-1">{name.split('/')[1]}</div>
+              {name.split('/')[0]}
            </div>
          ))}
        </div>
        <div className="mr-10 text-xs">
          <a
            href="https://old.mango.markets"
-            className="text-th-fgd-4 default-transition underline hover:text-th-primary hover:no-underline"
+            className="text-th-fgd-3 default-transition underline hover:text-th-primary hover:no-underline"
          >
-            Use Previous Version
+            Use V1
          </a>
        </div>
      </div>
--- a/components/MenuItem.tsx
+++ b/components/MenuItem.tsx
@ -8,10 +8,10 @@ const MenuItem = ({ href, children }) => {
    <Link href={href}>
      <a
        className={`block text-th-fgd-1 font-bold items-center pl-3 pr-4 py-2 
-          md:inline-flex md:ml-4 md:px-1 md:py-0 border-l-4 md:border-l-0 md:border-b-2 hover:text-th-primary hover:opacity-100
+          md:inline-flex md:ml-4 md:px-1 md:py-0 hover:text-th-primary hover:opacity-100
          ${
            asPath === href
-              ? `border-th-primary`
+              ? `text-th-primary`
              : `border-transparent hover:border-th-primary`
          }
        `}
--- a/components/ResetLayout.tsx
+++ b/components/ResetLayout.tsx
@ -1,26 +1,16 @@
-import { useEffect, useState } from 'react'
-import { RefreshClockwiseIcon } from './icons'
+import { TemplateIcon } from '@heroicons/react/outline'
 import { defaultLayouts, GRID_LAYOUT_KEY } from './TradePageGrid'
 import useLocalStorageState from '../hooks/useLocalStorageState'
 import Tooltip from './Tooltip'

 const ResetLayout = ({ className = '' }) => {
-  const [spin, setSpin] = useState(false)
  const [, setSavedLayouts] = useLocalStorageState(
    GRID_LAYOUT_KEY,
    defaultLayouts
  )

-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setSpin(false)
-    }, 500)
-    return () => clearTimeout(timer)
-  }, [spin])
-
  const handleResetLayout = () => {
    setSavedLayouts(defaultLayouts)
-    setSpin(true)
  }

  return (
@ -30,9 +20,7 @@ const ResetLayout = ({ className = '' }) => {
          onClick={() => handleResetLayout()}
          className="flex items-center justify-center rounded-full bg-th-bkg-3 w-8 h-8 hover:text-th-primary focus:outline-none"
        >
-          <RefreshClockwiseIcon
-            className={`w-4 h-4 ${spin ? 'animate-spin' : null}`}
-          />
+          <TemplateIcon className="w-4 h-4" />
        </button>
      </Tooltip>
    </div>
--- a/components/TopBar.tsx
+++ b/components/TopBar.tsx
@ -1,189 +1,104 @@
-import { useEffect, useState } from 'react'
-import { Menu } from '@headlessui/react'
-import styled from '@emotion/styled'
-import {
-  ChevronUpIcon,
-  ChevronDownIcon,
-  DuplicateIcon,
-  LogoutIcon,
-  MenuIcon,
-  XIcon,
-} from '@heroicons/react/outline'
-import UiLock from './UiLock'
-import { useRouter } from 'next/router'
+import { useState } from 'react'
+import { MenuIcon, XIcon } from '@heroicons/react/outline'
 import MenuItem from './MenuItem'
 import ThemeSwitch from './ThemeSwitch'
-import { WalletIcon } from './icons'
 import useMangoStore from '../stores/useMangoStore'
 import ConnectWalletButton from './ConnectWalletButton'
-import { copyToClipboard } from '../utils'
 import AlertsList from './AlertsList'

-const Code = styled.code`
-  border: 1px solid hsla(0, 0%, 39.2%, 0.2);
-  border-radius: 3px;
-  background: hsla(0, 0%, 58.8%, 0.1);
-  font-size: 13px;
-`
-
-const WALLET_OPTIONS = [
-  { name: 'Copy address', icon: <DuplicateIcon /> },
-  { name: 'Disconnect', icon: <LogoutIcon /> },
-]
-
 const TopBar = () => {
-  const { asPath } = useRouter()
  const connected = useMangoStore((s) => s.wallet.connected)
  const wallet = useMangoStore((s) => s.wallet.current)
  const [showMenu, setShowMenu] = useState(false)
-  const [isCopied, setIsCopied] = useState(false)
-
-  useEffect(() => {
-    if (isCopied) {
-      const timer = setTimeout(() => {
-        setIsCopied(false)
-      }, 2000)
-      return () => clearTimeout(timer)
-    }
-  }, [isCopied])
-
-  const handleWalletMenu = (option) => {
-    if (option === 'Copy address') {
-      copyToClipboard(wallet.publicKey)
-      setIsCopied(true)
-    } else {
-      wallet.disconnect()
-    }
-  }

  return (
-    <nav className={`bg-th-bkg-2`}>
-      <div className={`px-4 md:px-6 lg:px-8`}>
-        <div className={`flex justify-between h-16`}>
-          <div className={`flex`}>
-            <div className={`flex-shrink-0 flex items-center`}>
-              <img
-                className={`h-8 w-auto`}
-                src="/assets/icons/logo.svg"
-                alt="next"
-              />
+    <>
+      <nav className={`bg-th-bkg-2`}>
+        <div className={`px-6 md:px-9`}>
+          <div className={`flex justify-between h-14`}>
+            <div className={`flex`}>
+              <div className={`flex-shrink-0 flex items-center`}>
+                <img
+                  className={`h-8 w-auto`}
+                  src="/assets/icons/logo.svg"
+                  alt="next"
+                />
+              </div>
+              <div className={`hidden md:flex md:space-x-6 md:ml-4 py-2`}>
+                <MenuItem href="/">Trade</MenuItem>
+                <MenuItem href="/stats">Stats</MenuItem>
+                <MenuItem href="/alerts">Alerts</MenuItem>
+                <MenuItem href="https://docs.mango.markets/">Learn</MenuItem>
+              </div>
            </div>
-            <div className={`hidden md:flex md:space-x-6 md:ml-4 py-2`}>
-              <MenuItem href="/">Trade</MenuItem>
-              <MenuItem href="/stats">Stats</MenuItem>
-              <MenuItem href="/alerts">Alerts</MenuItem>
-              <MenuItem href="https://docs.mango.markets/">Learn</MenuItem>
-            </div>
-          </div>
-          <div className="flex">
            <div className="flex items-center">
-              <div className="pl-3">{asPath === '/' ? <UiLock /> : null}</div>
-              <div className="pl-3">
+              <div className={`pl-2`}>
                <ThemeSwitch />
              </div>
              {connected ? (
-                <div className="pl-3">
+                <div className="pl-2">
                  <AlertsList />
                </div>
              ) : null}
-              <div className="hidden md:ml-4 md:block">
-                {connected && wallet?.publicKey ? (
-                  <Menu>
-                    {({ open }) => (
-                      <div className="relative">
-                        <Menu.Button className="w-48 h-11 pl-2 pr-2.5 border border-th-green hover:border-th-fgd-1 focus:outline-none rounded-md text-th-fgd-4 hover:text-th-fgd-1">
-                          <div className="flex flex-row items-center justify-between">
-                            <div className="flex items-center">
-                              <WalletIcon className="w-5 h-5 mr-2 fill-current text-th-green" />
-                              <Code className="p-1 text-th-fgd-3 font-light">
-                                {isCopied
-                                  ? 'Copied!'
-                                  : wallet.publicKey.toString().substr(0, 5) +
-                                    '...' +
-                                    wallet.publicKey.toString().substr(-5)}
-                              </Code>
-                            </div>
-                            {open ? (
-                              <ChevronUpIcon className="h-5 w-5" />
-                            ) : (
-                              <ChevronDownIcon className="h-5 w-5" />
-                            )}
-                          </div>
-                        </Menu.Button>
-                        <Menu.Items className="z-20 p-1 absolute right-0 top-11 bg-th-bkg-1 divide-y divide-th-bkg-3 shadow-lg outline-none rounded-md w-48">
-                          {WALLET_OPTIONS.map(({ name, icon }) => (
-                            <Menu.Item key={name}>
-                              <button
-                                className="flex flex-row items-center w-full p-2 hover:bg-th-bkg-2 hover:cursor-pointer font-normal"
-                                onClick={() => handleWalletMenu(name)}
-                              >
-                                <div className="w-5 h-5 mr-2">{icon}</div>
-                                {name}
-                              </button>
-                            </Menu.Item>
-                          ))}
-                        </Menu.Items>
-                      </div>
-                    )}
-                  </Menu>
-                ) : (
+              <div className="flex">
+                <div className="hidden md:block pl-4">
                  <ConnectWalletButton />
-                )}
+                </div>
+              </div>
+              <div className={`-mr-2 ml-2 flex items-center md:hidden`}>
+                <button
+                  type="button"
+                  className={`inline-flex items-center justify-center p-2 rounded-md text-black dark:text-white hover:text-gray-400 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-mango-orange`}
+                  aria-controls="mobile-menu"
+                  aria-expanded="false"
+                  onClick={() => setShowMenu((showMenu) => !showMenu)}
+                >
+                  <span className="sr-only">Open main menu</span>
+                  {showMenu ? (
+                    <XIcon className="h-5 w-5 text-th-primary" />
+                  ) : (
+                    <MenuIcon className="h-5 w-5 text-th-primary" />
+                  )}
+                </button>
              </div>
-            </div>
-            <div className={`-mr-2 ml-2 flex items-center md:hidden`}>
-              <button
-                type="button"
-                className={`inline-flex items-center justify-center p-2 rounded-md text-black dark:text-white hover:text-gray-400 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-mango-orange`}
-                aria-controls="mobile-menu"
-                aria-expanded="false"
-                onClick={() => setShowMenu((showMenu) => !showMenu)}
-              >
-                <span className="sr-only">Open main menu</span>
-                {showMenu ? (
-                  <XIcon className="h-5 w-5 text-th-primary" />
-                ) : (
-                  <MenuIcon className="h-5 w-5 text-th-primary" />
-                )}
-              </button>
            </div>
          </div>
        </div>
-      </div>
-      <div
-        className={`${showMenu ? `visible` : `hidden`} md:hidden`}
-        id="mobile-menu"
-      >
        <div
-          className={`bg-th-bkg-3 pt-2 pb-3 space-y-1 border-b border-th-fgd-4`}
+          className={`${showMenu ? `visible` : `hidden`} md:hidden`}
+          id="mobile-menu"
        >
-          <MenuItem href="/">Trade</MenuItem>
-          <MenuItem href="/stats">Stats</MenuItem>
-          <MenuItem href="/alerts">Alerts</MenuItem>
-          <MenuItem href="https://docs.mango.markets/">Learn</MenuItem>
+          <div
+            className={`bg-th-bkg-3 pt-2 pb-3 space-y-1 border-b border-th-fgd-4`}
+          >
+            <MenuItem href="/">Trade</MenuItem>
+            <MenuItem href="/stats">Stats</MenuItem>
+            <MenuItem href="/alerts">Alerts</MenuItem>
+            <MenuItem href="https://docs.mango.markets/">Learn</MenuItem>

-          {connected && wallet?.publicKey ? (
-            <button
-              className="block text-th-fgd-1 text-base items-center pl-3 pr-4 py-2 font-normal
+            {connected && wallet?.publicKey ? (
+              <button
+                className="block text-th-fgd-1 text-base items-center pl-3 pr-4 py-2 font-normal
                  md:inline-flex md:ml-4 md:px-1 md:py-0 border-l-4 md:border-l-0 md:border-b-2 hover:text-th-primary
                  border-transparent hover:border-th-primary rounded-none outline-none focus:outline-none"
-              onClick={() => wallet.disconnect()}
-            >
-              Disconnect
-            </button>
-          ) : (
-            <button
-              className="block text-th-fgd-1 text-base items-center pl-3 pr-4 py-2 font-normal
+                onClick={() => wallet.disconnect()}
+              >
+                Disconnect
+              </button>
+            ) : (
+              <button
+                className="block text-th-fgd-1 text-base items-center pl-3 pr-4 py-2 font-normal
                  md:inline-flex md:ml-4 md:px-1 md:py-0 border-l-4 md:border-l-0 md:border-b-2 hover:text-th-primary
                  border-transparent hover:border-th-primary rounded-none outline-none focus:outline-none"
-              onClick={() => wallet.connect()}
-            >
-              Connect
-            </button>
-          )}
+                onClick={() => wallet.connect()}
+              >
+                Connect
+              </button>
+            )}
+          </div>
        </div>
-      </div>
-    </nav>
+      </nav>
+    </>
  )
 }

--- a/components/UiLock.tsx
+++ b/components/UiLock.tsx
@ -26,7 +26,7 @@ const UiLock = ({ className = '' }) => {
          leave="transition-opacity duration-500"
          leaveFrom="opacity-100"
          leaveTo="opacity-0"
-          className="pr-3"
+          className="pr-2"
        >
          <ResetLayout />
        </Transition>
--- a/components/WalletSelect.tsx
+++ b/components/WalletSelect.tsx
@ -3,7 +3,7 @@ import {
  ChevronDownIcon,
  ChevronUpIcon,
  CheckCircleIcon,
-} from '@heroicons/react/outline'
+} from '@heroicons/react/solid'
 import useMangoStore from '../stores/useMangoStore'
 import { WALLET_PROVIDERS, DEFAULT_PROVIDER } from '../hooks/useWallet'
 import useLocalStorageState from '../hooks/useLocalStorageState'
@ -26,23 +26,23 @@ export default function WalletSelect({ isPrimary = false }) {
      {({ open }) => (
        <>
          <Menu.Button
-            className={`flex justify-center items-center h-full rounded-r rounded-l-none focus:outline-none text-th-primary hover:text-th-fgd-1 ${
+            className={`flex justify-center items-center h-full rounded-none focus:outline-none text-th-primary hover:text-th-bkg-1 ${
              isPrimary
                ? 'px-3 hover:bg-th-primary'
                : 'px-2 hover:bg-th-bkg-3 border-l border-th-fgd-4'
            } cursor-pointer`}
          >
            {open ? (
-              <ChevronUpIcon className="h-5 w-5" />
+              <ChevronUpIcon className="h-4 w-4" />
            ) : (
-              <ChevronDownIcon className="h-5 w-5" />
+              <ChevronDownIcon className="h-4 w-4" />
            )}
          </Menu.Button>
-          <Menu.Items className="z-20 p-1 absolute right-0 top-11 bg-th-bkg-1 divide-y divide-th-bkg-3 shadow-lg outline-none rounded-md w-48">
+          <Menu.Items className="absolute bg-th-bkg-1 divide-y divide-th-bkg-3 p-1 rounded-md right-0 mt-1 shadow-lg outline-none w-44 z-20">
            {WALLET_PROVIDERS.map(({ name, url, icon }) => (
              <Menu.Item key={name}>
                <button
-                  className="flex flex-row items-center justify-between w-full p-2 hover:bg-th-bkg-2 hover:cursor-pointer font-normal focus:outline-none"
+                  className="flex flex-row items-center justify-between rounded-none w-full p-2 hover:bg-th-bkg-2 hover:cursor-pointer font-normal focus:outline-none"
                  onClick={() => handleSelectProvider(url)}
                >
                  <div className="flex">
--- a/pages/index.tsx
+++ b/pages/index.tsx
@ -2,6 +2,7 @@ import TopBar from '../components/TopBar'
 import TradePageGrid from '../components/TradePageGrid'
 import MarketSelect from '../components/MarketSelect'
 import AlphaModal from '../components/AlphaModal'
+import MarketHeader from '../components/MarketHeader'
 import useLocalStorageState from '../hooks/useLocalStorageState'

 const Index = () => {
@ -11,6 +12,7 @@ const Index = () => {
    <div className={`bg-th-bkg-1 text-th-fgd-1 transition-all `}>
      <TopBar />
      <MarketSelect />
+      <MarketHeader />
      <div className={`min-h-screen p-1 sm:px-2 sm:py-1 md:px-6 md:py-1`}>
        <TradePageGrid />
      </div>
--- a/styles/index.css
+++ b/styles/index.css
@ -52,7 +52,7 @@
 /* Base */

 body {
-  @apply text-sm font-body tracking-wide;
+  @apply text-sm font-body tracking-wider;
 }

 p {
@ -65,7 +65,7 @@ a {

 button {
  transition: all 0.3s ease;
-  @apply font-semibold rounded-md;
+  @apply font-semibold rounded-md tracking-wider;
 }

 .default-transition {
--- a/utils/chartDataConnector.tsx
+++ b/utils/chartDataConnector.tsx
@ -9,7 +9,11 @@ export default class ChartApi {
      const response = await fetch(this.URL + path)
      if (response.ok) {
        const responseJson = await response.json()
-        return responseJson.success ? responseJson.data : null
+        return responseJson.success
+          ? responseJson.data
+          : responseJson
+          ? responseJson
+          : null
      }
    } catch (err) {
      console.log(`Error fetching from Chart API ${path}: ${err}`)
@ -22,6 +26,17 @@ export default class ChartApi {
  ): Promise<ChartTradeType[] | null> {
    return ChartApi.get(`trades/address/${marketAddress}`)
  }
+
+  static async getOhlcv(
+    symbol: string,
+    resolution: string,
+    from: number,
+    to: number
+  ): Promise<ChartTradeType[] | null> {
+    return ChartApi.get(
+      `tv/history?symbol=${symbol}&resolution=${resolution}&from=${from}&to=${to}`
+    )
+  }
 }

 export const CHART_DATA_FEED = `${baseUrl}/tv`