show tooltip against banks with collateral fees (#414)

* show tooltip against banks with collateral fees * copy update --------- Co-authored-by: Adrian Brzeziński <a.brzezinski94@gmail.com>
2024-05-09 21:02:19 +10:00 · 2024-05-09 21:02:19 +10:00 · 56eb12dc69
parent 4b54fe33c6
commit 56eb12dc69
15 changed files with 107 additions and 17 deletions
--- a/components/TokenList.tsx
+++ b/components/TokenList.tsx
@ -2,6 +2,7 @@ import { Bank } from '@blockworks-foundation/mango-v4'
 import { Disclosure, Popover, Transition } from '@headlessui/react'
 import {
  ChevronDownIcon,
+  CurrencyDollarIcon,
  EllipsisHorizontalIcon,
  XMarkIcon,
 } from '@heroicons/react/20/solid'
@ -51,6 +52,10 @@ import SheenLoader from './shared/SheenLoader'
 import useAccountInterest from 'hooks/useAccountInterest'
 import { handleGoToTradePage } from 'utils/markets'
 import TableRatesDisplay from './shared/TableRatesDisplay'
+import useCollateralFeePopupConditions from 'hooks/useCollateralFeePositions'
+import { LinkButton } from './shared/Button'
+import CollateralFeeWarningModal from './modals/CollateralFeeWarningModal'
+import InlineNotification from './shared/InlineNotification'

 export const handleOpenCloseBorrowModal = (borrowBank: Bank) => {
  const group = mangoStore.getState().group
@ -118,8 +123,9 @@ type TableData = {
 const set = mangoStore.getState().set

 const TokenList = () => {
-  const { t } = useTranslation(['common', 'token', 'trade'])
+  const { t } = useTranslation(['common', 'account', 'token', 'trade'])
  const [showCloseBorrowModal, setCloseBorrowModal] = useState(false)
+  const [showCollateralFeeModal, setShowCollateralFeeModal] = useState(false)
  const [closeBorrowBank, setCloseBorrowBank] = useState<Bank | undefined>()
  const [showZeroBalances, setShowZeroBalances] = useLocalStorageState(
    SHOW_ZERO_BALANCES_KEY,
@ -131,6 +137,7 @@ const TokenList = () => {
  const { width } = useViewport()
  const showTableView = width ? width > breakpoints.md : false
  const banks = useBanksWithBalances('balance')
+  const { isCharged, collateralFeeBanks } = useCollateralFeePopupConditions()

  const {
    data: totalInterestData,
@ -361,7 +368,33 @@ const TokenList = () => {
                return (
                  <TrBody key={symbol}>
                    <Td>
-                      <TableTokenName bank={bank} symbol={symbol} />
+                      <div className="flex items-center">
+                        <TableTokenName bank={bank} symbol={symbol} />
+                        {isCharged &&
+                        collateralFeeBanks.find(
+                          (b) => b.bank.name === bank.name,
+                        ) ? (
+                          <Tooltip
+                            content={
+                              <>
+                                <span>
+                                  {t('account:tooltip-collateral-fees-charged')}
+                                </span>
+                                <LinkButton
+                                  className="mt-2"
+                                  onClick={() =>
+                                    setShowCollateralFeeModal(true)
+                                  }
+                                >
+                                  {t('view-fees')}
+                                </LinkButton>
+                              </>
+                            }
+                          >
+                            <CurrencyDollarIcon className="ml-2 h-4 w-4 cursor-help text-th-down" />
+                          </Tooltip>
+                        ) : null}
+                      </div>
                    </Td>
                    <Td className="text-right">
                      <BankAmountWithValue
@ -453,7 +486,13 @@ const TokenList = () => {
      ) : (
        <div className="border-b border-th-bkg-3">
          {tableData.map((data) => {
-            return <MobileTokenListItem key={data.bank.name} data={data} />
+            return (
+              <MobileTokenListItem
+                key={data.bank.name}
+                data={data}
+                setShowCollateralFeeModal={setShowCollateralFeeModal}
+              />
+            )
          })}
        </div>
      )}
@ -464,15 +503,28 @@ const TokenList = () => {
          onClose={closeBorrowModal}
        />
      ) : null}
+      {showCollateralFeeModal ? (
+        <CollateralFeeWarningModal
+          isOpen={showCollateralFeeModal}
+          onClose={() => setShowCollateralFeeModal(false)}
+        />
+      ) : null}
    </ContentBox>
  )
 }

 export default TokenList

-const MobileTokenListItem = ({ data }: { data: TableData }) => {
+const MobileTokenListItem = ({
+  data,
+  setShowCollateralFeeModal,
+}: {
+  data: TableData
+  setShowCollateralFeeModal: (show: boolean) => void
+}) => {
  const { t } = useTranslation(['common', 'token'])
  const { mangoAccount } = useMangoAccount()
+  const { isCharged, collateralFeeBanks } = useCollateralFeePopupConditions()
  const {
    bank,
    balance,
@ -530,6 +582,26 @@ const MobileTokenListItem = ({ data }: { data: TableData }) => {
          >
            <Disclosure.Panel>
              <div className="mx-4 grid grid-cols-2 gap-4 border-t border-th-bkg-3 py-4">
+                {isCharged &&
+                collateralFeeBanks.find((b) => b.bank.name === bank.name) ? (
+                  <div className="col-span-2">
+                    <InlineNotification
+                      desc={
+                        <>
+                          <span>
+                            {t('account:tooltip-collateral-fees-charged')}
+                          </span>
+                          <LinkButton
+                            onClick={() => setShowCollateralFeeModal(true)}
+                          >
+                            {t('view-fees')}
+                          </LinkButton>
+                        </>
+                      }
+                      type="info"
+                    />
+                  </div>
+                ) : null}
                <div className="col-span-1">
                  <Tooltip content={t('tooltip-collateral-value')}>
                    <p className="tooltip-underline text-xs text-th-fgd-3">
--- a/components/modals/CollateralFeeWarningModal.tsx
+++ b/components/modals/CollateralFeeWarningModal.tsx
@ -11,9 +11,10 @@ import FormatNumericValue from '@components/shared/FormatNumericValue'

 type WarningProps = {
  isOpen: boolean
+  onClose?: () => void
 }

-const CollateralFeeWarningModal = ({ isOpen }: WarningProps) => {
+const CollateralFeeWarningModal = ({ isOpen, onClose }: WarningProps) => {
  const { t } = useTranslation(['account'])
  const { setWasModalOpen, collateralFeeBanks, ltvRatio } =
    useCollateralFeePopupConditions()
@ -31,13 +32,15 @@ const CollateralFeeWarningModal = ({ isOpen }: WarningProps) => {
    return Math.round(timeUntilChargeInHours * 100) / 100
  }, [lastCharge, collateralFeeInterval])

+  const handleClose = () => {
+    setWasModalOpen(true)
+    if (onClose) {
+      onClose()
+    }
+  }
+
  return (
-    <Modal
-      isOpen={isOpen}
-      onClose={() => setWasModalOpen(true)}
-      disableOutsideClose
-      hideClose
-    >
+    <Modal isOpen={isOpen} onClose={handleClose} disableOutsideClose hideClose>
      <h2 className="mb-2 text-center">
        {t('collateral-funding-modal-heading', {
          remaining_hours: hoursTillNextCharge,
@ -79,7 +82,6 @@ const CollateralFeeWarningModal = ({ isOpen }: WarningProps) => {
                  <div className="flex flex-col items-end">
                    <p className="text-right">
                      <FormatNumericValue value={dailyFee} />
-                      <span className="font-body"> {bank.name}</span>
                    </p>
                    <span className="font-mono text-th-fgd-4">
                      $<FormatNumericValue value={dailyFee * bank.uiPrice} />
@ -94,7 +96,7 @@ const CollateralFeeWarningModal = ({ isOpen }: WarningProps) => {
      <Button
        className="mt-6 w-full"
        onClick={() => {
-          setWasModalOpen(true)
+          handleClose()
        }}
      >
        {t('okay-got-it')}
--- a/hooks/useCollateralFeePositions.ts
+++ b/hooks/useCollateralFeePositions.ts
@ -48,12 +48,16 @@ const useCollateralFeePopupConditions = () => {
    !!collateralFeeBanks.length &&
    !wasModalOpen

+  const isCharged =
+    !!marginPositionBalanceWithBanks.length && !!collateralFeeBanks.length
+
  return {
    showCollateralFeeWarning,
    setWasModalOpen,
    marginPositionBalanceWithBanks,
    collateralFeeBanks,
    ltvRatio,
+    isCharged,
  }
 }

--- a/public/locales/en/account.json
+++ b/public/locales/en/account.json
@ -11,7 +11,7 @@
    "connect-funding": "Connect to view your account funding",
    "custom-account-options-saved": "Advanced options set",
    "cumulative-interest-chart": "Cumulative Interest Chart",
-    "daily-fee": "Daily Fee",
+    "daily-fee": "Est. Daily Fee",
    "daily-volume": "24h Volume",
    "export": "Export {{dataType}}",
    "find-accounts": "Find Accounts",
@ -47,6 +47,7 @@
    "token-slots-manage": "You can manage your account slots here:",
    "token-slots-nearly-full": "You have one token slot left",
    "token-slots-warning-desc": "Mango Accounts are limited in the number of tokens they can hold at one time. When you fully withdraw a token or fully repay a borrow, a slot will become available again.",
+    "tooltip-collateral-fees-charged": "Collateral funding fees are being charged",
    "tooltip-collateral-value": "The amount of capital this token gives you to use for trades and loans.",
    "tooltip-connect-to-follow": "Connect to follow accounts",
    "tooltip-follow-account": "Follow account on your account page",
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@ -213,6 +213,7 @@
  "updating-account-name": "Updating Account Name...",
  "utilization": "Utilization",
  "value": "Value",
+  "view-fees": "View Fees",
  "view-transaction": "View Transaction",
  "wallet": "Wallet",
  "wallet-address": "Wallet Address",
--- a/public/locales/es/account.json
+++ b/public/locales/es/account.json
@ -11,7 +11,7 @@
    "connect-funding": "Connect to view your account funding",
    "custom-account-options-saved": "Advanced options set",
    "cumulative-interest-chart": "Cumulative Interest Chart",
-    "daily-fee": "Daily Fee",
+    "daily-fee": "Est. Daily Fee",
    "daily-volume": "24h Volume",
    "export": "Export {{dataType}}",
    "find-accounts": "Find Accounts",
@ -46,6 +46,7 @@
    "token-slots-manage": "You can manage your account slots here:",
    "token-slots-nearly-full": "You have one token slot left",
    "token-slots-warning-desc": "Mango Accounts are limited in the number of tokens they can hold at one time. When you fully withdraw a token or fully repay a borrow, a slot will become available again.",
+    "tooltip-collateral-fees-charged": "Collateral funding fees are being charged",
    "tooltip-collateral-value": "The amount of capital this token gives you to use for trades and loans.",
    "tooltip-connect-to-follow": "Connect to follow accounts",
    "tooltip-follow-account": "Follow account on your account page",
--- a/public/locales/es/common.json
+++ b/public/locales/es/common.json
@ -213,6 +213,7 @@
  "updating-account-name": "Updating Account Name...",
  "utilization": "Utilization",
  "value": "Value",
+  "view-fees": "View Fees",
  "view-transaction": "View Transaction",
  "wallet": "Wallet",
  "wallet-address": "Wallet Address",
--- a/public/locales/pt/account.json
+++ b/public/locales/pt/account.json
@ -11,7 +11,7 @@
    "connect-funding": "Connect to view your account funding",
    "custom-account-options-saved": "Opções avançadas definidas",
    "cumulative-interest-chart": "Gráfico de Juros Acumulados",
-    "daily-fee": "Daily Fee",
+    "daily-fee": "Est. Daily Fee",
    "daily-volume": "Volume de 24h",
    "export": "Exportar {{dataType}}",
    "find-accounts": "Encontrar Contas",
@ -46,6 +46,7 @@
    "token-slots-manage": "Você pode gerenciar seus slots de conta aqui:",
    "token-slots-nearly-full": "Você tem apenas um slot de token restante",
    "token-slots-warning-desc": "As contas Mango são limitadas no número de tokens que podem, conter de uma vez. Quando você saca totalmente um token ou paga totalmente um empréstimo, um slot ficará disponível novamente.",
+    "tooltip-collateral-fees-charged": "Collateral funding fees are being charged",
    "tooltip-collateral-value": "A quantidade de capital que este token fornece para usar em negociações e empréstimos.",
    "tooltip-connect-to-follow": "Conecte-se para seguir contas",
    "tooltip-follow-account": "Siga a conta na sua página de conta",
--- a/public/locales/pt/common.json
+++ b/public/locales/pt/common.json
@ -213,6 +213,7 @@
  "updating-account-name": "Atualizando Nome da Conta...",
  "utilization": "Utilização",
  "value": "Valor",
+  "view-fees": "View Fees",
  "view-transaction": "Visualizar Transação",
  "wallet": "Carteira",
  "wallet-address": "Endereço da Carteira",
--- a/public/locales/ru/account.json
+++ b/public/locales/ru/account.json
@ -11,7 +11,7 @@
    "connect-funding": "Connect to view your account funding",
    "custom-account-options-saved": "Advanced options set",
    "cumulative-interest-chart": "Cumulative Interest Chart",
-    "daily-fee": "Daily Fee",
+    "daily-fee": "Est. Daily Fee",
    "daily-volume": "24h Volume",
    "export": "Export {{dataType}}",
    "find-accounts": "Find Accounts",
@ -46,6 +46,7 @@
    "token-slots-manage": "You can manage your account slots here:",
    "token-slots-nearly-full": "You have one token slot left",
    "token-slots-warning-desc": "Mango Accounts are limited in the number of tokens they can hold at one time. When you fully withdraw a token or fully repay a borrow, a slot will become available again.",
+    "tooltip-collateral-fees-charged": "Collateral funding fees are being charged",
    "tooltip-collateral-value": "The amount of capital this token gives you to use for trades and loans.",
    "tooltip-connect-to-follow": "Connect to follow accounts",
    "tooltip-follow-account": "Follow account on your account page",
--- a/public/locales/ru/common.json
+++ b/public/locales/ru/common.json
@ -213,6 +213,7 @@
  "updating-account-name": "Updating Account Name...",
  "utilization": "Utilization",
  "value": "Value",
+  "view-fees": "View Fees",
  "view-transaction": "View Transaction",
  "wallet": "Wallet",
  "wallet-address": "Wallet Address",
--- a/public/locales/zh/account.json
+++ b/public/locales/zh/account.json
@ -46,6 +46,7 @@
    "token-slots-manage": "你在此可以管理帐户币位:",
    "token-slots-nearly-full": "你剩下一个币位",
    "token-slots-warning-desc": "Mango帐户可以持有的币种数量是有限的。当你完全提取币种或完全偿还借贷时，币位将再次可用。",
+    "tooltip-collateral-fees-charged": "Collateral funding fees are being charged",
    "tooltip-collateral-value": "该币种为你提供用于交易与借贷的资本金额。",
    "tooltip-connect-to-follow": "连接钱包以关注帐户",
    "tooltip-follow-account": "在你帐户页可以关注此帐户",
--- a/public/locales/zh/common.json
+++ b/public/locales/zh/common.json
@ -212,6 +212,7 @@
  "updating-account-name": "正载改帐户标签...",
  "utilization": "利用率",
  "value": "价值",
+  "view-fees": "View Fees",
  "view-transaction": "查看交易",
  "wallet": "钱包",
  "wallet-address": "钱包地址",
--- a/public/locales/zh_tw/account.json
+++ b/public/locales/zh_tw/account.json
@ -46,6 +46,7 @@
    "token-slots-manage": "你在此可以管理帳戶幣位:",
    "token-slots-nearly-full": "你剩下一個幣位",
    "token-slots-warning-desc": "Mango帳戶可以持有的幣種數量是有限的。當你完全提取幣種或完全償還借貸時，幣位將再次可用。",
+    "tooltip-collateral-fees-charged": "Collateral funding fees are being charged",
    "tooltip-collateral-value": "該幣種為你提供用於交易與借貸的資本金額。",
    "tooltip-connect-to-follow": "連接錢包以關注帳戶",
    "tooltip-follow-account": "在你帳戶頁可以關注此帳戶",
--- a/public/locales/zh_tw/common.json
+++ b/public/locales/zh_tw/common.json
@ -212,6 +212,7 @@
  "updating-account-name": "正載改帳戶標籤...",
  "utilization": "利用率",
  "value": "價值",
+  "view-fees": "View Fees",
  "view-transaction": "查看交易",
  "wallet": "錢包",
  "wallet-address": "錢包地址",