Merge branch 'pan/openbook-v2' of github.com:blockworks-foundation/ma…

…ngo-v4-ui into pan/openbook-v2
blockworks-foundation · May 15, 2024 · 32f647f · 32f647f
2 parents 2e6469f + 3728cb0
commit 32f647f
Show file tree

Hide file tree

Showing 68 changed files with 2,214 additions and 216 deletions.
diff --git a/components/Layout.tsx b/components/Layout.tsx
@@ -42,13 +42,16 @@ import useUnownedAccount from 'hooks/useUnownedAccount'
 import NewListingBanner from './NewListingBanner'
 import useIpAddress from 'hooks/useIpAddress'
 import RestrictedCountryModal from './modals/RestrictedCountryModal'
+import useCollateralFeePositions from 'hooks/useCollateralFeePositions'
+import CollateralFeeWarningModal from './modals/CollateralFeeWarningModal'
 
 export const sideBarAnimationDuration = 300
 const termsLastUpdated = 1679441610978
 
 const Layout = ({ children }: { children: ReactNode }) => {
   const themeData = mangoStore((s) => s.themeData)
   const { theme } = useTheme()
+  const { showCollateralFeeWarning } = useCollateralFeePositions()
   const [isCollapsed, setIsCollapsed] = useLocalStorageState(
     SIDEBAR_COLLAPSE_KEY,
     false,
@@ -188,6 +191,9 @@ const Layout = ({ children }: { children: ReactNode }) => {
             warningLevel={WARNING_LEVEL.FULL}
           />
         ) : null}
+        {showCollateralFeeWarning ? (
+          <CollateralFeeWarningModal isOpen={showCollateralFeeWarning} />
+        ) : null}
       </div>
     </main>
   )

diff --git 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">

diff --git a/components/account/AccountStats.tsx b/components/account/AccountStats.tsx
@@ -116,7 +116,7 @@ const AccountStats = ({ hideView }: { hideView: () => void }) => {
           />
         </div>
         <div className="col-span-2 border-b border-th-bkg-3 md:col-span-1">
-          <div className="border-b border-th-bkg-3 px-4 py-4 md:px-6 lg:py-6">
+          <div className="border-b border-th-bkg-3 p-4 md:px-6 lg:py-6">
             <Tooltip
               content={t('account:tooltip-total-funding')}
               maxWidth="20rem"
@@ -147,7 +147,7 @@ const AccountStats = ({ hideView }: { hideView: () => void }) => {
           </div>
         </div>
         <div className="col-span-2 border-b border-th-bkg-3 md:col-span-1">
-          <div className="border-b border-th-bkg-3 px-4 py-4 md:px-6 lg:py-6">
+          <div className="border-b border-th-bkg-3 p-4 md:px-6 lg:py-6">
             <p className="tooltip-underline text-base leading-tight">
               {t('account:lifetime-volume')}
             </p>

diff --git a/components/account/FundingChart.tsx b/components/account/FundingChart.tsx
@@ -1,14 +1,8 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { useQuery } from '@tanstack/react-query'
 import dayjs from 'dayjs'
-import useMangoAccount from 'hooks/useMangoAccount'
 import { useEffect, useMemo, useState } from 'react'
-import {
-  HourlyFundingChartData,
-  HourlyFundingData,
-  HourlyFundingStatsData,
-} from 'types'
-import { DAILY_MILLISECONDS, MANGO_DATA_API_URL } from 'utils/constants'
+import { HourlyFundingChartData } from 'types'
+import { DAILY_MILLISECONDS } from 'utils/constants'
 import { formatCurrencyValue } from 'utils/numbers'
 import { TooltipProps } from 'recharts/types/component/Tooltip'
 import {
@@ -32,6 +26,7 @@ import ContentBox from '@components/shared/ContentBox'
 import SheenLoader from '@components/shared/SheenLoader'
 import useThemeWrapper from 'hooks/useThemeWrapper'
 import FormatNumericValue from '@components/shared/FormatNumericValue'
+import useAccountHourlyFunding from 'hooks/useAccountHourlyFunding'
 
 type TempDataType = {
   [time: string]: {
@@ -41,55 +36,15 @@ type TempDataType = {
   }
 }
 
-const fetchHourlyFunding = async (mangoAccountPk: string) => {
-  try {
-    const data = await fetch(
-      `${MANGO_DATA_API_URL}/stats/funding-account-hourly?mango-account=${mangoAccountPk}`,
-    )
-    const res = await data.json()
-    if (res) {
-      const entries: HourlyFundingData[] = Object.entries(res)
-
-      const stats: HourlyFundingStatsData[] = entries.map(([key, value]) => {
-        const marketEntries = Object.entries(value)
-        const marketFunding = marketEntries.map(([key, value]) => {
-          return {
-            long_funding: value.long_funding * -1,
-            short_funding: value.short_funding * -1,
-            time: key,
-          }
-        })
-        return { marketFunding, market: key }
-      })
-
-      return stats
-    }
-  } catch (e) {
-    console.log('Failed to fetch account funding history', e)
-  }
-}
-
 const FundingChart = () => {
   const { t } = useTranslation('common')
-  const { mangoAccountAddress } = useMangoAccount()
   const [daysToShow, setDaysToShow] = useState('30')
   const { theme } = useThemeWrapper()
   const {
     data: fundingData,
-    isLoading: loadingFunding,
-    isFetching: fetchingFunding,
+    loading: loadingFunding,
     refetch,
-  } = useQuery(
-    ['hourly-funding', mangoAccountAddress],
-    () => fetchHourlyFunding(mangoAccountAddress),
-    {
-      cacheTime: 1000 * 60 * 10,
-      staleTime: 1000 * 60,
-      retry: 3,
-      refetchOnWindowFocus: false,
-      enabled: !!mangoAccountAddress,
-    },
-  )
+  } = useAccountHourlyFunding()
 
   useEffect(() => {
     refetch()
@@ -219,7 +174,7 @@ const FundingChart = () => {
   return (
     <FadeInFadeOut show={true}>
       <ContentBox hideBorder hidePadding>
-        {loadingFunding || fetchingFunding ? (
+        {loadingFunding ? (
           <SheenLoader className="flex flex-1">
             <div className={`h-[350px] w-full rounded-lg bg-th-bkg-2`} />
           </SheenLoader>