Merge branch 'main' of github.com:blockworks-foundation/mango-ui-v3 into kieran/strict-nullcheck

2022-03-31 12:33:10 +02:00 · 2022-03-31 12:33:10 +02:00 · dd6349d15d
parent 910641c815 578846d9b9
commit dd6349d15d
35 changed files with 367 additions and 281 deletions
--- a/.env
+++ b/.env
@ -1 +1 @@
-NEXT_PUBLIC_GROUP=devnet.2
+NEXT_PUBLIC_GROUP=mainnet.1
--- a/components/ConnectWalletButton.tsx
+++ b/components/ConnectWalletButton.tsx
@ -20,7 +20,7 @@ import { ProfileIcon, WalletIcon } from './icons'
 import { useTranslation } from 'next-i18next'
 import { WalletSelect } from 'components/WalletSelect'
 import AccountsModal from './AccountsModal'
-import { uniqBy } from 'lodash'
+import uniqBy from 'lodash/uniqBy'

 export const handleWalletConnect = (wallet: Wallet) => {
  if (!wallet) {
--- a/components/DatePicker.tsx
+++ b/components/DatePicker.tsx
@ -1,97 +0,0 @@
-import DatePicker from 'react-datepicker/dist/react-datepicker'
-import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/solid'
-import Select from './Select'
-
-const months = [
-  'January',
-  'February',
-  'March',
-  'April',
-  'May',
-  'June',
-  'July',
-  'August',
-  'September',
-  'October',
-  'November',
-  'December',
-]
-
-const MangoDatePicker = ({ date, setDate, ...props }) => {
-  const generateArrayOfYears = () => {
-    const max = new Date().getFullYear()
-    const min = max - (max - 2020)
-    const years: number[] = []
-
-    for (let i = max; i >= min; i--) {
-      years.push(i)
-    }
-    return years
-  }
-
-  const years = generateArrayOfYears()
-
-  return (
-    <DatePicker
-      renderCustomHeader={({
-        date,
-        changeYear,
-        changeMonth,
-        decreaseMonth,
-        increaseMonth,
-        prevMonthButtonDisabled,
-        nextMonthButtonDisabled,
-      }) => (
-        <div className="flex items-center justify-between px-1">
-          <button
-            className="default-transition mr-1 text-th-fgd-3 hover:text-th-fgd-1"
-            onClick={decreaseMonth}
-            disabled={prevMonthButtonDisabled}
-          >
-            <ChevronLeftIcon className="h-6 w-6" />
-          </button>
-          <div className="flex space-x-2">
-            <Select
-              className="w-28"
-              dropdownPanelClassName="text-left"
-              value={months[date.getMonth()]}
-              onChange={(value) => changeMonth(months.indexOf(value))}
-            >
-              {months.map((option) => (
-                <Select.Option key={option} value={option}>
-                  {option}
-                </Select.Option>
-              ))}
-            </Select>
-            <Select
-              dropdownPanelClassName="text-left"
-              value={date.getFullYear()}
-              onChange={(value) => changeYear(value)}
-            >
-              {years.map((option) => (
-                <Select.Option key={option} value={option}>
-                  {option}
-                </Select.Option>
-              ))}
-            </Select>
-          </div>
-          <button
-            className="default-transition ml-1 text-th-fgd-3 hover:text-th-fgd-1"
-            onClick={increaseMonth}
-            disabled={nextMonthButtonDisabled}
-          >
-            <ChevronRightIcon className="h-6 w-6" />
-          </button>
-        </div>
-      )}
-      placeholderText="dd/mm/yyyy"
-      dateFormat="dd/MM/yyyy"
-      selected={date}
-      onChange={(date: Date) => setDate(date)}
-      className="default-transition h-10 w-full cursor-pointer rounded-md border border-th-bkg-4 bg-th-bkg-1 px-2 text-th-fgd-1 hover:border-th-fgd-4 focus:border-th-fgd-4 focus:outline-none"
-      {...props}
-    />
-  )
-}
-
-export default MangoDatePicker
--- a/components/DateRangePicker.tsx
+++ b/components/DateRangePicker.tsx
@ -0,0 +1,54 @@
+import { ChevronRightIcon } from '@heroicons/react/solid'
+import { useTranslation } from 'next-i18next'
+import { enAU } from 'date-fns/locale'
+import { DateRangePicker } from 'react-nice-dates'
+import { Label } from './Input'
+
+const MangoDateRangePicker = ({
+  startDate,
+  setStartDate,
+  endDate,
+  setEndDate,
+}) => {
+  const { t } = useTranslation('common')
+
+  return (
+    <DateRangePicker
+      startDate={startDate}
+      endDate={endDate}
+      onStartDateChange={setStartDate}
+      onEndDateChange={setEndDate}
+      minimumDate={new Date('January 01, 2020 00:00:00')}
+      maximumDate={new Date()}
+      minimumLength={1}
+      format="dd MMM yyyy"
+      locale={enAU}
+    >
+      {({ startDateInputProps, endDateInputProps }) => (
+        <div className="date-range flex items-end">
+          <div className="w-full">
+            <Label>{t('from')}</Label>
+            <input
+              className="default-transition h-10 w-full rounded-md border border-th-bkg-4 bg-th-bkg-1 px-2 text-th-fgd-1 hover:border-th-fgd-4 focus:border-th-fgd-4 focus:outline-none"
+              {...startDateInputProps}
+              placeholder="Start Date"
+            />
+          </div>
+          <div className="flex h-10 items-center justify-center">
+            <ChevronRightIcon className="mx-1 h-5 w-5 flex-shrink-0 text-th-fgd-3" />
+          </div>
+          <div className="w-full">
+            <Label>{t('to')}</Label>
+            <input
+              className="default-transition h-10 w-full rounded-md border border-th-bkg-4 bg-th-bkg-1 px-2 text-th-fgd-1 hover:border-th-fgd-4 focus:border-th-fgd-4 focus:outline-none"
+              {...endDateInputProps}
+              placeholder="End Date"
+            />
+          </div>
+        </div>
+      )}
+    </DateRangePicker>
+  )
+}
+
+export default MangoDateRangePicker
--- a/components/FavoritesShortcutBar.tsx
+++ b/components/FavoritesShortcutBar.tsx
@ -9,14 +9,17 @@ import { useRouter } from 'next/router'
 import { initialMarket } from './SettingsModal'
 import * as MonoIcons from './icons'
 import { Transition } from '@headlessui/react'
+import useMangoStore from '../stores/useMangoStore'

 const FavoritesShortcutBar = () => {
  const [favoriteMarkets] = useLocalStorageState(FAVORITE_MARKETS_KEY, [])
  const { width } = useViewport()
  const isMobile = width ? width < breakpoints.sm : false
  const { asPath } = useRouter()
+  const marketsInfo = useMangoStore((s) => s.marketsInfo)

-  const renderIcon = (symbol) => {
+  const renderIcon = (mktName) => {
+    const symbol = mktName.slice(0, -5)
    const iconName = `${symbol.slice(0, 1)}${symbol
      .slice(1, 4)
      .toLowerCase()}MonoIcon`
@ -39,18 +42,32 @@ const FavoritesShortcutBar = () => {
    >
      <StarIcon className="h-5 w-5 text-th-fgd-4" />
      {favoriteMarkets.map((mkt) => {
+        const change24h = marketsInfo?.find((m) => m.name === mkt)?.change24h
        return (
-          <Link href={`/?name=${mkt.name}`} key={mkt.name} shallow={true}>
+          <Link href={`/?name=${mkt}`} key={mkt} shallow={true}>
            <a
              className={`default-transition flex items-center whitespace-nowrap py-1 text-xs hover:text-th-primary ${
-                asPath.includes(mkt.name) ||
-                (asPath === '/' && initialMarket.name === mkt.name)
+                asPath.includes(mkt) ||
+                (asPath === '/' && initialMarket.name === mkt)
                  ? 'text-th-primary'
                  : 'text-th-fgd-3'
              }`}
            >
-              {renderIcon(mkt.baseSymbol)}
-              <span className="mb-0 mr-1.5 text-xs">{mkt.name}</span>
+              {renderIcon(mkt)}
+              <span className="mb-0 mr-1.5 text-xs">{mkt}</span>
+              {change24h ? (
+                <div
+                  className={`text-xs ${
+                    change24h
+                      ? change24h >= 0
+                        ? 'text-th-green'
+                        : 'text-th-red'
+                      : 'text-th-fgd-4'
+                  }`}
+                >
+                  {`${(change24h * 100).toFixed(1)}%`}
+                </div>
+              ) : null}
            </a>
          </Link>
        )
--- a/components/GlobalNotification.tsx
+++ b/components/GlobalNotification.tsx
@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 import { XIcon } from '@heroicons/react/solid'
 import { Connection } from '@solana/web3.js'
-import { sumBy } from 'lodash'
+import sumBy from 'lodash/sumBy'
 import useInterval from '../hooks/useInterval'
 import { SECONDS } from '../stores/useMangoStore'
 import { useTranslation } from 'next-i18next'
--- a/components/Input.tsx
+++ b/components/Input.tsx
@ -11,8 +11,9 @@ interface InputProps {
  [x: string]: any
 }

-const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
-  const {
+const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({
+    ref,
    type,
    value,
    onChange,
@ -23,18 +24,19 @@ const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
    prefix,
    prefixClassName,
    suffix,
-  } = props
-  return (
-    <div className={`relative flex ${wrapperClassName}`}>
-      {prefix ? (
-        <div
-          className={`absolute left-2 top-1/2 -translate-y-1/2 transform ${prefixClassName}`}
-        >
-          {prefix}
-        </div>
-      ) : null}
-      <input
-        className={`${className} h-10 w-full flex-1 rounded-md border bg-th-bkg-1 px-2 pb-px
+    ...props
+  }) => {
+    return (
+      <div className={`relative flex ${wrapperClassName}`}>
+        {prefix ? (
+          <div
+            className={`absolute left-2 top-1/2 -translate-y-1/2 transform ${prefixClassName}`}
+          >
+            {prefix}
+          </div>
+        ) : null}
+        <input
+          className={`${className} h-10 w-full flex-1 rounded-md border bg-th-bkg-1 px-2 pb-px
          text-th-fgd-1 ${
            error ? 'border-th-red' : 'border-th-bkg-4'
          } default-transition hover:border-th-fgd-4 
@ -46,21 +48,22 @@ const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
          }
          ${prefix ? 'pl-7' : ''}
          ${suffix ? 'pr-11' : ''}`}
-        disabled={disabled}
-        ref={ref}
-        {...props}
-        type={type}
-        value={value}
-        onChange={onChange}
-      />
-      {suffix ? (
-        <span className="absolute right-0 flex h-full items-center bg-transparent pr-2 text-xs text-th-fgd-4">
-          {suffix}
-        </span>
-      ) : null}
-    </div>
-  )
-})
+          disabled={disabled}
+          ref={ref}
+          {...props}
+          type={type}
+          value={value}
+          onChange={onChange}
+        />
+        {suffix ? (
+          <span className="absolute right-0 flex h-full items-center bg-transparent pr-2 text-xs text-th-fgd-4">
+            {suffix}
+          </span>
+        ) : null}
+      </div>
+    )
+  }
+)

 export default Input

--- a/components/JupiterForm.tsx
+++ b/components/JupiterForm.tsx
@ -10,7 +10,8 @@ import { TOKEN_LIST_URL } from '@jup-ag/core'
 import { PublicKey } from '@solana/web3.js'
 import useMangoStore from '../stores/useMangoStore'
 import { connectionSelector } from '../stores/selectors'
-import { sortBy, sum } from 'lodash'
+import sortBy from 'lodash/sortBy'
+import sum from 'lodash/sum'
 import {
  CogIcon,
  ExclamationCircleIcon,
@ -193,7 +194,7 @@ const JupiterForm: FunctionComponent = () => {
  const { routeMap, allTokenMints, routes, loading, exchange, error, refresh } =
    useJupiter({
      ...formValue,
-      amount: amountInDecimal ? amountInDecimal : null,
+      amount: amountInDecimal ? amountInDecimal : 0,
      slippage,
    })

--- a/components/MarketDetails.tsx
+++ b/components/MarketDetails.tsx
@ -15,6 +15,7 @@ import { useTranslation } from 'next-i18next'
 import SwitchMarketDropdown from './SwitchMarketDropdown'
 import Tooltip from './Tooltip'
 import { useWallet } from '@solana/wallet-adapter-react'
+import { InformationCircleIcon } from '@heroicons/react/outline'

 const OraclePrice = () => {
  const oraclePrice = useOraclePrice()
@ -103,29 +104,42 @@ const MarketDetails = () => {
                      {usdFormatter(market?.volumeUsd24h, 0)}
                    </div>
                  </div>
-                  <Tooltip content={t('tooltip-funding')} placement={'bottom'}>
-                    <div className="flex items-center justify-between hover:cursor-help md:block">
-                      <div className="flex items-center text-th-fgd-3 md:pb-0.5 md:text-[0.65rem]">
-                        {t('average-funding')}
-                      </div>
-                      <div className="text-th-fgd-1 md:text-xs">
-                        {`${market?.funding1h.toFixed(4)}% (${(
-                          market?.funding1h *
-                          24 *
-                          365
-                        ).toFixed(2)}% APR)`}
-                      </div>
+                  <div className="flex items-center justify-between md:block">
+                    <div className="flex items-center text-th-fgd-3 md:pb-0.5 md:text-[0.65rem]">
+                      {t('average-funding')}
+                      <Tooltip
+                        content={t('tooltip-funding')}
+                        placement={'bottom'}
+                      >
+                        <InformationCircleIcon className="ml-1.5 h-4 w-4 text-th-fgd-3 hover:cursor-help" />
+                      </Tooltip>
                    </div>
-                  </Tooltip>
+                    <div className="text-th-fgd-1 md:text-xs">
+                      {`${market?.funding1h.toFixed(4)}% (${(
+                        market?.funding1h *
+                        24 *
+                        365
+                      ).toFixed(2)}% APR)`}
+                    </div>
+                  </div>
                  <div className="flex items-center justify-between md:block">
                    <div className="text-th-fgd-3 md:pb-0.5 md:text-[0.65rem]">
                      {t('open-interest')}
                    </div>
-                    <div className="text-th-fgd-1 md:text-xs">
-                      {`${market?.openInterest.toLocaleString(undefined, {
-                        maximumFractionDigits:
-                          perpContractPrecision[baseSymbol],
-                      })} ${baseSymbol}`}
+                    <div className="flex items-center text-th-fgd-1 md:text-xs">
+                      {usdFormatter(market?.openInterestUsd, 0)}
+                      <Tooltip
+                        content={`${market?.openInterest.toLocaleString(
+                          undefined,
+                          {
+                            maximumFractionDigits:
+                              perpContractPrecision[baseSymbol],
+                          }
+                        )} ${baseSymbol}`}
+                        placement={'bottom'}
+                      >
+                        <InformationCircleIcon className="ml-1.5 h-4 w-4 text-th-fgd-3 hover:cursor-help" />
+                      </Tooltip>
                    </div>
                  </div>
                </>
--- a/components/MarketPosition.tsx
+++ b/components/MarketPosition.tsx
@ -313,23 +313,23 @@ export default function MarketPosition() {
            )}
          </div>
        </div>
-        {basePosition && (
+        {basePosition ? (
          <Button
            onClick={() => setShowMarketCloseModal(true)}
            className="mt-2.5 w-full"
          >
            <span>{t('market-close')}</span>
          </Button>
-        )}
+        ) : null}
      </div>
-      {showMarketCloseModal && (
+      {showMarketCloseModal ? (
        <MarketCloseModal
          isOpen={showMarketCloseModal}
          onClose={handleCloseWarning}
          market={selectedMarket}
          marketIndex={marketIndex}
        />
-      )}
+      ) : null}
    </>
  )
 }
--- a/components/MarketsTable.tsx
+++ b/components/MarketsTable.tsx
@ -1,6 +1,6 @@
 import { useMemo } from 'react'
 import Link from 'next/link'
-import { formatUsdValue, usdFormatter } from '../utils'
+import { formatUsdValue, perpContractPrecision, usdFormatter } from '../utils'
 import { Table, Td, Th, TrBody, TrHead } from './TableElements'
 import { useViewport } from '../hooks/useViewport'
 import { breakpoints } from './TradePageGrid'
@ -178,14 +178,14 @@ const MarketsTable = ({ isPerpMarket }) => {
                <Th>
                  <LinkButton
                    className="flex items-center no-underline"
-                    onClick={() => requestSort('openInterest')}
+                    onClick={() => requestSort('openInterestUsd')}
                  >
                    <span className="font-normal text-th-fgd-3">
                      {t('open-interest')}
                    </span>
                    <ArrowSmDownIcon
                      className={`default-transition ml-1 h-4 w-4 flex-shrink-0 ${
-                        sortConfig?.key === 'openInterest'
+                        sortConfig?.key === 'openInterestUsd'
                          ? sortConfig.direction === 'ascending'
                            ? 'rotate-180 transform'
                            : 'rotate-360 transform'
@ -212,6 +212,7 @@ const MarketsTable = ({ isPerpMarket }) => {
              low24h,
              name,
              openInterest,
+              openInterestUsd,
              volumeUsd24h,
            } = market
            const fundingApr = funding1h
@ -286,12 +287,18 @@ const MarketsTable = ({ isPerpMarket }) => {
                      )}
                    </Td>
                    <Td>
-                      {openInterest ? (
+                      {openInterestUsd ? (
                        <>
-                          <span>{openInterest.toLocaleString()}</span>{' '}
-                          <span className="text-xs text-th-fgd-3">
-                            {baseSymbol}
-                          </span>
+                          <span>{usdFormatter(openInterestUsd, 0)}</span>{' '}
+                          {openInterest ? (
+                            <div className="text-xs text-th-fgd-4">
+                              {openInterest.toLocaleString(undefined, {
+                                maximumFractionDigits:
+                                  perpContractPrecision[baseSymbol],
+                              })}{' '}
+                              {baseSymbol}
+                            </div>
+                          ) : null}
                        </>
                      ) : (
                        <span className="text-th-fgd-4">Unavailable</span>
--- a/components/OpenOrdersTable.tsx
+++ b/components/OpenOrdersTable.tsx
@ -251,10 +251,14 @@ const MobileTable = ({
                      {order.side.toUpperCase()}
                    </span>
                    {order.perpTrigger
-                      ? `${order.size} ${
-                          order.triggerCondition
-                        } ${formatUsdValue(order.triggerPrice)}`
-                      : `${order.size} at ${formatUsdValue(order.price)}`}
+                      ? `${order.size.toLocaleString(undefined, {
+                          maximumFractionDigits: 4,
+                        })} ${order.triggerCondition} ${formatUsdValue(
+                          order.triggerPrice
+                        )}`
+                      : `${order.size.toLocaleString(undefined, {
+                          maximumFractionDigits: 4,
+                        })} at ${formatUsdValue(order.price)}`}
                  </div>
                </div>
              </div>
--- a/components/Orderbook.tsx
+++ b/components/Orderbook.tsx
@ -1,6 +1,6 @@
 import React, { useRef, useEffect, useState, useMemo } from 'react'
 import Big from 'big.js'
-import { isEqual as isEqualLodash } from 'lodash'
+import isEqualLodash from 'lodash/isEqual'
 import useInterval from '../hooks/useInterval'
 import usePrevious from '../hooks/usePrevious'
 import {
--- a/components/SwapTokenInsights.tsx
+++ b/components/SwapTokenInsights.tsx
@ -17,7 +17,6 @@ const insightTypeVals = ['best', 'worst']
 dayjs.extend(relativeTime)

 const SwapTokenInsights = ({ formState, jupiterTokens, setOutputToken }) => {
-  // FIXME: Add correct type for
  const [tokenInsights, setTokenInsights] = useState<any>([])
  const [filteredTokenInsights, setFilteredTokenInsights] = useState<any>([])
  const [insightType, setInsightType] = useState(insightTypeVals[0])
--- a/components/TopBar.tsx
+++ b/components/TopBar.tsx
@ -14,6 +14,7 @@ import TradeNavMenu from './TradeNavMenu'
 import {
  CalculatorIcon,
  CurrencyDollarIcon,
+  LibraryIcon,
  LightBulbIcon,
  UserAddIcon,
 } from '@heroicons/react/outline'
@ -103,6 +104,12 @@ const TopBar = () => {
                      true,
                      <LightBulbIcon className="h-4 w-4" key="learn" />,
                    ],
+                    [
+                      t('governance'),
+                      'https://dao.mango.markets/',
+                      true,
+                      <LibraryIcon className="h-4 w-4" key="governance" />,
+                    ],
                    [
                      'Mango v2',
                      'https://v2.mango.markets',
--- a/components/TradeHistoryFilterModal.tsx
+++ b/components/TradeHistoryFilterModal.tsx
@ -16,9 +16,7 @@ import useMangoGroupConfig from '../hooks/useMangoGroupConfig'
 import { Popover, Transition } from '@headlessui/react'
 import Checkbox from './Checkbox'
 import dayjs from 'dayjs'
-import DatePicker from './DatePicker'
-
-import 'react-datepicker/dist/react-datepicker.css'
+import DateRangePicker from './DateRangePicker'

 interface TradeHistoryFilterModalProps {
  filters: any
@ -126,7 +124,7 @@ const TradeHistoryFilterModal: FunctionComponent<
  useEffect(() => {
    if (dateFrom && dateTo) {
      const dateFromTimestamp = dayjs(dateFrom).unix() * 1000
-      const dateToTimestamp = dayjs(dateTo).unix() * 1000
+      const dateToTimestamp = (dayjs(dateTo).unix() + 86399) * 1000
      // filter should still work if users get from/to backwards
      const from =
        dateFromTimestamp < dateToTimestamp
@ -186,13 +184,13 @@ const TradeHistoryFilterModal: FunctionComponent<
      <div className="pb-4">
        <p className="font-bold text-th-fgd-1">{t('date')}</p>
        <div className="flex items-center space-x-2">
-          <div className="w-1/2">
-            <Label>{t('from')}</Label>
-            <DatePicker date={dateFrom} setDate={setDateFrom} />
-          </div>
-          <div className="w-1/2">
-            <Label>{t('to')}</Label>
-            <DatePicker date={dateTo} setDate={setDateTo} />
+          <div className="w-full">
+            <DateRangePicker
+              startDate={dateFrom}
+              setStartDate={setDateFrom}
+              endDate={dateTo}
+              setEndDate={setDateTo}
+            />
          </div>
        </div>
      </div>
--- a/components/TradeNavMenu.tsx
+++ b/components/TradeNavMenu.tsx
@ -22,7 +22,7 @@ const initialMenuCategories = [
  { name: 'Spot', desc: 'spot-desc' },
 ]

-export const FAVORITE_MARKETS_KEY = 'favoriteMarkets'
+export const FAVORITE_MARKETS_KEY = 'favoriteMarkets-0.1'

 const TradeNavMenu = () => {
  const [favoriteMarkets] = useLocalStorageState(FAVORITE_MARKETS_KEY, [])
@ -55,7 +55,7 @@ const TradeNavMenu = () => {
        ? perpMarketsInfo
        : activeMenuCategory === 'Spot'
        ? spotMarketsInfo
-        : favoriteMarkets,
+        : marketsInfo.filter((mkt) => favoriteMarkets.includes(mkt.name)),
    [activeMenuCategory, marketsInfo]
  )

@ -235,20 +235,20 @@ export const FavoriteMarketButton = ({ market }) => {
  }

  const removeFromFavorites = (mkt) => {
-    setFavoriteMarkets(favoriteMarkets.filter((m: any) => m.name !== mkt.name))
+    setFavoriteMarkets(favoriteMarkets.filter((m) => m.name !== mkt))
  }

-  return favoriteMarkets.find((mkt: any) => mkt.name === market.name) ? (
+  return favoriteMarkets.find((mkt) => mkt === market.name) ? (
    <button
      className="default-transition flex items-center justify-center text-th-primary hover:text-th-fgd-3"
-      onClick={() => removeFromFavorites(market)}
+      onClick={() => removeFromFavorites(market.name)}
    >
      <FilledStarIcon className="h-5 w-5" />
    </button>
  ) : (
    <button
      className="default-transition flex items-center justify-center text-th-fgd-4 hover:text-th-primary"
-      onClick={() => addToFavorites(market)}
+      onClick={() => addToFavorites(market.name)}
    >
      <StarIcon className="h-5 w-5" />
    </button>
--- a/components/TradePageGrid.tsx
+++ b/components/TradePageGrid.tsx
@ -1,6 +1,7 @@
 import dynamic from 'next/dynamic'
 import { Responsive, WidthProvider } from 'react-grid-layout'
-import { round, max } from 'lodash'
+import round from 'lodash/round'
+import max from 'lodash/max'
 import MobileTradePage from './mobile/MobileTradePage'

 const TVChartContainer = dynamic(
--- a/components/account_page/AccountFunding.tsx
+++ b/components/account_page/AccountFunding.tsx
@ -9,7 +9,7 @@ import {
  TrBody,
  TrHead,
 } from '../TableElements'
-import { isEmpty } from 'lodash'
+import isEmpty from 'lodash/isEmpty'
 import { useTranslation } from 'next-i18next'
 import Select from '../Select'
 import Pagination from '../Pagination'
--- a/components/account_page/AccountInterest.tsx
+++ b/components/account_page/AccountInterest.tsx
@ -12,7 +12,7 @@ import {
  TrHead,
 } from '../TableElements'
 import { useTranslation } from 'next-i18next'
-import { isEmpty } from 'lodash'
+import isEmpty from 'lodash/isEmpty'
 import usePagination from '../../hooks/usePagination'
 import { numberCompactFormatter, roundToDecimal } from '../../utils/'
 import Pagination from '../Pagination'
--- a/components/account_page/AccountPerformance.tsx
+++ b/components/account_page/AccountPerformance.tsx
@ -3,7 +3,7 @@ import dayjs from 'dayjs'
 import useMangoStore from '../../stores/useMangoStore'
 import { Table, Td, Th, TrBody, TrHead } from '../TableElements'
 import { useTranslation } from 'next-i18next'
-import { isEmpty } from 'lodash'
+import isEmpty from 'lodash/isEmpty'
 import usePagination from '../../hooks/usePagination'
 import { numberCompactFormatter } from '../../utils/'
 import Pagination from '../Pagination'
--- a/components/account_page/MangoAccountLookup.tsx
+++ b/components/account_page/MangoAccountLookup.tsx
@ -15,7 +15,7 @@ export const MangoAccountLookup = () => {
  const validatePubKey = (key: string) => {
    try {
      const pubkey = new PublicKey(key)
-      return PublicKey.isOnCurve(pubkey.toBuffer())
+      return !!pubkey
    } catch (e) {
      return false
    }
--- a/components/account_page/PerformanceChart.tsx
+++ b/components/account_page/PerformanceChart.tsx
@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react'
 import { useTheme } from 'next-themes'
-import { cloneDeep } from 'lodash'
+import cloneDeep from 'lodash/cloneDeep'
 import dayjs from 'dayjs'
 import {
  AreaChart,
--- a/hooks/useBalances.tsx
+++ b/hooks/useBalances.tsx
@ -7,7 +7,7 @@ import {
 } from '@blockworks-foundation/mango-client'
 import useMangoStore from '../stores/useMangoStore'
 import { i80f48ToPercent } from '../utils/index'
-import { sumBy } from 'lodash'
+import sumBy from 'lodash/sumBy'
 import { I80F48 } from '@blockworks-foundation/mango-client'
 import useMangoAccount from './useMangoAccount'

--- a/hooks/useMangoStats.tsx
+++ b/hooks/useMangoStats.tsx
@ -38,7 +38,7 @@ const useMangoStats = () => {
  useEffect(() => {
    const fetchHistoricalStats = async () => {
      const response = await fetch(
-        `https://mango-stats-v3.herokuapp.com/spot?mangoGroup=${mangoGroupName}`
+        `https://mango-transaction-log.herokuapp.com/v3/stats/spot_stats_hourly?mango-group=${mangoGroupName}`
      )
      const stats = await response.json()
      setStats(stats)
@ -49,7 +49,7 @@ const useMangoStats = () => {
  useEffect(() => {
    const fetchHistoricalPerpStats = async () => {
      const response = await fetch(
-        `https://mango-stats-v3.herokuapp.com/perp?mangoGroup=${mangoGroupName}`
+        `https://mango-transaction-log.herokuapp.com/v3/stats/perp_stats_hourly?mango-group=${mangoGroupName}`
      )
      const stats = await response.json()
      setPerpStats(stats)
--- a/package.json
+++ b/package.json
@ -17,11 +17,10 @@
    "analyze": "ANALYZE=true yarn build"
  },
  "dependencies": {
-    "@blockworks-foundation/mango-client": "^3.3.27",
+    "@blockworks-foundation/mango-client": "^3.3.28",
    "@headlessui/react": "^0.0.0-insiders.2dbc38c",
    "@heroicons/react": "^1.0.0",
-    "@jup-ag/react-hook": "^1.0.0-beta.16",
-    "@next/bundle-analyzer": "^12.1.0",
+    "@jup-ag/react-hook": "^1.0.0-beta.19",
    "@project-serum/serum": "0.13.55",
    "@project-serum/sol-wallet-adapter": "0.2.0",
    "@solana/wallet-adapter-base": "^0.9.5",
@ -41,6 +40,7 @@
    "bignumber.js": "^9.0.2",
    "bn.js": "^5.1.0",
    "bs58": "^4.0.1",
+    "date-fns": "^2.28.0",
    "dayjs": "^1.10.4",
    "export-to-csv": "^0.2.1",
    "immer": "^9.0.1",
@ -53,9 +53,9 @@
    "rc-slider": "^9.7.5",
    "react": "^17.0.2",
    "react-cool-dimensions": "^2.0.7",
-    "react-datepicker": "^4.7.0",
    "react-dom": "^17.0.2",
    "react-grid-layout": "^1.3.3",
+    "react-nice-dates": "^3.1.0",
    "react-portal": "^4.2.1",
    "react-super-responsive-table": "^5.2.0",
    "react-swipeable-views": "^0.14.0",
@ -65,6 +65,7 @@
    "zustand": "^3.7.0"
  },
  "devDependencies": {
+    "@next/bundle-analyzer": "^12.1.0",
    "@svgr/webpack": "^6.1.2",
    "@testing-library/react": "^11.2.5",
    "@types/node": "^14.14.25",
@ -72,6 +73,7 @@
    "@typescript-eslint/eslint-plugin": "^4.33.0",
    "@typescript-eslint/parser": "^4.33.0",
    "autoprefixer": "^10.4.2",
+    "encoding": "^0.1.13",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^7.2.0",
    "eslint-plugin-react": "^7.26.0",
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@ -2,9 +2,9 @@ import Head from 'next/head'
 import { ThemeProvider } from 'next-themes'
 import '../node_modules/react-grid-layout/css/styles.css'
 import '../node_modules/react-resizable/css/styles.css'
-import '../node_modules/react-datepicker/dist/react-datepicker.css'
 import 'intro.js/introjs.css'
 import '../styles/index.css'
+import 'react-nice-dates/build/style.css'
 import '../styles/datepicker.css'
 import useHydrateStore from '../hooks/useHydrateStore'
 import Notifications from '../components/Notification'
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@ -153,6 +153,7 @@
  "funding-chart-title": "Funding – Last 30 days (current bar is delayed)",
  "futures": "Futures",
  "get-started": "Get Started",
+  "governance": "Governance",
  "health": "Health",
  "health-check": "Account Health Check",
  "health-ratio": "Health Ratio",
@ -185,7 +186,9 @@
  "intro-feature-2": "All assets count as collateral to trade or borrow",
  "intro-feature-3": "Deposit any asset and earn interest automatically",
  "intro-feature-4": "Borrow against your assets for other DeFi activities",
+  "invalid-address": "The address is invalid",
  "ioc": "IOC",
+  "language": "Language",
  "languages-tip-desc": "Choose another language here. More coming soon...",
  "languages-tip-title": "Multilingual?",
  "layout-tip-desc": "Unlock to re-arrange and re-size the trading panels to your liking.",
@ -212,7 +215,11 @@
  "maker": "Maker",
  "maker-fee": "Maker Fee",
  "mango": "Mango",
+  "mango-account-lookup-desc": "Enter a Mango account address to show account details",
+  "mango-account-lookup-title": "View a Mango Account",
  "mango-accounts": "Mango Accounts",
+  "mango-account-lookup-desc": "Enter a Mango account address to show account details",
+  "mango-account-lookup-title": "View a Mango Account",
  "margin": "Margin",
  "margin-available": "Margin Available",
  "market": "Market",
@ -367,6 +374,7 @@
  "taker": "Taker",
  "taker-fee": "Taker Fee",
  "target-period-length": "Target Period Length",
+  "theme": "Theme",
  "themes-tip-desc": "Mango, Dark or Light (if you're that way inclined).",
  "themes-tip-title": "Color Themes",
  "time": "Time",
@ -389,6 +397,7 @@
  "tooltip-lock-layout": "Lock Layout",
  "tooltip-name-onchain": "Account names are stored on-chain",
  "tooltip-post": "Post only orders are guaranteed to be the maker order or else it will be canceled.",
+  "tooltip-post-and-slide": "Post only slide is a type of limit order that will place your order one tick less than the opposite side of the book.",
  "tooltip-projected-leverage": "Projected Leverage",
  "tooltip-reduce": "Reduce only orders will only reduce your overall position.",
  "tooltip-reset-layout": "Reset Layout",
@ -431,6 +440,7 @@
  "v3-unaudited": "The V3 protocol is in public beta. This is unaudited software, use it at your own risk.",
  "v3-welcome": "Welcome to Mango",
  "value": "Value",
+  "view": "View",
  "view-all-trades": "View all trades in the Account page",
  "view-counterparty": "View Counterparty",
  "view-transaction": "View Transaction",
--- a/public/locales/es/common.json
+++ b/public/locales/es/common.json
@ -25,6 +25,7 @@
  "add-name": "Añadir nombre",
  "alerts": "Alertas",
  "all-assets": "Todos los activos",
+  "all-time": "All Time",
  "amount": "Monto",
  "approximate-time": "Tiempo aproximado",
  "asset": "Activo",
@ -152,6 +153,7 @@
  "funding-chart-title": "Fondos (últimos 30 días)",
  "futures": "Futuros",
  "get-started": "Comenzar",
+  "governance": "Governance",
  "health": "Salud",
  "health-check": "Verificación del estado de la cuenta",
  "health-ratio": "Proporción de salud",
@ -166,6 +168,8 @@
  "if-referred": "{{fee}} if referred or 10k MNGO",
  "if-referred-tooltip": "If you create your Mango Account from a referral link or have 10k MNGO in your Mango Account you get a 0.04% discount off futures fees.",
  "in-orders": "En órdenes",
+  "include-perp": "Include Perp",
+  "include-spot": "Include Spot",
  "includes-borrow": "Incluye el préstamo",
  "init-error": "No se pudo realizar la operación de depósito y cuenta de margen inicial",
  "init-health": "Salud inicial",
@ -182,7 +186,9 @@
  "intro-feature-2": "Todos los activos cuentan como garantía para negociar o pedir prestado",
  "intro-feature-3": "Deposite cualquier activo y gane intereses automáticamente",
  "intro-feature-4": "Pida prestado contra sus activos para otras actividades de DeFi",
+  "invalid-address": "The address is invalid",
  "ioc": "IOC",
+  "language": "Language",
  "languages-tip-desc": "Elija otro idioma aquí. Más próximamente...",
  "languages-tip-title": "Multilingüe?",
  "layout-tip-desc": "Desbloquee para reorganizar y cambiar el tamaño de los paneles comerciales a su gusto.",
@ -209,6 +215,8 @@
  "maker": "Maker",
  "maker-fee": "Orden límite",
  "mango": "Mango",
+  "mango-account-lookup-desc": "Enter a Mango account address to show account details",
+  "mango-account-lookup-title": "View a Mango Account",
  "mango-accounts": "Cuentas Mango",
  "margin": "Margen",
  "margin-available": "Margen disponible",
@ -310,6 +318,7 @@
  "redeem-all": "Redeem All",
  "redeem-failure": "Error al canjear MNGO",
  "redeem-pnl": "Resolver",
+  "redeem-positive": "Redeem positive",
  "redeem-success": "MNGO canjeado con éxito",
  "referrals": "Referencias",
  "refresh": "Actualizar",
@ -363,6 +372,7 @@
  "taker": "Receptor",
  "taker-fee": "Tarifa del receptor",
  "target-period-length": "Duración del período objetivo",
+  "theme": "Theme",
  "themes-tip-desc": "Mango, Oscuro o Claro (si te gusta eso).",
  "themes-tip-title": "Temas de color",
  "time": "Tiempo",
@ -427,6 +437,7 @@
  "v3-unaudited": "El protocolo V3 está en versión beta pública. Este es un software no auditado, utilícelo bajo su propio riesgo.",
  "v3-welcome": "Bienvenido a Mango V3",
  "value": "Valor",
+  "view": "View",
  "view-all-trades": "Ver todas las operaciones en la página de la cuenta",
  "view-counterparty": "Ver contraparte",
  "view-transaction": "Ver transacción",
--- a/public/locales/zh/common.json
+++ b/public/locales/zh/common.json
@ -23,6 +23,7 @@
    "add-name": "加标签",
    "alerts": "警报",
    "all-assets": "所有资产",
+    "all-time": "全历史",
    "amount": "数量",
    "approximate-time": "大概时间",
    "asset": "资产",
@ -139,7 +140,7 @@
    "favorite": "喜爱",
    "favorites": "喜爱",
    "fee": "费率",
-    "fees": "Fees",
+    "fees": "费用",
    "fee-discount": "费率折扣",
    "filter": "Filter",
    "filters-selected": "{{selectedFilters}} selected",
@ -150,6 +151,7 @@
    "funding-chart-title": "资金费 – 前30天(图表有点延迟)",
    "futures": "永续合约",
    "get-started": "开始",
+    "governance": "Governance",
    "health": "健康度",
    "health-check": "帐户健康检查",
    "health-ratio": "健康比率",
@ -161,9 +163,11 @@
    "hourly-borrow-interest": "1小时借贷利息",
    "hourly-deposit-interest": "1小时存款利息",
    "hourly-funding": "1小时资金费",
-    "if-referred": "{{fee}} if referred or 10k MNGO",
-    "if-referred-tooltip": "If you create your Mango Account from a referral link or have 10k MNGO in your Mango Account you get a 0.04% discount off futures fees.",
+    "if-referred": "{{fee}}若被推荐或拥有10k MNGO",
+    "if-referred-tooltip": "若您以推荐码创建Mango账户或在您的Mango账户中有10k MNGO，您将获得0.04%的合约费用折扣。",
    "in-orders": "在掛单中",
+    "include-perp": "包含合约",
+    "include-spot": "包含现货",
    "includes-borrow": "包括存入",
    "init-error": "创建Mango帐户与存款出错了",
    "init-health": "初始健康度",
@ -180,14 +184,16 @@
    "intro-feature-2": "所有资产都可作为交易或借贷的质押品",
    "intro-feature-3": "将任何资产存入来自动赚取利息",
    "intro-feature-4": "为了把握其他DeFi操作机会而将您的资产质押借贷",
+    "invalid-address": "您输入的地址有问题",
    "ioc": "IOC",
+    "language": "Language",
    "languages-tip-desc": "在这里可选介面语言。更多选择将来...",
    "languages-tip-title": "您会多种语言吗？",
    "layout-tip-desc": "解锁并根据您的喜好重新排列和调整交易面板的大小。",
    "layout-tip-title": "个人化页面布局",
    "learn": "学习",
    "learn-more": "学习",
-    "lend": "Lend",
+    "lend": "借出",
    "lets-go": "前往",
    "leverage": "杠杆",
    "leverage-too-high": "杠杆太高。请减少取款数量",
@ -207,6 +213,8 @@
    "maker": "挂单者",
    "maker-fee": "挂单费率",
    "mango": "Mango",
+    "mango-account-lookup-desc": "输入Mango帐户地址而查看帐户细节",
+    "mango-account-lookup-title": "查看Mango帐户",
    "mango-accounts": "Mango帐户",
    "margin": "杠杆",
    "margin-available": "可用保证金",
@ -308,6 +316,7 @@
    "redeem-all": "现实所有盈亏",
    "redeem-failure": "收获MNGO奖励出错了",
    "redeem-pnl": "结清",
+    "redeem-positive": "现实正数",
    "redeem-success": "已收获MNGO奖励了",
    "referrals": "推荐",
    "refresh": "更新",
@ -361,6 +370,7 @@
    "taker": "吃单者",
    "taker-fee": "吃单费率",
    "target-period-length": "目标期间长度",
+    "theme": "Theme",
    "themes-tip-desc": "Mango，黑暗或明亮（看您偏向）。",
    "themes-tip-title": "颜色模式",
    "time": "时间",
@ -405,7 +415,7 @@
    "trade": "交易",
    "trade-history": "交易纪录",
    "trades": "成交",
-    "trade-export-disclaimer": "Due to the nature of how trades are processed, it is not possible to guarantee that all trades will be exported. However, a best effort approach has been taken, combining several independent sources to reduce the likelihood of missing trades.",
+    "trade-export-disclaimer": "Mango尽量以几个独立的来源结合成完整交易历史，但由于交易处理方式，Mango无法保证所有交易都会导出。",
    "trades-history": "交易纪录",
    "transaction-sent": "已下订单",
    "trigger-price": "触发价格",
@ -425,6 +435,7 @@
    "v3-unaudited": "Mango V3目前还是测试版。此软体未经过审计。风险自负。",
    "v3-welcome": "欢迎到Mango V3",
    "value": "价值",
+    "view": "查看",
    "view-all-trades": "在帐户页面查看所以交易",
    "view-counterparty": "查看交易对方",
    "view-transaction": "查看交易",
--- a/public/locales/zh_tw/common.json
+++ b/public/locales/zh_tw/common.json
@ -23,6 +23,7 @@
  "add-name": "加標籤",
  "alerts": "警報",
  "all-assets": "所有資產",
+  "all-time": "全歷史",
  "amount": "數量",
  "approximate-time": "大概時間",
  "asset": "資產",
@ -139,7 +140,7 @@
  "favorite": "喜愛",
  "favorites": "喜愛",
  "fee": "費率",
-  "fees": "Fees",
+  "fees": "費用",
  "fee-discount": "費率折扣",
  "filter": "Filter",
  "filters-selected": "{{selectedFilters}} selected",
@ -150,6 +151,7 @@
  "funding-chart-title": "資金費 – 前30天(圖表有點延遲)",
  "futures": "永續合約",
  "get-started": "開始",
+  "governance": "Governance",
  "health": "健康度",
  "health-check": "帳戶健康檢查",
  "health-ratio": "健康比率",
@ -161,9 +163,11 @@
  "hourly-borrow-interest": "1小時借貸利息",
  "hourly-deposit-interest": "1小時存款利息",
  "hourly-funding": "1小時資金費",
-  "if-referred": "{{fee}} if referred or 10k MNGO",
-  "if-referred-tooltip": "If you create your Mango Account from a referral link or have 10k MNGO in your Mango Account you get a 0.04% discount off futures fees.",
+  "if-referred": "{{fee}}若被推薦或擁有10k MNGO",
+  "if-referred-tooltip": "若您以推薦碼創建Mango賬戶或在您的Mango賬戶中有10k MNGO，您將獲得0.04%的合約費用折扣。",
  "in-orders": "在掛單中",
+  "include-perp": "包含合約",
+  "include-spot": "包含現貨",
  "includes-borrow": "包括存入",
  "init-error": "創建Mango帳戶與存款出錯了",
  "init-health": "初始健康度",
@ -180,14 +184,16 @@
  "intro-feature-2": "所有資產都可作為交易或借貸的質押品",
  "intro-feature-3": "將任何資產存入來自動賺取利息",
  "intro-feature-4": "為了把握其他DeFi操作機會而將您的資產質押借貸",
+  "invalid-address": "您輸入的地址有問題",
  "ioc": "IOC",
+  "language": "Language",
  "languages-tip-desc": "在這裡可選介面語言。更多選擇將來...",
  "languages-tip-title": "您會多種語言嗎？",
  "layout-tip-desc": "解锁並根据您的喜好重新排列和调整交易面板的大小。",
  "layout-tip-title": "個人化頁面佈局",
  "learn": "學習",
  "learn-more": "學習",
-  "lend": "Lend",
+  "lend": "借出",
  "lets-go": "前往",
  "leverage": "槓桿",
  "leverage-too-high": "槓桿太高。請減少取款數量",
@ -207,6 +213,8 @@
  "maker": "掛單者",
  "maker-fee": "掛單費率",
  "mango": "Mango",
+  "mango-account-lookup-desc": "輸入Mango帳戶地址而查看帳戶細節",
+  "mango-account-lookup-title": "查看Mango帳戶",
  "mango-accounts": "Mango帳戶",
  "margin": "槓桿",
  "margin-available": "可用保證金",
@ -308,6 +316,7 @@
  "redeem-all": "現實所有盈虧",
  "redeem-failure": "收穫MNGO獎勵出錯了",
  "redeem-pnl": "實現盈虧",
+  "redeem-positive": "現實正數",
  "redeem-success": "已收穫MNGO獎勵了",
  "referrals": "推薦",
  "refresh": "更新",
@ -361,6 +370,7 @@
  "taker": "吃單者",
  "taker-fee": "吃單費率",
  "target-period-length": "目標期間長度",
+  "theme": "Theme",
  "themes-tip-desc": "Mango，黑暗或明亮（看您偏向）。",
  "themes-tip-title": "顏色模式",
  "time": "時間",
@ -405,7 +415,7 @@
  "trade": "交易",
  "trade-history": "交易紀錄",
  "trades": "成交",
-  "trade-export-disclaimer": "Due to the nature of how trades are processed, it is not possible to guarantee that all trades will be exported. However, a best effort approach has been taken, combining several independent sources to reduce the likelihood of missing trades.",
+  "trade-export-disclaimer": "Mango儘量以幾個獨立的來源結合成完整交易歷史，但由於交易處理方式，Mango無法保證所有交易都會導出。",
  "trades-history": "交易紀錄",
  "transaction-sent": "已下訂單",
  "trigger-price": "觸發價格",
@ -425,6 +435,7 @@
  "v3-unaudited": "Mango V3目前還是測試版。此軟體未經過審計。風險自負。",
  "v3-welcome": "歡迎到Mango V3",
  "value": "價值",
+  "view": "查看",
  "view-all-trades": "在帳戶頁面查看所以交易",
  "view-counterparty": "查看交易對方",
  "view-transaction": "查看交易",
--- a/styles/datepicker.css
+++ b/styles/datepicker.css
@ -1,45 +1,53 @@
-/* Date Picker */
+/* Range Picker */

-.react-datepicker {
-  @apply rounded-md border-0 bg-th-bkg-3 font-body text-th-fgd-2 ring-1 ring-th-fgd-4;
+.nice-dates .nice-dates-popover {
+  @apply max-w-[384px] bg-th-bkg-4;
 }

-.react-datepicker-popper[data-placement^='bottom'] {
-  @apply pt-1;
+.nice-dates .nice-dates-navigation {
+  @apply font-bold text-th-fgd-1;
 }

-.react-datepicker__header {
-  @apply rounded-tl-md border-none bg-th-bkg-1 text-th-fgd-1;
+.nice-dates .nice-dates-navigation_next:before {
+  @apply border-th-fgd-2 hover:border-th-primary;
 }

-.react-datepicker__header:not(.react-datepicker__header--has-time-select) {
-  @apply rounded-tr-md;
+.nice-dates .nice-dates-navigation_next:hover:before {
+  @apply border-th-primary;
 }

-.react-datepicker__current-month {
-  @apply text-th-fgd-1;
+.nice-dates .nice-dates-navigation_previous:before {
+  @apply border-th-fgd-2 hover:border-th-primary;
 }

-.react-datepicker__day-name {
+.nice-dates .nice-dates-navigation_previous:hover:before {
+  @apply border-th-primary;
+}
+
+.nice-dates .nice-dates-week-header_day {
  @apply text-th-fgd-2;
 }

-.react-datepicker__triangle {
-  @apply hidden;
+.nice-dates .nice-dates-day_date {
+  @apply text-th-fgd-3;
 }

-.react-datepicker__day {
-  @apply text-th-fgd-2 hover:bg-th-bkg-4;
+.nice-dates .-outside .nice-dates-day_date {
+  @apply text-th-fgd-4;
 }

-.react-datepicker__day--selected {
-  @apply bg-th-primary text-th-bkg-1 hover:bg-th-primary hover:text-th-bkg-1;
+.nice-dates .nice-dates-day_month {
+  @apply text-th-fgd-4;
 }

-.react-datepicker__day--keyboard-selected {
-  @apply bg-transparent ring-2 ring-inset ring-th-fgd-4;
+.nice-dates .nice-dates-day:after {
+  @apply border-th-fgd-4;
 }

-.react-datepicker__day--today {
-  @apply rounded-md ring-2 ring-inset ring-th-fgd-4;
+.nice-dates .nice-dates-day:before {
+  @apply bg-th-bkg-1;
+}
+
+.nice-dates .nice-dates-day.-selected:hover:after {
+  @apply bg-th-bkg-3;
 }
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -70,7 +70,7 @@ module.exports = {
          'fgd-1': '#E5E3EC',
          'fgd-2': '#D2CEDE',
          'fgd-3': '#C1BED3',
-          'fgd-4': '#706C81',
+          'fgd-4': '#7E7A90',
          'bkg-button': '#464063',
        },
        'th-bkg-1': 'var(--bkg-1)',
--- a/tsconfig.json
+++ b/tsconfig.json
@ -14,8 +14,8 @@
    "jsx": "preserve",
    "isolatedModules": true,
    "incremental": true,
-    "baseUrl": "."
-    // "strictNullChecks": true
+    "baseUrl": ".",
+    "strictNullChecks": true
  },
  "exclude": ["node_modules", ".next", "out", "public/datafeeds"],
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.js"]
--- a/yarn.lock
+++ b/yarn.lock
@ -1001,10 +1001,10 @@
    "@babel/helper-validator-identifier" "^7.16.7"
    to-fast-properties "^2.0.0"

-"@blockworks-foundation/mango-client@^3.3.27":
-  version "3.3.27"
-  resolved "https://registry.yarnpkg.com/@blockworks-foundation/mango-client/-/mango-client-3.3.27.tgz#a3133bf2073e0b211b5133290deed2f9d18ee1cf"
-  integrity sha512-P3StybDO57Tg288BxxEfIs2SEC//55eHogwoJ9hAcX0gmHOxzrW3uTodSMRFV1h6S5dgxCqMRCqWPF946401vQ==
+"@blockworks-foundation/mango-client@^3.3.28":
+  version "3.3.28"
+  resolved "https://registry.yarnpkg.com/@blockworks-foundation/mango-client/-/mango-client-3.3.28.tgz#cb42a86552e166ed33e2ab9548dda1e37072a050"
+  integrity sha512-nOAeF3EEibH4Wm9bOTifDvlbLQ8doqfXuCJGcH/AXdyJATNXJnWCj2sHnTFZUP0P1EYXkjynDVZUbqwdPMllCw==
  dependencies:
    "@project-serum/anchor" "^0.21.0"
    "@project-serum/serum" "0.13.55"
@ -1012,7 +1012,7 @@
    "@solana/spl-token" "^0.1.6"
    "@solana/web3.js" "^1.31.0"
    big.js "^6.1.1"
-    bn.js "^5.2.0"
+    bn.js "^5.1.0"
    buffer-layout "^1.2.1"
    cross-fetch "^3.1.5"
    dotenv "^10.0.0"
@ -1163,7 +1163,7 @@
    decimal.js "~10.3.1"
    jsbi "~4.1.0"

-"@jup-ag/react-hook@^1.0.0-beta.16":
+"@jup-ag/react-hook@^1.0.0-beta.19":
  version "1.0.0-beta.19"
  resolved "https://registry.yarnpkg.com/@jup-ag/react-hook/-/react-hook-1.0.0-beta.19.tgz#2bf77af5e397d43a4513d9d9d03eab26ae4675af"
  integrity sha512-C/PNLiPCynTlbr+ZGWQCmZttQVhUbs2TsWXdy7mf4lvhtyOr4FM+MZ6j5WS0tTSnXyRHwH4rPeKvsSYlGZYA0A==
@ -1285,7 +1285,7 @@
  resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.21.tgz#5de5a2385a35309427f6011992b544514d559aa1"
  integrity sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==

-"@popperjs/core@^2.9.0", "@popperjs/core@^2.9.2":
+"@popperjs/core@^2.9.0":
  version "2.11.4"
  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.4.tgz#d8c7b8db9226d2d7664553a0741ad7d0397ee503"
  integrity sha512-q/ytXxO5NKvyT37pmisQAItCFqA7FD/vNb8dgaJy3/630Fsc+Mz9/9f2SziBoIZ30TJooXyTwZmhi1zjXmObYg==
@ -1583,7 +1583,7 @@
    superstruct "^0.14.2"
    tweetnacl "^1.0.0"

-"@solana/web3.js@^1.17.0", "@solana/web3.js@^1.20.0", "@solana/web3.js@^1.21.0", "@solana/web3.js@^1.30.2", "@solana/web3.js@^1.31.0", "@solana/web3.js@^1.36.0":
+"@solana/web3.js@^1.17.0", "@solana/web3.js@^1.21.0":
  version "1.36.0"
  resolved "https://registry.yarnpkg.com/@solana/web3.js/-/web3.js-1.36.0.tgz#79d7d5217b49b80139f4de68953adc5b9a9a264f"
  integrity sha512-RNT1451iRR7TyW7EJKMCrH/0OXawIe4zVm0DWQASwXlR/u1jmW6FrmH0lujIh7cGTlfOVbH+2ZU9AVUPLBFzwA==
@ -1603,6 +1603,26 @@
    superstruct "^0.14.2"
    tweetnacl "^1.0.0"

+"@solana/web3.js@^1.20.0", "@solana/web3.js@^1.30.2", "@solana/web3.js@^1.31.0", "@solana/web3.js@^1.36.0":
+  version "1.37.0"
+  resolved "https://registry.yarnpkg.com/@solana/web3.js/-/web3.js-1.37.0.tgz#167b5b5d4aedc151237d9230b6142da068b0af34"
+  integrity sha512-O2iCcgkGdi2FXwVLztPIZHcBuZXdhbVLavMsG+RdEyFGzFD0tQN1rOJ+Xb5eaexjqtgcqRN+Fyg3wAhLcHJbiA==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    "@ethersproject/sha2" "^5.5.0"
+    "@solana/buffer-layout" "^4.0.0"
+    bn.js "^5.0.0"
+    borsh "^0.7.0"
+    bs58 "^4.0.1"
+    buffer "6.0.1"
+    cross-fetch "^3.1.4"
+    jayson "^3.4.4"
+    js-sha3 "^0.8.0"
+    rpc-websockets "^7.4.2"
+    secp256k1 "^4.0.2"
+    superstruct "^0.14.2"
+    tweetnacl "^1.0.0"
+
 "@solflare-wallet/pfp@^0.0.6":
  version "0.0.6"
  resolved "https://registry.yarnpkg.com/@solflare-wallet/pfp/-/pfp-0.0.6.tgz#0dc360e7ebb11029977f5cd5593b5dc5e6074bab"
@ -2319,6 +2339,15 @@ borsh@^0.4.0:
    bs58 "^4.0.0"
    text-encoding-utf-8 "^1.0.2"

+borsh@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/borsh/-/borsh-0.7.0.tgz#6e9560d719d86d90dc589bca60ffc8a6c51fec2a"
+  integrity sha512-CLCsZGIBCFnPtkNnieW/a8wmreDmfUtjU2m9yHrzPXIlNbqVs0AQrSatSG6vdNYUqdc83tkQi2eHfF98ubzQLA==
+  dependencies:
+    bn.js "^5.2.0"
+    bs58 "^4.0.0"
+    text-encoding-utf-8 "^1.0.2"
+
 brace-expansion@^1.1.7:
  version "1.1.11"
  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
@ -2801,7 +2830,7 @@ d3-shape@^2.0.0:
  dependencies:
    d3-array "2"

-date-fns@^2.24.0:
+date-fns@^2.28.0:
  version "2.28.0"
  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.28.0.tgz#9570d656f5fc13143e50c975a3b6bbeb46cd08b2"
  integrity sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==
@ -2998,6 +3027,13 @@ emoji-regex@^9.2.2:
  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72"
  integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==

+encoding@^0.1.13:
+  version "0.1.13"
+  resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.13.tgz#56574afdd791f54a8e9b2785c0582a2d26210fa9"
+  integrity sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==
+  dependencies:
+    iconv-lite "^0.6.2"
+
 enquirer@^2.3.5:
  version "2.3.6"
  resolved "https://registry.yarnpkg.com/enquirer/-/enquirer-2.3.6.tgz#2a7fe5dd634a1e4125a975ec994ff5456dc3734d"
@ -3597,6 +3633,13 @@ i18next@^21.6.12:
  dependencies:
    "@babel/runtime" "^7.17.2"

+iconv-lite@^0.6.2:
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.6.3.tgz#a52f80bf38da1952eb5c681790719871a1a72501"
+  integrity sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==
+  dependencies:
+    safer-buffer ">= 2.1.2 < 3.0.0"
+
 identity-obj-proxy@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/identity-obj-proxy/-/identity-obj-proxy-3.0.0.tgz#94d2bda96084453ef36fbc5aaec37e0f79f1fc14"
@ -4543,9 +4586,9 @@ postcss@8.4.5:
    source-map-js "^1.0.1"

 postcss@^8.1.6, postcss@^8.1.8, postcss@^8.3.5, postcss@^8.4.6, postcss@^8.4.7:
-  version "8.4.12"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.12.tgz#1e7de78733b28970fa4743f7da6f3763648b1905"
-  integrity sha512-lg6eITwYe9v6Hr5CncVbK70SoioNQIq81nsaG86ev5hAidQvmOeETBqs7jm43K2F5/Ley3ytDtriImV6TpNiSg==
+  version "8.4.7"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.7.tgz#f99862069ec4541de386bf57f5660a6c7a0875a8"
+  integrity sha512-L9Ye3r6hkkCeOETQX6iOaWZgjp3LL6Lpqm6EtgbKrgqGGteRMNb9vzBfRL96YOSu8o7x3MfIH9Mo5cPJFGrW6A==
  dependencies:
    nanoid "^3.3.1"
    picocolors "^1.0.0"
@ -4594,7 +4637,7 @@ promise-retry@^2.0.1, promise-retry@~2.0.1:
    err-code "^2.0.2"
    retry "^0.12.0"

-prop-types@15.x, prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@15.x, prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.8.1:
  version "15.8.1"
  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
  integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@ -4700,18 +4743,6 @@ react-cool-dimensions@^2.0.7:
  resolved "https://registry.yarnpkg.com/react-cool-dimensions/-/react-cool-dimensions-2.0.7.tgz#2fe6657608f034cd7c89f149ed14e79cf1cb2d50"
  integrity sha512-z1VwkAAJ5d8QybDRuYIXTE41RxGr5GYsv1bQhbOBE8cMfoZQZpcF0odL64vdgrQVzat2jayedj1GoYi80FWcbA==

-react-datepicker@^4.7.0:
-  version "4.7.0"
-  resolved "https://registry.yarnpkg.com/react-datepicker/-/react-datepicker-4.7.0.tgz#75e03b0a6718b97b84287933307faf2ed5f03cf4"
-  integrity sha512-FS8KgbwqpxmJBv/bUdA42MYqYZa+fEYcpc746DZiHvVE2nhjrW/dg7c5B5fIUuI8gZET6FOzuDgezNcj568Czw==
-  dependencies:
-    "@popperjs/core" "^2.9.2"
-    classnames "^2.2.6"
-    date-fns "^2.24.0"
-    prop-types "^15.7.2"
-    react-onclickoutside "^6.12.0"
-    react-popper "^2.2.5"
-
 react-dom@^17.0.2:
  version "17.0.2"
  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
@ -4738,11 +4769,6 @@ react-event-listener@^0.6.0:
    prop-types "^15.6.0"
    warning "^4.0.1"

-react-fast-compare@^3.0.1:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
-  integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
-
 react-grid-layout@^1.3.3:
  version "1.3.4"
  resolved "https://registry.yarnpkg.com/react-grid-layout/-/react-grid-layout-1.3.4.tgz#4fa819be24a1ba9268aa11b82d63afc4762a32ff"
@ -4778,18 +4804,12 @@ react-lifecycles-compat@^3.0.4:
  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
  integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==

-react-onclickoutside@^6.12.0:
-  version "6.12.1"
-  resolved "https://registry.yarnpkg.com/react-onclickoutside/-/react-onclickoutside-6.12.1.tgz#92dddd28f55e483a1838c5c2930e051168c1e96b"
-  integrity sha512-a5Q7CkWznBRUWPmocCvE8b6lEYw1s6+opp/60dCunhO+G6E4tDTO2Sd2jKE+leEnnrLAE2Wj5DlDHNqj5wPv1Q==
-
-react-popper@^2.2.5:
-  version "2.2.5"
-  resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-2.2.5.tgz#1214ef3cec86330a171671a4fbcbeeb65ee58e96"
-  integrity sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==
+react-nice-dates@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/react-nice-dates/-/react-nice-dates-3.1.0.tgz#1be7dc18397a54a81e6b37bae460a34c058e5a14"
+  integrity sha512-tOsA7tB2E9q+47nZwrk2ncK2rOUublNOWPVnY/N2HFDLO8slexGaAfOTKpej2KzPxCN3gcvOKeE2/9vua2LAjQ==
  dependencies:
-    react-fast-compare "^3.0.1"
-    warning "^4.0.2"
+    classnames "^2.2.6"

 react-portal@^4.2.1:
  version "4.2.1"
@ -5119,6 +5139,11 @@ safe-buffer@~5.1.1:
  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
  integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==

+"safer-buffer@>= 2.1.2 < 3.0.0":
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
+  integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
+
 scheduler@^0.20.2:
  version "0.20.2"
  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
@ -5716,7 +5741,7 @@ void-elements@3.1.0:
  resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-3.1.0.tgz#614f7fbf8d801f0bb5f0661f5b2f5785750e4f09"
  integrity sha1-YU9/v42AHwu18GYfWy9XhXUOTwk=

-warning@^4.0.1, warning@^4.0.2:
+warning@^4.0.1:
  version "4.0.3"
  resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
  integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==