Merge pull request #7 from blockworks-foundation/collateralFeeUI

Collateral fee UI

components/StakeForm.tsx

@@ -91,10 +91,10 @@ function StakeForm({ token: selectedToken }: StakeFormProps) {
   const { group } = useMangoGroup()
   const groupLoaded = mangoStore((s) => s.groupLoaded)
   const {
-    stakeBankDepositRate,
     borrowBankBorrowRate,
     leveragedAPY,
     estimatedNetAPY,
+    collateralFeeAPY
   } = useBankRates(selectedToken, leverage)
   const leverageMax = useLeverageMax(selectedToken) * 0.95 // Multiplied by 0.975 becuase you cant actually get to the end of the inifinite geometric series?
 
@@ -117,6 +117,7 @@ function StakeForm({ token: selectedToken }: StakeFormProps) {
     return price
   }, [stakeBank, borrowBank, leverage])
 
+
   const tokenPositionsFull = useMemo(() => {
     if (!stakeBank || !usedTokens.length || !totalTokens.length) return false
     const hasTokenPosition = usedTokens.find(
@@ -146,6 +147,7 @@ function StakeForm({ token: selectedToken }: StakeFormProps) {
     return borrowAmount
   }, [leverage, borrowBank, stakeBank, inputAmount])
 
+
   const handleRefreshWalletBalances = useCallback(async () => {
     if (!publicKey) return
     const actions = mangoStore.getState().actions
@@ -353,18 +355,18 @@ function StakeForm({ token: selectedToken }: StakeFormProps) {
                       </div>
                       <div className="flex justify-between">
                         <p className="text-th-fgd-4">
-                          {formatTokenSymbol(selectedToken)} Deposit Rate
+                          {formatTokenSymbol(selectedToken)} Collateral Fee APY
                         </p>
                         <span
                           className={`font-bold ${
-                            stakeBankDepositRate > 0.01
+                            collateralFeeAPY > 0.01
-                              ? 'text-th-success'
+                              ? 'text-th-error'
                               : 'text-th-bkg-4'
                           }`}
                         >
-                          {stakeBankDepositRate > 0.01 ? '+' : ''}
+                          {collateralFeeAPY > 0.01 ? '-' : ''}
                           <FormatNumericValue
-                            value={stakeBankDepositRate}
+                            value={collateralFeeAPY?.toString()}
                             decimals={2}
                           />
                           %
@@ -373,7 +375,7 @@ function StakeForm({ token: selectedToken }: StakeFormProps) {
                       {borrowBank ? (
                         <>
                           <div className="flex justify-between">
-                            <p className="text-th-fgd-4">{`${borrowBank.name} Borrow Rate`}</p>
+                            <p className="text-th-fgd-4">{`${borrowBank?.name} Borrow Rate`}</p>
                             <span
                               className={`font-bold ${
                                 borrowBankBorrowRate > 0.01

hooks/useBankRates.ts

@@ -37,11 +37,23 @@ export default function useBankRates(selectedToken: string, leverage: number) {
     return borrowBankStakeRate ? borrowBankStakeRate * leverage : 0
   }, [borrowBankStakeRate, leverage])
 
+  const estimatedMaxCollateralFee = useMemo(() => {
+    if(!stakeBank) return 0
+    return (stakeBank?.collateralFeePerDay * 365 * 100)
+  }, [stakeBank])
+
+  const collateralFeeAPY = useMemo(() => {
+    if (!stakeBank) return 0
+    const assetsCovered = ( (leverage - 1)) / leverage * Number(stakeBank?.maintAssetWeight)
+    const collateralFeeUI = estimatedMaxCollateralFee * assetsCovered * leverage
+    return collateralFeeUI
+  }, [stakeBank, leverage, estimatedMaxCollateralFee])
+
   const estimatedNetAPY = useMemo(() => {
     return (
-      borrowBankStakeRate * leverage - borrowBankBorrowRate * (leverage - 1)
+      borrowBankStakeRate * leverage - borrowBankBorrowRate * (leverage - 1) - collateralFeeAPY
     )
-  }, [borrowBankStakeRate, leverage, borrowBankBorrowRate])
+  }, [borrowBankStakeRate, leverage, borrowBankBorrowRate, collateralFeeAPY])
 
   // useEffect(() => {
   //   set((s) => {
@@ -53,8 +65,7 @@ export default function useBankRates(selectedToken: string, leverage: number) {
 
   const estimatedMaxAPY = useMemo(() => {
     return (
-      borrowBankStakeRate * leverageMax -
+      borrowBankStakeRate * leverageMax - borrowBankBorrowRate * (leverageMax - 1)
-      borrowBankBorrowRate * (leverageMax - 1)
     )
   }, [borrowBankStakeRate, borrowBankBorrowRate, leverageMax])
 
@@ -65,5 +76,6 @@ export default function useBankRates(selectedToken: string, leverage: number) {
     leveragedAPY,
     estimatedNetAPY,
     estimatedMaxAPY,
+    collateralFeeAPY
   }
 }