Merge branch 'main' into edit-orders

2022-12-14 17:02:18 +01:00 · 2022-12-14 17:02:18 +01:00 · 7eb0e777eb
parent e82b4af188 a74771d337
commit 7eb0e777eb
32 changed files with 210 additions and 130 deletions
--- a/components/SideNav.tsx
+++ b/components/SideNav.tsx
@ -62,7 +62,7 @@ const SideNav = ({ collapsed }: { collapsed: boolean }) => {
                  leaveFrom="opacity-100"
                  leaveTo="opacity-0"
                >
-                  <span className="ml-3 text-lg font-bold text-th-fgd-1">
+                  <span className="ml-3 font-display text-lg text-th-fgd-1">
                    Mango
                  </span>
                </Transition>
--- a/components/UserSetup.tsx
+++ b/components/UserSetup.tsx
@ -244,7 +244,7 @@ const UserSetup = ({ onClose }: { onClose: () => void }) => {
      </div>
      <div className="col-span-1 flex flex-col items-center justify-center p-6 pt-24">
        <UserSetupTransition show={showSetupStep === 0}>
-          <h2 className="mb-4 text-5xl lg:text-6xl">
+          <h2 className="mb-4 font-display text-5xl tracking-normal lg:text-6xl">
            {t('onboarding:intro-heading')}
          </h2>
          <p className="mb-4 text-base">{t('onboarding:intro-desc')}</p>
@ -280,7 +280,7 @@ const UserSetup = ({ onClose }: { onClose: () => void }) => {
        <UserSetupTransition delay show={showSetupStep === 1}>
          {showSetupStep === 1 ? (
            <div>
-              <h2 className="mb-6 text-5xl lg:text-6xl">
+              <h2 className="mb-6 font-display text-5xl tracking-normal lg:text-6xl">
                {t('onboarding:connect-wallet')}
              </h2>
              <p className="mb-2 text-base">{t('onboarding:choose-wallet')}</p>
@ -333,7 +333,7 @@ const UserSetup = ({ onClose }: { onClose: () => void }) => {
          {showSetupStep === 2 ? (
            <div>
              <div className="pb-6">
-                <h2 className="mb-4 text-5xl lg:text-6xl">
+                <h2 className="mb-4 font-display text-5xl tracking-normal lg:text-6xl">
                  {t('onboarding:create-account')}
                </h2>
                <p className="text-base">
@ -386,7 +386,7 @@ const UserSetup = ({ onClose }: { onClose: () => void }) => {
        <UserSetupTransition delay show={showSetupStep === 3}>
          {showSetupStep === 3 ? (
            <div className="relative">
-              <h2 className="mb-6 text-5xl lg:text-6xl">
+              <h2 className="mb-6 font-display text-5xl tracking-normal lg:text-6xl">
                {t('onboarding:fund-account')}
              </h2>
              <UserSetupTransition show={depositToken.length > 0}>
@ -542,7 +542,7 @@ const UserSetup = ({ onClose }: { onClose: () => void }) => {
        <UserSetupTransition delay show={showSetupStep === 4}>
          {showSetupStep === 4 ? (
            <div className="relative">
-              <h2 className="mb-4 text-5xl lg:text-6xl">
+              <h2 className="mb-4 font-display text-5xl tracking-normal lg:text-6xl">
                {t('onboarding:your-profile')}
              </h2>
              <p className="text-base">{t('onboarding:profile-desc')}</p>
@ -595,7 +595,7 @@ const UserSetupTransition = ({
  return (
    <Transition
      appear
-      className="h-full w-full max-w-md"
+      className="h-full w-full max-w-lg"
      show={show}
      enter={`transition ease-in duration-300 ${delay ? 'delay-300' : ''}`}
      enterFrom="opacity-0"
--- a/components/account/AccountPage.tsx
+++ b/components/account/AccountPage.tsx
@ -81,19 +81,19 @@ const AccountPage = () => {
    INITIAL_ANIMATION_SETTINGS
  )

-  const leverage = useMemo(() => {
-    if (!group || !mangoAccount) return 0
-    const liabsValue = mangoAccount
-      .getLiabsValue(group, HealthType.init)!
-      .toNumber()
-    const totalCollateral = mangoAccount
-      .getAssetsValue(group, HealthType.init)!
-      .toNumber()
+  // const leverage = useMemo(() => {
+  //   if (!group || !mangoAccount) return 0
+  //   const liabsValue = mangoAccount
+  //     .getLiabsValue(group, HealthType.init)!
+  //     .toNumber()
+  //   const totalCollateral = mangoAccount
+  //     .getAssetsValue(group, HealthType.init)!
+  //     .toNumber()

-    if (isNaN(liabsValue / totalCollateral)) {
-      return 0
-    } else return liabsValue / totalCollateral
-  }, [mangoAccount, group])
+  //   if (isNaN(liabsValue / totalCollateral)) {
+  //     return 0
+  //   } else return liabsValue / totalCollateral
+  // }, [mangoAccount, group])

  useEffect(() => {
    if (mangoAccount) {
@ -234,12 +234,12 @@ const AccountPage = () => {
                {t('account-value')}
              </p>
            </Tooltip>
-            <div className="mb-2 flex items-center text-5xl font-bold text-th-fgd-1">
+            <div className="mb-2 flex items-center font-display text-5xl text-th-fgd-1">
              {animationSettings['number-scroll'] ? (
                group && mangoAccount ? (
                  <FlipNumbers
                    height={48}
-                    width={32}
+                    width={35}
                    play
                    delay={0.05}
                    duration={1}
@ -248,7 +248,7 @@ const AccountPage = () => {
                ) : (
                  <FlipNumbers
                    height={48}
-                    width={32}
+                    width={36}
                    play
                    delay={0.05}
                    duration={1}
@ -357,7 +357,7 @@ const AccountPage = () => {
                </div>
              }
            >
-              <p className="tooltip-underline text-sm text-th-fgd-3 xl:text-base">
+              <p className="tooltip-underline text-sm font-normal text-th-fgd-3 xl:text-base">
                {t('health')}
              </p>
            </Tooltip>
@ -412,7 +412,7 @@ const AccountPage = () => {
            </span>
          </div>
        </div>
-        <div className="col-span-5 flex border-t border-th-bkg-3 py-3 pl-6 lg:col-span-1 lg:border-l lg:border-t-0">
+        {/* <div className="col-span-5 flex border-t border-th-bkg-3 py-3 pl-6 lg:col-span-1 lg:border-l lg:border-t-0">
          <div id="account-step-six">
            <Tooltip
              content="Total position size divided by total collateral."
@ -428,7 +428,7 @@ const AccountPage = () => {
              {leverage.toFixed(2)}x
            </p>
          </div>
-        </div>
+        </div> */}
        <button
          className={`col-span-5 flex items-center justify-between border-t border-th-bkg-3 py-3 pl-6 pr-4 lg:col-span-1 lg:border-l lg:border-t-0 ${
            performanceData.length > 4
--- a/components/account/MangoAccountSummary.tsx
+++ b/components/account/MangoAccountSummary.tsx
@ -5,7 +5,7 @@ import {
 } from '@blockworks-foundation/mango-v4'
 import { formatDecimal, formatFixedDecimals } from '../../utils/numbers'
 import Button from '../shared/Button'
-import { useMemo, useState } from 'react'
+import { useState } from 'react'
 import DepositModal from '../modals/DepositModal'
 import WithdrawModal from '../modals/WithdrawModal'
 import { useTranslation } from 'next-i18next'
@ -21,18 +21,18 @@ const MangoAccountSummary = () => {
  const [showDepositModal, setShowDepositModal] = useState(false)
  const [showWithdrawModal, setShowWithdrawModal] = useState(false)

-  const leverage = useMemo(() => {
-    if (!group || !mangoAccount) return 0
-    const liabsValue = mangoAccount
-      .getLiabsValue(group, HealthType.init)
-      .toNumber()
-    const totalCollateral = mangoAccount
-      .getAssetsValue(group, HealthType.init)
-      .toNumber()
-    if (isNaN(liabsValue / totalCollateral)) {
-      return 0
-    } else return liabsValue / totalCollateral
-  }, [mangoAccount])
+  // const leverage = useMemo(() => {
+  //   if (!group || !mangoAccount) return 0
+  //   const liabsValue = mangoAccount
+  //     .getLiabsValue(group, HealthType.init)
+  //     .toNumber()
+  //   const totalCollateral = mangoAccount
+  //     .getAssetsValue(group, HealthType.init)
+  //     .toNumber()
+  //   if (isNaN(liabsValue / totalCollateral)) {
+  //     return 0
+  //   } else return liabsValue / totalCollateral
+  // }, [mangoAccount])

  return (
    <>
@ -88,12 +88,12 @@ const MangoAccountSummary = () => {
              : `$${(0).toFixed(2)}`}
          </p>
        </div>
-        <div>
+        {/* <div>
          <p className="text-sm text-th-fgd-3">{t('leverage')}</p>
          <p className="font-mono text-sm text-th-fgd-1">
            {leverage.toFixed(2)}x
          </p>
-        </div>
+        </div> */}
      </div>
      <div className="space-y-2">
        <Button
--- a/components/shared/Button.tsx
+++ b/components/shared/Button.tsx
@ -39,7 +39,7 @@ const Button: FunctionComponent<ButtonCombinedProps> = ({
          : size === 'large'
          ? 'h-12 px-6'
          : 'h-8 px-3'
-      } default-transition font-bold ${
+      } default-transition font-display ${
        theme === 'High Contrast' && !secondary
          ? 'text-th-bkg-1'
          : 'text-th-fgd-1'
--- a/components/shared/DetailedAreaChart.tsx
+++ b/components/shared/DetailedAreaChart.tsx
@ -32,6 +32,7 @@ interface DetailedAreaChartProps {
  data: any[]
  daysToShow?: string
  domain?: AxisDomain
+  heightClass?: string
  hideChange?: boolean
  hideChart?: () => void
  loading?: boolean
@ -57,6 +58,7 @@ const DetailedAreaChart: FunctionComponent<DetailedAreaChartProps> = ({
  data,
  daysToShow = '1',
  domain,
+  heightClass,
  hideChange,
  hideChart,
  loading,
@ -103,12 +105,18 @@ const DetailedAreaChart: FunctionComponent<DetailedAreaChartProps> = ({
    return data[0][yKey] <= 0 && data[data.length - 1][yKey] < data[0][yKey]
  }, [data])

+  console.log('title', title?.replace(/\s/g, ''))
+
  return (
    <FadeInFadeOut show={true}>
      <ContentBox hideBorder hidePadding>
        {loading ? (
          <SheenLoader className="flex flex-1">
-            <div className="h-[448px] w-full rounded-lg bg-th-bkg-2" />
+            <div
+              className={`${
+                heightClass ? heightClass : 'h-96'
+              } w-full rounded-lg bg-th-bkg-2`}
+            />
          </SheenLoader>
        ) : data.length ? (
          <div className="relative">
@ -134,12 +142,12 @@ const DetailedAreaChart: FunctionComponent<DetailedAreaChartProps> = ({
                          small
                            ? 'h-8 items-center text-2xl'
                            : 'mb-1 items-end text-4xl'
-                        } font-bold text-th-fgd-1`}
+                        } font-display text-th-fgd-1`}
                      >
                        {animationSettings['number-scroll'] ? (
                          <FlipNumbers
                            height={small ? 24 : 40}
-                            width={small ? 15 : 26}
+                            width={small ? 17 : 30}
                            play
                            numbers={
                              prefix +
@ -179,12 +187,12 @@ const DetailedAreaChart: FunctionComponent<DetailedAreaChartProps> = ({
                          small
                            ? 'h-8 items-center text-2xl'
                            : 'mb-1 items-end text-4xl'
-                        } font-bold text-th-fgd-1`}
+                        } font-display text-th-fgd-1`}
                      >
                        {animationSettings['number-scroll'] ? (
                          <FlipNumbers
                            height={small ? 24 : 40}
-                            width={small ? 15 : 26}
+                            width={small ? 17 : 30}
                            play
                            numbers={
                              prefix +
@ -223,7 +231,9 @@ const DetailedAreaChart: FunctionComponent<DetailedAreaChartProps> = ({
                </div>
              </div>
            </div>
-            <div className="-mt-1 h-96 w-auto">
+            <div
+              className={`-mt-1 ${heightClass ? heightClass : 'h-96'} w-auto`}
+            >
              {setDaysToShow ? (
                <div className="absolute -top-1 right-0 -mb-2 flex justify-end">
                  <ChartRangeButtons
@ -249,7 +259,7 @@ const DetailedAreaChart: FunctionComponent<DetailedAreaChartProps> = ({
                    />
                    <defs>
                      <linearGradient
-                        id="gradientArea"
+                        id={`gradientArea-${title?.replace(/\s/g, '')}`}
                        x1="0"
                        y1={flipGradientCoords ? '1' : '0'}
                        x2="0"
@ -285,7 +295,7 @@ const DetailedAreaChart: FunctionComponent<DetailedAreaChartProps> = ({
                          : COLORS.DOWN[theme]
                      }
                      strokeWidth={1.5}
-                      fill="url(#gradientArea)"
+                      fill={`url(#gradientArea-${title?.replace(/\s/g, '')})`}
                    />
                    <XAxis
                      axisLine={false}
@ -323,7 +333,11 @@ const DetailedAreaChart: FunctionComponent<DetailedAreaChartProps> = ({
            </div>
          </div>
        ) : (
-          <div className="flex h-96 items-center justify-center p-4 text-th-fgd-3">
+          <div
+            className={`flex ${
+              heightClass ? heightClass : 'h-96'
+            } items-center justify-center p-4 text-th-fgd-3`}
+          >
            <div className="">
              <NoSymbolIcon className="mx-auto mb-1 h-6 w-6 text-th-fgd-4" />
              <p className="text-th-fgd-4">{t('chart-unavailable')}</p>
--- a/components/shared/HealthImpact.tsx
+++ b/components/shared/HealthImpact.tsx
@ -60,7 +60,7 @@ const HealthImpact = ({
        </span> */}
        </div>
      ) : (
-        <span>–</span>
+        <span className="text-xs">–</span>
      )}
    </div>
  )
--- a/components/shared/MaxAmountButton.tsx
+++ b/components/shared/MaxAmountButton.tsx
@ -15,11 +15,11 @@ const MaxAmountButton = ({
 }) => {
  return (
    <LinkButton
-      className={`no-underline ${className}`}
+      className={`font-normal no-underline ${className}`}
      disabled={disabled}
      onClick={onClick}
    >
-      <span className="mr-1 font-normal text-th-fgd-4">{label}:</span>
+      <p className="mr-1 text-th-fgd-4">{label}:</p>
      <span className="font-mono text-th-fgd-2 underline">{value}</span>
    </LinkButton>
  )
--- a/components/shared/TabButtons.tsx
+++ b/components/shared/TabButtons.tsx
@ -45,7 +45,7 @@ const TabButtons: FunctionComponent<TabButtonsProps> = ({
            key={`${label}${i}`}
            onClick={() => onChange(label)}
          >
-            <span className="">{t(label)} </span>
+            <span className="font-medium">{t(label)} </span>
            {count ? (
              <div
                className={`ml-1.5 rounded ${
--- a/components/stats/PerpMarketsTable.tsx
+++ b/components/stats/PerpMarketsTable.tsx
@ -25,9 +25,7 @@ const PerpMarketsTable = () => {
  const { theme } = useTheme()
  const { width } = useViewport()
  const showTableView = width ? width > breakpoints.md : false
-  // const bids = mangoStore((s) => s.selectedMarket.bidsAccount)
-  // const asks = mangoStore((s) => s.selectedMarket.asksAccount)
-  const rates = usePerpFundingRate()
+  const rate = usePerpFundingRate()

  return (
    <ContentBox hideBorder hidePadding>
@ -63,11 +61,13 @@ const PerpMarketsTable = () => {
              const chartData = coingeckoData ? coingeckoData.prices : undefined

              let fundingRate
-              if (rates.isSuccess && rates.data) {
-                const marketRate = rates.data.find(
+              if (rate.isSuccess && market instanceof PerpMarket) {
+                const marketRate = rate?.data?.find(
                  (r) => r.market_index === market.perpMarketIndex
                )
-                fundingRate = `${marketRate?.funding_apr.toFixed(2)}%`
+                fundingRate = marketRate
+                  ? `${marketRate.funding_rate_hourly.toFixed(4)}%`
+                  : '–'
              } else {
                fundingRate = '–'
              }
--- a/components/stats/TokenStats.tsx
+++ b/components/stats/TokenStats.tsx
@ -114,15 +114,15 @@ const TokenStats = () => {

  return (
    <ContentBox hideBorder hidePadding>
-      <div className="grid grid-cols-2 gap-x-6">
+      <div className="grid grid-cols-2">
        {loadingStats ? (
-          <div className="col-span-2 py-4 px-6 md:col-span-1">
+          <div className="col-span-2 border-b border-th-bkg-3 py-4 px-6 md:col-span-1">
            <SheenLoader className="flex flex-1">
              <div className="h-96 w-full rounded-lg bg-th-bkg-2" />
            </SheenLoader>
          </div>
        ) : totalValues.length ? (
-          <div className="col-span-2 py-4 px-6 md:col-span-1">
+          <div className="col-span-2 border-b border-th-bkg-3 py-4 px-6 md:col-span-1">
            <DetailedAreaChart
              data={totalValues.concat([
                {
@ -132,6 +132,7 @@ const TokenStats = () => {
                },
              ])}
              daysToShow={'999'}
+              heightClass="h-72"
              prefix="$"
              tickFormat={(x) => `$${x.toFixed(2)}`}
              title={t('total-deposit-value')}
@ -141,13 +142,13 @@ const TokenStats = () => {
          </div>
        ) : null}
        {loadingStats ? (
-          <div className="col-span-2 border-t border-th-bkg-3 py-4 px-6 md:col-span-1 md:border-l md:border-t-0 md:pl-6">
+          <div className="col-span-2 border-b border-th-bkg-3 py-4 px-6 md:col-span-1 md:border-l md:pl-6">
            <SheenLoader className="flex flex-1">
              <div className="h-96 w-full rounded-lg bg-th-bkg-2" />
            </SheenLoader>
          </div>
        ) : totalValues.length ? (
-          <div className="col-span-2 border-t border-th-bkg-3 py-4 px-6 md:col-span-1 md:border-l md:border-t-0 md:pl-6">
+          <div className="col-span-2 border-b border-th-bkg-3 py-4 px-6 md:col-span-1 md:border-l md:pl-6">
            <DetailedAreaChart
              data={totalValues.concat([
                {
@ -157,6 +158,7 @@ const TokenStats = () => {
                },
              ])}
              daysToShow={'999'}
+              heightClass="h-72"
              prefix="$"
              tickFormat={(x) => `$${x.toFixed(2)}`}
              title={t('total-borrow-value')}
--- a/components/swap/SwapFormTokenList.tsx
+++ b/components/swap/SwapFormTokenList.tsx
@ -125,13 +125,15 @@ const SwapFormTokenList = ({
      group &&
      mangoAccount &&
      outputBank &&
+      inputBank &&
      type === 'input'
    ) {
      const filteredSortedTokens = mangoTokens
        .map((token) => {
          const max = getTokenInMax(
            mangoAccount,
-            token.address,
+            inputBank.mint,
+            outputBank.mint,
            group,
            useMargin
          )
--- a/components/swap/SwapTokenChart.tsx
+++ b/components/swap/SwapTokenChart.tsx
@ -182,11 +182,11 @@ const SwapTokenChart = () => {
              ) : null}
              {mouseData ? (
                <>
-                  <div className="mb-1 flex flex-col text-5xl font-bold text-th-fgd-1 md:flex-row md:items-end">
+                  <div className="mb-1 flex flex-col font-display text-5xl text-th-fgd-1 md:flex-row md:items-end">
                    {animationSettings['number-scroll'] ? (
                      <FlipNumbers
                        height={48}
-                        width={32}
+                        width={35}
                        play
                        numbers={formatFixedDecimals(mouseData['price'])}
                      />
@ -205,11 +205,11 @@ const SwapTokenChart = () => {
                </>
              ) : (
                <>
-                  <div className="mb-1 flex flex-col text-5xl font-bold text-th-fgd-1 md:flex-row md:items-end">
+                  <div className="mb-1 flex flex-col font-display text-5xl text-th-fgd-1 md:flex-row md:items-end">
                    {animationSettings['number-scroll'] ? (
                      <FlipNumbers
                        height={48}
-                        width={32}
+                        width={35}
                        play
                        numbers={formatFixedDecimals(
                          chartData[chartData.length - 1]['price']
--- a/components/swap/useTokenMax.tsx
+++ b/components/swap/useTokenMax.tsx
@ -5,6 +5,7 @@ import mangoStore from '@store/mangoStore'
 import { floorToDecimal } from '../../utils/numbers'
 import useMangoAccount from '../../hooks/useMangoAccount'
 import useMangoGroup from 'hooks/useMangoGroup'
+import { PublicKey } from '@solana/web3.js'

 export const getMaxWithdrawForBank = (
  group: Group,
@ -26,12 +27,13 @@ export const getMaxWithdrawForBank = (

 export const getTokenInMax = (
  mangoAccount: MangoAccount,
-  inputTokenAddress: string,
+  inputMint: PublicKey,
+  outputMint: PublicKey,
  group: Group,
  useMargin: boolean
 ) => {
-  const outputBank = mangoStore.getState().swap.outputBank
-  const inputBank = group.banksMapByMint.get(inputTokenAddress)?.[0]
+  const inputBank = group.getFirstBankByMint(inputMint)
+  const outputBank = group.getFirstBankByMint(outputMint)

  if (!group || !inputBank || !mangoAccount || !outputBank) {
    return {
@ -72,16 +74,6 @@ export const getTokenInMax = (
      )
    : Decimal.min(maxAmountWithoutMargin, inputBankVaultBalance)

-  console.log(
-    'maxUiAmountWithBorrow',
-    mangoAccount.getMaxSourceUiForTokenSwap(
-      group,
-      inputBank.mint,
-      outputBank.mint,
-      1
-    )
-  )
-
  const maxAmountWithBorrow = Decimal.min(
    maxUiAmountWithBorrow,
    inputBankVaultBalance
@ -98,12 +90,14 @@ export const useTokenMax = (useMargin = true) => {
  const { mangoAccount } = useMangoAccount()
  const { group } = useMangoGroup()
  const inputBank = mangoStore((s) => s.swap.inputBank)
+  const outputBank = mangoStore((s) => s.swap.outputBank)

  const tokenInMax = useMemo(() => {
-    if (mangoAccount && group && inputBank) {
+    if (mangoAccount && group && inputBank && outputBank) {
      return getTokenInMax(
        mangoAccount,
-        inputBank?.mint.toString(),
+        inputBank.mint,
+        outputBank.mint,
        group,
        useMargin
      )
@ -114,7 +108,7 @@ export const useTokenMax = (useMargin = true) => {
      amountWithBorrow: new Decimal(0),
      decimals: 6,
    }
-  }, [mangoAccount, group, useMargin, inputBank])
+  }, [mangoAccount, group, useMargin, inputBank, outputBank])

  return tokenInMax
 }
--- a/components/token/TokenPage.tsx
+++ b/components/token/TokenPage.tsx
@ -116,11 +116,11 @@ const TokenPage = () => {
                  <h1 className="text-base font-normal">{bank.name}</h1>
                )}
              </div>
-              <div className="flex items-end space-x-3 text-5xl font-bold text-th-fgd-1">
+              <div className="flex items-end space-x-3 font-display text-5xl text-th-fgd-1">
                {animationSettings['number-scroll'] ? (
                  <FlipNumbers
                    height={48}
-                    width={32}
+                    width={35}
                    play
                    delay={0.05}
                    duration={1}
--- a/components/trade/AdvancedTradeForm.tsx
+++ b/components/trade/AdvancedTradeForm.tsx
@ -192,21 +192,37 @@ const AdvancedTradeForm = () => {

  useEffect(() => {
    const group = mangoStore.getState().group
-    if (!group || !marketPrice || !selectedMarket) return
-    let tickSize: number
-    if (selectedMarket instanceof Serum3Market) {
-      const market = group.getSerum3ExternalMarket(
-        selectedMarket.serumMarketExternal
-      )
-      tickSize = market.tickSize
-    } else {
-      tickSize = selectedMarket.tickSize
+    if (
+      tradeForm.tradeType === 'Market' &&
+      marketPrice &&
+      selectedMarket &&
+      group
+    ) {
+      let tickSize: number
+      if (selectedMarket instanceof Serum3Market) {
+        const market = group.getSerum3ExternalMarket(
+          selectedMarket.serumMarketExternal
+        )
+        tickSize = market.tickSize
+      } else {
+        tickSize = selectedMarket.tickSize
+      }
+      if (tradeForm.baseSize) {
+        const baseSize = new Decimal(tradeForm.baseSize).toNumber()
+        const orderbook = mangoStore.getState().selectedMarket.orderbook
+        const price = calculateMarketPrice(orderbook, baseSize, tradeForm.side)
+        const quoteSize = baseSize * price
+        set((s) => {
+          s.tradeForm.price = price.toFixed(getDecimalCount(tickSize))
+          s.tradeForm.quoteSize = quoteSize.toFixed(getDecimalCount(tickSize))
+        })
+      } else {
+        set((s) => {
+          s.tradeForm.price = marketPrice.toFixed(getDecimalCount(tickSize))
+        })
+      }
    }
-
-    set((s) => {
-      s.tradeForm.price = marketPrice.toFixed(getDecimalCount(tickSize))
-    })
-  }, [set, marketPrice, selectedMarket])
+  }, [marketPrice, selectedMarket, tradeForm])

  const handlePlaceOrder = useCallback(async () => {
    const client = mangoStore.getState().client
--- a/components/trade/Orderbook.tsx
+++ b/components/trade/Orderbook.tsx
@ -572,6 +572,7 @@ const OrderbookRow = ({
  minOrderSize: number
  tickSize: number
 }) => {
+  const tradeForm = mangoStore((s) => s.tradeForm)
  const element = useRef<HTMLDivElement>(null)
  const [animationSettings] = useLocalStorageState(
    ANIMATION_SETTINGS_KEY,
@ -608,15 +609,29 @@ const OrderbookRow = ({
    const set = mangoStore.getState().set
    set((state) => {
      state.tradeForm.price = formattedPrice.toFixed()
+      if (tradeForm.baseSize && tradeForm.tradeType === 'Limit') {
+        const quoteSize = floorToDecimal(
+          formattedPrice.mul(new Decimal(tradeForm.baseSize)),
+          getDecimalCount(tickSize)
+        )
+        state.tradeForm.quoteSize = quoteSize.toFixed()
+      }
    })
-  }, [formattedPrice])
+  }, [formattedPrice, tradeForm])

  const handleSizeClick = useCallback(() => {
    const set = mangoStore.getState().set
    set((state) => {
      state.tradeForm.baseSize = formattedSize.toString()
+      if (formattedSize && tradeForm.price) {
+        const quoteSize = floorToDecimal(
+          formattedSize.mul(new Decimal(tradeForm.price)),
+          getDecimalCount(tickSize)
+        )
+        state.tradeForm.quoteSize = quoteSize.toString()
+      }
    })
-  }, [formattedSize])
+  }, [formattedSize, tradeForm])

  const groupingDecimalCount = useMemo(
    () => getDecimalCount(grouping),
--- a/components/trade/Slippage.tsx
+++ b/components/trade/Slippage.tsx
@ -31,14 +31,12 @@ const Slippage = () => {
  }, [tradeForm, markPrice, selectedMarket])

  return slippage ? (
-    <div className="flex justify-between">
+    <div className="flex justify-between text-xs">
      <Tooltip content={t('trade:tooltip-slippage')}>
-        <p className="tooltip-underline mr-4 mb-1 text-xs">
-          {t('trade:est-slippage')}
-        </p>
+        <p className="tooltip-underline mr-4">{t('trade:est-slippage')}</p>
      </Tooltip>
      <p
-        className={`text-xs ${
+        className={`${
          slippage <= 1
            ? 'text-th-success'
            : slippage <= 3
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@ -6,14 +6,10 @@ class MyDocument extends Document {
    return (
      <Html>
        <Head>
-          <link
+          {/* <link
            href="https://fonts.googleapis.com/css2?family=Lato:wght@200;300;400;500;600;700&display=swap"
            rel="stylesheet"
-          />
-          {/* <link
-            href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono&display=swap"
-            rel="stylesheet"
-          ></link> */}
+          /> */}
          <Script
            src="/datafeeds/udf/dist/bundle.js"
            strategy="beforeInteractive"
--- a/pages/stats.tsx
+++ b/pages/stats.tsx
@ -10,6 +10,7 @@ export async function getStaticProps({ locale }: { locale: string }) {
        'onboarding',
        'profile',
        'token',
+        'trade',
      ])),
    },
  }
--- a/public/fonts/TT_Commons_Pro_DemiBold.woff2
+++ b/public/fonts/TT_Commons_Pro_DemiBold.woff2
--- a/public/fonts/TT_Commons_Pro_Expanded_DemiBold.woff2
+++ b/public/fonts/TT_Commons_Pro_Expanded_DemiBold.woff2
--- a/public/fonts/TT_Commons_Pro_Medium.woff2
+++ b/public/fonts/TT_Commons_Pro_Medium.woff2
--- a/public/fonts/TT_Commons_Pro_Mono_DemiBold.woff2
+++ b/public/fonts/TT_Commons_Pro_Mono_DemiBold.woff2
--- a/public/fonts/TT_Commons_Pro_Mono_Regular.woff2
+++ b/public/fonts/TT_Commons_Pro_Mono_Regular.woff2
--- a/public/fonts/TT_Commons_Pro_Regular.woff2
+++ b/public/fonts/TT_Commons_Pro_Regular.woff2
--- a/public/fonts/roboto.woff
+++ b/public/fonts/roboto.woff
--- a/public/styles/tradingview.css
+++ b/public/styles/tradingview.css
@ -1,4 +1,22 @@
-@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400&display=swap');
+/* @import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400&display=swap'); */
+
+@font-face {
+  font-family: 'TT Commons';
+  font-weight: normal;
+  src: url('/fonts/TT_Commons_Pro_Regular.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'TT Commons';
+  font-weight: medium;
+  src: url('/fonts/TT_Commons_Pro_Medium.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'TT Commons';
+  font-weight: bold;
+  src: url('/fonts/TT_Commons_Pro_DemiBold.woff2') format('woff2');
+}

 :root:not(.theme-dark) {
  --black: #fff;
@ -57,7 +75,7 @@ html .chart-page .chart-container-border {
 }

 html .chart-page {
-  font-family: 'Lato', sans-serif;
+  font-family: 'TT Commons', sans-serif;
 }

 html .loading-indicator {
@ -156,7 +174,7 @@ html.theme-dark .chart-page .chart-container-border {
 }

 html.theme-dark .chart-page {
-  font-family: 'Lato', sans-serif;
+  font-family: 'TT Commons', sans-serif;
 }

 html.theme-dark .loading-indicator {
--- a/store/mangoStore.ts
+++ b/store/mangoStore.ts
@ -559,6 +559,7 @@ const mangoStore = create<MangoStore>()(
              }
            })
          } catch (e) {
+            notify({ type: 'info', title: 'Unable to refresh data' })
            console.error('Error fetching group', e)
          }
        },
--- a/styles/globals.css
+++ b/styles/globals.css
@ -3,8 +3,31 @@
@tailwind utilities;

@font-face {
-  font-family: 'Roboto Mono';
-  src: url('/fonts/roboto.woff');
+  font-family: 'TT Mono';
+  src: url('/fonts/TT_Commons_Pro_Mono_Regular.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'TT Commons Expanded';
+  src: url('/fonts/TT_Commons_Pro_Expanded_DemiBold.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'TT Commons';
+  font-weight: normal;
+  src: url('/fonts/TT_Commons_Pro_Regular.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'TT Commons';
+  font-weight: medium;
+  src: url('/fonts/TT_Commons_Pro_Medium.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'TT Commons';
+  font-weight: bold;
+  src: url('/fonts/TT_Commons_Pro_DemiBold.woff2') format('woff2');
 }

 /* Reset */
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -5,9 +5,9 @@ module.exports = {
  ],
  theme: {
    fontFamily: {
-      display: ['Lato, sans-serif'],
-      body: ['Lato, sans-serif'],
-      mono: ['Roboto Mono'],
+      display: ['TT Commons Expanded, sans-serif'],
+      body: 'TT Commons, sans-serif',
+      mono: ['TT Mono, mono'],
    },
    extend: {
      animation: {
--- a/yarn.lock
+++ b/yarn.lock
@ -52,7 +52,7 @@

 "@blockworks-foundation/mango-v4@https://tylersssss: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@github.com/blockworks-foundation/mango-v4.git#main":
  version "0.0.1-beta.6"
-  resolved "https://tylersssss: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@github.com/blockworks-foundation/mango-v4.git#d0c85f14e673b71b38653af71369709e5ca57da6"
+  resolved "https://tylersssss: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@github.com/blockworks-foundation/mango-v4.git#2cd8c048f3eb25b40a4124464a95240f362488b1"
  dependencies:
    "@project-serum/anchor" "^0.25.0"
    "@project-serum/serum" "^0.13.65"
@ -1098,9 +1098,9 @@
    "@wallet-standard/base" "^1.0.0"

 "@solana/web3.js@^1.17.0", "@solana/web3.js@^1.21.0", "@solana/web3.js@^1.32.0", "@solana/web3.js@^1.36.0", "@solana/web3.js@^1.63.1":
-  version "1.70.0"
-  resolved "https://registry.yarnpkg.com/@solana/web3.js/-/web3.js-1.70.0.tgz#14ad207f431861397db85921aad8df4e8374e7c8"
-  integrity sha512-HwdI9LaHaszfpzgxJI44iP68mJWUeqK1TeSheKQsGkH5zlVyGWGmim50MyDWu2vXiuL8Akf2xEMSrDYyLordgg==
+  version "1.70.1"
+  resolved "https://registry.yarnpkg.com/@solana/web3.js/-/web3.js-1.70.1.tgz#4a2df47cc32a0f67be5161e772b2ceb6512281fa"
+  integrity sha512-AnaqCF1cJ3w7d0yhvLGAKAcRI+n5o+ursQihhoTe4cUh8/9d4gbT73SoHYElS7e67OtAgLmSfbcC5hcOAgdvnQ==
  dependencies:
    "@babel/runtime" "^7.12.5"
    "@noble/ed25519" "^1.7.0"
@ -1558,9 +1558,9 @@
  integrity sha512-evMDG1bC4rgQg4ku9tKpuMh5iBNEwNa3tf9zRHdP1qlv+1WUg44xat4IxCE14gIpZRGUUWAx2VhItCZc25NfMA==

 "@types/node@*":
-  version "18.11.12"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.11.12.tgz#89e7f8aa8c88abf432f9bd594888144d7dba10aa"
-  integrity sha512-FgD3NtTAKvyMmD44T07zz2fEf+OKwutgBCEVM8GcvMGVGaDktiLNTDvPwC/LUe3PinMW+X6CuLOF2Ui1mAlSXg==
+  version "18.11.15"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.11.15.tgz#de0e1fbd2b22b962d45971431e2ae696643d3f5d"
+  integrity sha512-VkhBbVo2+2oozlkdHXLrb3zjsRkpdnaU2bXmX8Wgle3PUi569eLRaHGlgETQHR7lLL1w7GiG3h9SnePhxNDecw==

 "@types/node@17.0.23":
  version "17.0.23"