Merge pull request #213 from blockworks-foundation/fees-page

add fees page

components/Button.tsx

@@ -42,7 +42,7 @@ export const LinkButton: FunctionComponent<ButtonProps> = ({
       disabled={disabled}
       className={`border-0 font-bold ${
         primary ? 'text-th-primary' : 'text-th-fgd-2'
-      } underline hover:no-underline hover:opacity-60 focus:outline-none ${className}`}
+      } underline hover:no-underline hover:opacity-60 focus:outline-none disabled:cursor-not-allowed disabled:underline disabled:opacity-60 ${className}`}
       {...props}
     >
       {children}

components/FeeDiscountsTable.tsx

@@ -1,121 +0,0 @@
-import { percentFormat } from '../utils/index'
-import useSrmAccount from '../hooks/useSrmAccount'
-import {
-  MSRM_DECIMALS,
-  SRM_DECIMALS,
-} from '@project-serum/serum/lib/token-instructions'
-import Tooltip from './Tooltip'
-import { InformationCircleIcon } from '@heroicons/react/outline'
-import { useTranslation } from 'next-i18next'
-import Button from './Button'
-import useMangoStore from '../stores/useMangoStore'
-import { msrmMints, ZERO_BN } from '@blockworks-foundation/mango-client'
-import DepositMsrmModal from './DepositMsrmModal'
-import WithdrawMsrmModal from './WithdrawMsrmModal'
-import { useState } from 'react'
-
-const FeeDiscountsTable = () => {
-  const { t } = useTranslation('common')
-  const mangoAccount = useMangoStore((s) => s.selectedMangoAccount.current)
-  const connected = useMangoStore((s) => s.wallet.connected)
-  const walletTokens = useMangoStore((s) => s.wallet.tokens)
-  const { totalSrm, totalMsrm, rates } = useSrmAccount()
-  const [showDeposit, setShowDeposit] = useState(false)
-  const [showWithdraw, setShowWithdraw] = useState(false)
-  const cluster = useMangoStore.getState().connection.cluster
-
-  const ownerMsrmAccount = walletTokens.find((t) =>
-    t.account.mint.equals(msrmMints[cluster])
-  )
-
-  return (
-    <div
-      className={`flex justify-center divide-x divide-gray-500 rounded-md bg-th-bkg-1 py-6`}
-    >
-      <div className="pr-10">
-        <div className="text-center text-lg">{t('serum-fees')}</div>
-        <div
-          className={`mt-4 flex flex-col justify-between text-center text-th-fgd-4 sm:flex-row`}
-        >
-          <div className="px-4">
-            <div>
-              {totalMsrm > 0 ? 'MSRM' : 'SRM'} {t('deposits')}
-            </div>
-            <div className="text-normal text-th-fgd-3">
-              {totalMsrm > 0
-                ? totalMsrm.toLocaleString(undefined, {
-                    maximumFractionDigits: MSRM_DECIMALS,
-                  })
-                : totalSrm.toLocaleString(undefined, {
-                    maximumFractionDigits: SRM_DECIMALS,
-                  })}
-            </div>
-          </div>
-          <div className="mt-4 px-4 sm:mt-0">
-            <div>{t('maker-fee')}</div>
-            <div className="text-normal text-th-fgd-3">
-              {rates ? percentFormat.format(rates.maker) : null}
-            </div>
-          </div>
-          <div className="mt-4 px-4 sm:mt-0">
-            <div className="flex items-center">
-              <div>{t('taker-fee')}</div>
-              <div className="flex items-center">
-                <Tooltip
-                  content={t('tooltip-serum-rebate', {
-                    taker_percent: percentFormat.format(rates.taker),
-                  })}
-                >
-                  <div>
-                    <InformationCircleIcon
-                      className={`ml-2 h-5 w-5 cursor-help text-th-fgd-4`}
-                    />
-                  </div>
-                </Tooltip>
-              </div>
-            </div>
-            <div className="text-normal text-th-fgd-3">
-              {rates
-                ? new Intl.NumberFormat(undefined, {
-                    style: 'percent',
-                    minimumFractionDigits: 2,
-                    maximumFractionDigits: 3,
-                  }).format(rates.takerWithRebate)
-                : null}
-            </div>
-          </div>
-        </div>
-        {connected && mangoAccount ? (
-          <div className="mt-6 flex justify-center">
-            <Button
-              onClick={() => setShowDeposit(true)}
-              disabled={!ownerMsrmAccount}
-            >
-              {t('deposit')} MSRM
-            </Button>
-            {mangoAccount.msrmAmount.gt(ZERO_BN) ? (
-              <Button onClick={() => setShowWithdraw(true)} className="ml-2">
-                {t('withdraw')} MSRM
-              </Button>
-            ) : null}
-          </div>
-        ) : null}
-      </div>
-      {showDeposit ? (
-        <DepositMsrmModal
-          isOpen={showDeposit}
-          onClose={() => setShowDeposit(false)}
-        />
-      ) : null}
-
-      {showWithdraw ? (
-        <WithdrawMsrmModal
-          isOpen={showWithdraw}
-          onClose={() => setShowWithdraw(false)}
-        />
-      ) : null}
-    </div>
-  )
-}
-
-export default FeeDiscountsTable

components/TopBar.tsx

@@ -15,6 +15,7 @@ import Settings from './Settings'
 import TradeNavMenu from './TradeNavMenu'
 import {
   CalculatorIcon,
+  CurrencyDollarIcon,
   LightBulbIcon,
   UserAddIcon,
 } from '@heroicons/react/outline'
@@ -83,7 +84,7 @@ const TopBar = () => {
                       t('referrals'),
                       '/referral',
                       false,
-                      <UserAddIcon className="h-4 w-4" key="calculator" />,
+                      <UserAddIcon className="h-4 w-4" key="referrals" />,
                     ],
                     [
                       t('calculator'),
@@ -91,6 +92,12 @@ const TopBar = () => {
                       false,
                       <CalculatorIcon className="h-4 w-4" key="calculator" />,
                     ],
+                    [
+                      t('fees'),
+                      '/fees',
+                      false,
+                      <CurrencyDollarIcon className="h-4 w-4" key="fees" />,
+                    ],
                     [
                       t('learn'),
                       'https://docs.mango.markets/',

components/UserInfo.tsx

@@ -6,16 +6,9 @@ import PositionsTable from './PerpPositionsTable'
 import TradeHistoryTable from './TradeHistoryTable'
 import ManualRefresh from './ManualRefresh'
 import Tabs from './Tabs'
-import FeeDiscountsTable from './FeeDiscountsTable'
 import { marketConfigSelector } from '../stores/selectors'
 
-const TABS = [
-  'Balances',
-  'Orders',
-  'Positions',
-  'Trade History',
-  'Fee Discount',
-]
+const TABS = ['Balances', 'Orders', 'Positions', 'Trade History']
 
 const UserInfoTabs = ({ activeTab, setActiveTab }) => {
   const totalOpenOrders = useMangoStore(
@@ -60,8 +53,6 @@ const TabContent = ({ activeTab }) => {
       return <TradeHistoryTable numTrades={100} />
     case 'Positions':
       return <PositionsTable />
-    case 'Fee Discount':
-      return <FeeDiscountsTable />
     default:
       return <BalancesTable clickToPopulateTradeForm />
   }

components/account_page/AccountOverview.tsx

@@ -184,7 +184,7 @@ export default function AccountOverview() {
       <h2 className="mb-4">{t('assets-liabilities')}</h2>
 
       <div className="grid grid-flow-col grid-cols-1 grid-rows-2 pb-8 md:grid-cols-2 md:grid-rows-1 md:gap-4 md:pb-12">
-        <div className="rounded-md border-t border-th-bkg-4 p-3 sm:rounded-lg sm:p-4 md:border-b">
+        <div className="border-t border-th-bkg-4 p-3 sm:p-4 md:border-b">
           <div className="pb-0.5 text-th-fgd-3">{t('total-assets')}</div>
           <div className="flex items-center">
             <div className="text-xl font-bold text-th-fgd-1 md:text-2xl">
@@ -194,7 +194,7 @@ export default function AccountOverview() {
             </div>
           </div>
         </div>
-        <div className="rounded-md border-b border-t border-th-bkg-4 p-3 sm:rounded-lg sm:p-4">
+        <div className="border-b border-t border-th-bkg-4 p-3 sm:p-4">
           <div className="pb-0.5 text-th-fgd-3">{t('total-liabilities')}</div>
           <div className="flex items-center">
             <div className="text-xl font-bold text-th-fgd-1 md:text-2xl">

pages/fees.tsx

@@ -0,0 +1,217 @@
+import { useTranslation } from 'next-i18next'
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+import TopBar from '../components/TopBar'
+import PageBodyContainer from '../components/PageBodyContainer'
+import useSrmAccount from '../hooks/useSrmAccount'
+import {
+  MSRM_DECIMALS,
+  SRM_DECIMALS,
+} from '@project-serum/serum/lib/token-instructions'
+import { percentFormat } from '../utils/index'
+import Tooltip from '../components/Tooltip'
+import { InformationCircleIcon } from '@heroicons/react/outline'
+import DepositMsrmModal from '../components/DepositMsrmModal'
+import WithdrawMsrmModal from '../components/WithdrawMsrmModal'
+import { useState } from 'react'
+import { LinkButton } from '../components/Button'
+import useMangoStore from '../stores/useMangoStore'
+import { msrmMints, ZERO_BN } from '@blockworks-foundation/mango-client'
+import useFees from '../hooks/useFees'
+
+export async function getStaticProps({ locale }) {
+  return {
+    props: {
+      ...(await serverSideTranslations(locale, ['common'])),
+      // Will be passed to the page component as props
+    },
+  }
+}
+
+export default function Fees() {
+  const { t } = useTranslation('common')
+  const { totalSrm, totalMsrm, rates } = useSrmAccount()
+  const { takerFee, makerFee } = useFees()
+  const [showDeposit, setShowDeposit] = useState(false)
+  const [showWithdraw, setShowWithdraw] = useState(false)
+  const mangoAccount = useMangoStore((s) => s.selectedMangoAccount.current)
+  const connected = useMangoStore((s) => s.wallet.connected)
+  const walletTokens = useMangoStore((s) => s.wallet.tokens)
+  const cluster = useMangoStore.getState().connection.cluster
+  const ownerMsrmAccount = walletTokens.find((t) =>
+    t.account.mint.equals(msrmMints[cluster])
+  )
+  return (
+    <div className={`bg-th-bkg-1 text-th-fgd-1 transition-all`}>
+      <TopBar />
+      <PageBodyContainer>
+        <div className="flex flex-col py-4 sm:flex-row md:pb-4 md:pt-10">
+          <h1>{t('fees')}</h1>
+        </div>
+        <div className="md:rounded-lg md:bg-th-bkg-2 md:p-6">
+          <h2 className="mb-4">{t('futures')}</h2>
+
+          <div className="grid grid-cols-1 grid-rows-2 pb-8 md:grid-cols-2 md:grid-rows-1 md:gap-4">
+            <div className="border-t border-th-bkg-4 p-3 sm:p-4 md:border-b">
+              <div className="pb-0.5 text-th-fgd-3">{t('maker-fee')}</div>
+              <div className="flex items-center">
+                <div className="text-xl font-bold text-th-fgd-1 md:text-2xl">
+                  {percentFormat.format(makerFee)}
+                </div>
+              </div>
+              <div className="flex items-center">
+                <p className="mb-0">
+                  {t('if-referred', {
+                    fee: percentFormat.format(
+                      makerFee < 0
+                        ? makerFee + makerFee * 0.04
+                        : makerFee - makerFee * 0.04
+                    ),
+                  })}
+                </p>
+
+                <Tooltip content={t('if-referred-tooltip')}>
+                  <div>
+                    <InformationCircleIcon
+                      className={`ml-1.5 h-5 w-5 cursor-help text-th-fgd-3`}
+                    />
+                  </div>
+                </Tooltip>
+              </div>
+            </div>
+            <div className="border-b border-t border-th-bkg-4 p-3 sm:p-4">
+              <div className="pb-0.5 text-th-fgd-3">{t('taker-fee')}</div>
+              <div className="flex items-center">
+                <div className="text-xl font-bold text-th-fgd-1 md:text-2xl">
+                  {percentFormat.format(takerFee)}
+                </div>
+              </div>
+              <div className="flex items-center">
+                <p className="mb-0">
+                  {t('if-referred', {
+                    fee: percentFormat.format(
+                      takerFee < 0
+                        ? takerFee + takerFee * 0.04
+                        : takerFee - takerFee * 0.04
+                    ),
+                  })}
+                </p>
+
+                <Tooltip content={t('if-referred-tooltip')}>
+                  <div>
+                    <InformationCircleIcon
+                      className={`ml-1.5 h-5 w-5 cursor-help text-th-fgd-3`}
+                    />
+                  </div>
+                </Tooltip>
+              </div>
+            </div>
+          </div>
+          <h2 className="mb-4">{t('serum-fees')}</h2>
+
+          <div className="grid grid-cols-1 grid-rows-2 pb-8 md:grid-cols-3 md:grid-rows-1 md:gap-4">
+            <div className="border-t border-th-bkg-4 p-3 sm:p-4 md:border-b">
+              <div className="pb-0.5 text-th-fgd-3">{t('maker-fee')}</div>
+              <div className="flex items-center">
+                <div className="text-xl font-bold text-th-fgd-1 md:text-2xl">
+                  {rates ? percentFormat.format(rates.maker) : null}
+                </div>
+              </div>
+            </div>
+            <div className="border-t border-th-bkg-4 p-3 sm:p-4 md:border-b">
+              <div className="flex items-center pb-0.5 text-th-fgd-3">
+                {t('taker-fee')}
+                <Tooltip
+                  content={t('tooltip-serum-rebate', {
+                    taker_percent: percentFormat.format(rates.taker),
+                  })}
+                >
+                  <div>
+                    <InformationCircleIcon
+                      className={`ml-1.5 h-5 w-5 cursor-help text-th-fgd-3`}
+                    />
+                  </div>
+                </Tooltip>
+              </div>
+              <div className="flex items-center">
+                <div className="text-xl font-bold text-th-fgd-1 md:text-2xl">
+                  {rates
+                    ? new Intl.NumberFormat(undefined, {
+                        style: 'percent',
+                        minimumFractionDigits: 2,
+                        maximumFractionDigits: 3,
+                      }).format(rates.takerWithRebate)
+                    : null}
+                </div>
+              </div>
+            </div>
+            <div className="border-b border-t border-th-bkg-4 p-3 sm:p-4">
+              <div className="flex items-center justify-between pb-0.5 text-th-fgd-3">
+                {totalMsrm > 0 ? 'MSRM' : 'SRM'} {t('deposits')}
+                {connected && mangoAccount ? (
+                  <div className="flex justify-center space-x-3 pl-2">
+                    <LinkButton
+                      onClick={() => setShowDeposit(true)}
+                      disabled={!ownerMsrmAccount}
+                    >
+                      {t('deposit')}
+                    </LinkButton>
+                    {mangoAccount.msrmAmount.gt(ZERO_BN) ? (
+                      <LinkButton onClick={() => setShowWithdraw(true)}>
+                        {t('withdraw')}
+                      </LinkButton>
+                    ) : null}
+                  </div>
+                ) : null}
+              </div>
+              <div className="flex items-center">
+                <div className="text-xl font-bold text-th-fgd-1 md:text-2xl">
+                  {totalMsrm > 0
+                    ? totalMsrm.toLocaleString(undefined, {
+                        maximumFractionDigits: MSRM_DECIMALS,
+                      })
+                    : totalSrm.toLocaleString(undefined, {
+                        maximumFractionDigits: SRM_DECIMALS,
+                      })}
+                </div>
+              </div>
+            </div>
+          </div>
+          <h2 className="mb-4">{t('other')}</h2>
+          <div className="grid grid-cols-1 grid-rows-3 pb-6 md:grid-cols-3 md:grid-rows-1 md:gap-4">
+            <div className="border-t border-th-bkg-4 p-3 sm:p-4 md:border-b">
+              <div className="pb-0.5 text-th-fgd-3">{t('withdraw')}</div>
+              <div className="text-xl font-bold text-th-fgd-1 md:text-2xl">
+                0%
+              </div>
+            </div>
+            <div className="border-t border-th-bkg-4 p-3 sm:p-4 md:border-b">
+              <div className="pb-0.5 text-th-fgd-3">{t('borrow')}</div>
+              <div className="text-xl font-bold text-th-fgd-1 md:text-2xl">
+                0%
+              </div>
+            </div>
+            <div className="border-b border-t border-th-bkg-4 p-3 sm:p-4">
+              <div className="pb-0.5 text-th-fgd-3">{t('lend')}</div>
+              <div className="text-xl font-bold text-th-fgd-1 md:text-2xl">
+                0%
+              </div>
+            </div>
+          </div>
+        </div>
+      </PageBodyContainer>
+      {showDeposit ? (
+        <DepositMsrmModal
+          isOpen={showDeposit}
+          onClose={() => setShowDeposit(false)}
+        />
+      ) : null}
+
+      {showWithdraw ? (
+        <WithdrawMsrmModal
+          isOpen={showWithdraw}
+          onClose={() => setShowWithdraw(false)}
+        />
+      ) : null}
+    </div>
+  )
+}

public/locales/en/common.json

@@ -139,6 +139,7 @@
   "favorite": "Favorite",
   "favorites": "Favorites",
   "fee": "Fee",
+  "fees": "Fees",
   "fee-discount": "Fee Discount",
   "first-deposit-desc": "There is a one-time cost of 0.035 SOL when you make your first deposit. This covers the rent on the Solana Blockchain for your account.",
   "funding": "Funding",
@@ -156,6 +157,8 @@
   "hourly-borrow-interest": "Hourly Borrow Interest",
   "hourly-deposit-interest": "Hourly Deposit Interest",
   "hourly-funding": "Hourly Funding",
+  "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": "In Orders",
   "include-perp": "Include Perp",
   "include-spot": "Include Spot",
@@ -182,6 +185,7 @@
   "layout-tip-title": "Customize Layout",
   "learn": "Documentation",
   "learn-more": "Learn more",
+  "lend": "Lend",
   "lets-go": "Let's Go",
   "leverage": "Leverage",
   "leverage-too-high": "Leverage too high. Reduce the amount to withdraw",
@@ -263,6 +267,7 @@
   "orderbook": "Orderbook",
   "orderbook-animation": "Orderbook Animation",
   "orders": "Orders",
+  "other": "Other",
   "performance": "Performance",
   "performance-insights": "Performance Insights",
   "period-progress": "Period Progress",

public/locales/es/common.json

@@ -138,6 +138,7 @@
   "favorite": "Favorito",
   "favorites": "Favoritos",
   "fee": "Tarifa",
+  "fees": "Fees",
   "fee-discount": "Comisiones",
   "first-deposit-desc": "Necesita 0.035 SOL para crear una cuenta de mango.",
   "funding": "Fondos",
@@ -155,6 +156,8 @@
   "hourly-borrow-interest": "Interés por préstamo por hora",
   "hourly-deposit-interest": "Interés por depósito por hora",
   "hourly-funding": "Financiamiento por hora",
+  "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",
   "includes-borrow": "Incluye el préstamo",
   "init-error": "No se pudo realizar la operación de depósito y cuenta de margen inicial",
@@ -179,6 +182,7 @@
   "layout-tip-title": "Personalizar diseño",
   "learn": "Aprender",
   "learn-more": "Aprender más",
+  "lend": "Lend",
   "lets-go": "Vamos",
   "leverage": "Apalancamiento",
   "leverage-too-high": "Apalancamiento demasiado alto. Reducir la cantidad a retirar",
@@ -260,6 +264,7 @@
   "orderbook": "Libro de órdenes",
   "orderbook-animation": "Animación del libro de ordenes",
   "orders": "Órdenes",
+  "other": "Other",
   "performance": "Performance",
   "performance-insights": "Performance Insights",
   "period-progress": "Period Progress",

public/locales/zh/common.json

@@ -138,6 +138,7 @@
     "favorite": "喜爱",
     "favorites": "喜爱",
     "fee": "费率",
+    "fees": "Fees",
     "fee-discount": "费率折扣",
     "first-deposit-desc": "创建Mango帐户最少需要0.035 SOL。",
     "funding": "资金费",
@@ -155,6 +156,8 @@
     "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.",
     "in-orders": "在掛单中",
     "includes-borrow": "包括存入",
     "init-error": "创建Mango帐户与存款出错了",
@@ -179,6 +182,7 @@
     "layout-tip-title": "个人化页面布局",
     "learn": "学习",
     "learn-more": "学习",
+    "lend": "Lend",
     "lets-go": "前往",
     "leverage": "杠杆",
     "leverage-too-high": "杠杆太高。请减少取款数量",
@@ -260,6 +264,7 @@
     "orderbook": "订单簿",
     "orderbook-animation": "订单动画",
     "orders": "订单",
+    "other": "Other",
     "performance": "表现",
     "performance-insights": "表现分析",
     "period-progress": "期间进度",

public/locales/zh_tw/common.json

@@ -138,6 +138,7 @@
   "favorite": "喜愛",
   "favorites": "喜愛",
   "fee": "費率",
+  "fees": "Fees",
   "fee-discount": "費率折扣",
   "first-deposit-desc": "創建Mango帳戶最少需要0.035 SOL。",
   "funding": "資金費",
@@ -155,6 +156,8 @@
   "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.",
   "in-orders": "在掛單中",
   "includes-borrow": "包括存入",
   "init-error": "創建Mango帳戶與存款出錯了",
@@ -179,6 +182,7 @@
   "layout-tip-title": "個人化頁面佈局",
   "learn": "學習",
   "learn-more": "學習",
+  "lend": "Lend",
   "lets-go": "前往",
   "leverage": "槓桿",
   "leverage-too-high": "槓桿太高。請減少取款數量",
@@ -260,6 +264,7 @@
   "orderbook": "掛單簿",
   "orderbook-animation": "訂單動畫",
   "orders": "訂單",
+  "other": "Other",
   "performance": "表現",
   "performance-insights": "表現分析",
   "period-progress": "期間進度",