update funding rate display

components/trade/AdvancedMarketHeader.tsx

@@ -175,12 +175,7 @@ const AdvancedMarketHeader = ({
             </div>
             {serumOrPerpMarket instanceof PerpMarket ? (
               <>
-                <div className="ml-6 flex-col whitespace-nowrap">
-                  <div className="text-xs text-th-fgd-4">
-                    {t('trade:funding-rate')}
-                  </div>
-                  <PerpFundingRate />
-                </div>
+                <PerpFundingRate />
                 <div className="ml-6 flex-col whitespace-nowrap text-xs">
                   <div className="text-th-fgd-4">
                     {t('trade:open-interest')}

components/trade/PerpFundingRate.tsx

@@ -1,11 +1,13 @@
-import { PerpMarket } from '@blockworks-foundation/mango-v4'
-// import { BookSide, PerpMarket } from '@blockworks-foundation/mango-v4'
-// import mangoStore from '@store/mangoStore'
+import { BookSide, PerpMarket } from '@blockworks-foundation/mango-v4'
+import { InformationCircleIcon } from '@heroicons/react/20/solid'
 import { useQuery } from '@tanstack/react-query'
 import useMangoGroup from 'hooks/useMangoGroup'
 import useSelectedMarket from 'hooks/useSelectedMarket'
 import { useMemo } from 'react'
 import { MANGO_DATA_API_URL } from 'utils/constants'
+import Tooltip from '@components/shared/Tooltip'
+import { useTranslation } from 'next-i18next'
+import mangoStore from '@store/mangoStore'
 
 const fetchFundingRate = async (groupPk: string | undefined) => {
   const res = await fetch(
@@ -32,16 +34,17 @@ export const usePerpFundingRate = () => {
 
 export const formatFunding = Intl.NumberFormat('en', {
   minimumSignificantDigits: 1,
-  maximumSignificantDigits: 3,
+  maximumSignificantDigits: 2,
   style: 'percent',
 })
 
 const PerpFundingRate = () => {
   const { selectedMarket } = useSelectedMarket()
   const rate = usePerpFundingRate()
+  const { t } = useTranslation(['common', 'trade'])
 
-  // const bids = mangoStore((s) => s.selectedMarket.bidsAccount)
-  // const asks = mangoStore((s) => s.selectedMarket.asksAccount)
+  const bids = mangoStore((s) => s.selectedMarket.bidsAccount)
+  const asks = mangoStore((s) => s.selectedMarket.asksAccount)
 
   const fundingRate = useMemo(() => {
     if (rate.isSuccess && selectedMarket instanceof PerpMarket) {
@@ -49,23 +52,61 @@ const PerpFundingRate = () => {
         (r) => r.market_index === selectedMarket.perpMarketIndex
       )
       const funding = marketRate?.funding_rate_hourly
-      return funding ? funding : undefined
+      return typeof funding === 'number' ? funding : undefined
     }
   }, [rate, selectedMarket])
 
   return (
-    <p className="font-mono text-xs text-th-fgd-2">
-      {selectedMarket instanceof PerpMarket && fundingRate ? (
-        <span>
-          {formatFunding.format(fundingRate)}
-          <span className="mx-1">|</span>
-          {formatFunding.format(fundingRate * 8760)}{' '}
-          <span className="font-body text-th-fgd-3">APR</span>
-        </span>
-      ) : (
-        <span className="text-th-fgd-4">-</span>
-      )}
-    </p>
+    <>
+      <div className="ml-6 flex-col whitespace-nowrap">
+        <Tooltip
+          content={
+            <>
+              <div>
+                Funding is paid continuously. The 1hr rate displayed is a
+                rolling average of the past 60 mins.
+              </div>
+              <div className="mt-2">
+                When positive, longs will pay shorts and when negative shorts
+                pay longs.
+              </div>
+              {typeof fundingRate === 'number' ? (
+                <div className="mt-2">
+                  The 1hr rate as an APR is{' '}
+                  {formatFunding.format(fundingRate * 8760)}.
+                </div>
+              ) : null}
+              {selectedMarket instanceof PerpMarket &&
+              bids instanceof BookSide &&
+              asks instanceof BookSide ? (
+                <div className="mt-1">
+                  The latest instantaneous rate is{' '}
+                  {selectedMarket
+                    .getInstantaneousFundingRateUi(bids, asks)
+                    .toFixed(4)}
+                  %
+                </div>
+              ) : null}
+            </>
+          }
+        >
+          <div className="flex items-center">
+            <div className="text-xs text-th-fgd-4">
+              {t('trade:funding-rate')}
+            </div>
+            <InformationCircleIcon className="ml-1 h-4 w-4 text-th-fgd-4" />
+          </div>
+        </Tooltip>
+        <p className="font-mono text-xs text-th-fgd-2">
+          {selectedMarket instanceof PerpMarket &&
+          typeof fundingRate === 'number' ? (
+            <span>{formatFunding.format(fundingRate)}</span>
+          ) : (
+            <span className="text-th-fgd-4">-</span>
+          )}
+        </p>
+      </div>
+    </>
   )
 }
 

package.json

@@ -18,7 +18,7 @@
     "postinstall": "tar -xzC public -f vendor/charting_library.tgz;tar -xzC public -f vendor/datafeeds.tgz"
   },
   "dependencies": {
-    "@blockworks-foundation/mango-v4": "^0.9.15",
+    "@blockworks-foundation/mango-v4": "^0.9.18",
     "@headlessui/react": "1.6.6",
     "@heroicons/react": "2.0.10",
     "@metaplex-foundation/js": "0.18.3",

public/locales/en/trade.json

@@ -23,7 +23,7 @@
     "hourly-funding": "Average Hourly Funding",
     "in-orders": "In Orders",
     "init-leverage": "Init Leverage",
-    "instantaneous-funding": "Instantaneous Funding",
+    "instantaneous-funding": "Instantaneous Funding Snapshot",
     "interval-seconds": "Interval (seconds)",
     "limit-price": "Limit Price",
     "long": "Long",

yarn.lock

@@ -14,10 +14,10 @@
   dependencies:
     regenerator-runtime "^0.13.11"
 
-"@blockworks-foundation/mango-v4@^0.9.15":
-  version "0.9.16"
-  resolved "https://registry.yarnpkg.com/@blockworks-foundation/mango-v4/-/mango-v4-0.9.16.tgz#9a3e70c95e46f112e7a204cd80d42a1c26e7d484"
-  integrity sha512-tyGtLiVQeWwxggSnkv1tqT3akeIpsiFtAcNuXPiJKfm/zwgPhLLOAsFbl0cr9IGqtV7uY/+CmKSqL2dHJD2czg==
+"@blockworks-foundation/mango-v4@^0.9.18":
+  version "0.9.18"
+  resolved "https://registry.yarnpkg.com/@blockworks-foundation/mango-v4/-/mango-v4-0.9.18.tgz#93174de932a4c6a6372e7f7dce93939762e3bf13"
+  integrity sha512-xmgnT1HluTT6hNW8kSbj3rvSBrasHFfimoXss2FKzeXVW8rfY6NkecAnduHkj876PUAc1bKZW4q8BORTDx53Ow==
   dependencies:
     "@coral-xyz/anchor" "^0.26.0"
     "@project-serum/serum" "0.13.65"