add loan origination fee to trade form

components/BorrowForm.tsx

@@ -323,7 +323,13 @@ function BorrowForm({ onSuccess, token }: BorrowFormProps) {
                   />
                 </div>
                 <div className="flex justify-between">
-                  <Tooltip content={t('loan-origination-fee-tooltip')}>
+                  <Tooltip
+                    content={t('loan-origination-fee-tooltip', {
+                      fee: `${(
+                        bank.loanOriginationFeeRate.toNumber() * 100
+                      ).toFixed(3)}%`,
+                    })}
+                  >
                     <p className="tooltip-underline">
                       {t('loan-origination-fee')}
                     </p>

components/swap/SwapReviewRouteInfo.tsx

@@ -582,29 +582,29 @@ const SwapReviewRouteInfo = ({
                   {borrowAmount ? (
                     <div className="flex justify-between">
                       <Tooltip
-                        content={t('loan-origination-fee-tooltip')}
+                        content={t('loan-origination-fee-tooltip', {
+                          fee: `${(
+                            inputBank!.loanOriginationFeeRate.toNumber() * 100
+                          ).toFixed(3)}%`,
+                        })}
                         delay={100}
                       >
-                        <p className="tooltip-underline text-sm text-th-fgd-3">
+                        <p className="tooltip-underline">
                           {t('loan-origination-fee')}
                         </p>
                       </Tooltip>
-                      <p className="text-right font-mono text-sm text-th-fgd-2">
+                      <p className="text-right font-mono text-th-fgd-2">
                         ~
                         <FormatNumericValue
                           value={
                             borrowAmount *
                             inputBank!.loanOriginationFeeRate.toNumber()
                           }
+                          decimals={inputBank!.mintDecimals}
                         />{' '}
-                        <span className="font-body">{inputBank!.name}</span> (
-                        <FormatNumericValue
-                          value={
-                            inputBank!.loanOriginationFeeRate.toNumber() * 100
-                          }
-                          decimals={3}
-                        />
-                        %)
+                        <span className="font-body text-th-fgd-4">
+                          {inputBank!.name}
+                        </span>
                       </p>
                     </div>
                   ) : null}

components/trade/AdvancedTradeForm.tsx

@@ -401,8 +401,8 @@ const AdvancedTradeForm = () => {
                 allowNegative={false}
                 isNumericString={true}
                 decimalScale={6}
-                name="amountIn"
-                id="amountIn"
+                name="price"
+                id="price"
                 className="ml-2 w-full bg-transparent font-mono focus:outline-none"
                 placeholder="0.00"
                 value={tradeForm.price}
@@ -439,8 +439,8 @@ const AdvancedTradeForm = () => {
               allowNegative={false}
               isNumericString={true}
               decimalScale={minOrderDecimals}
-              name="amountIn"
-              id="amountIn"
+              name="base"
+              id="base"
               className="ml-2 w-full bg-transparent font-mono focus:outline-none"
               placeholder="0.00"
               value={tradeForm.baseSize}
@@ -466,8 +466,8 @@ const AdvancedTradeForm = () => {
               allowNegative={false}
               isNumericString={true}
               decimalScale={tickDecimals}
-              name="amountIn"
-              id="amountIn"
+              name="quote"
+              id="quote"
               className="ml-2 w-full bg-transparent font-mono focus:outline-none"
               placeholder="0.00"
               value={tradeForm.quoteSize}
@@ -629,7 +629,7 @@ const AdvancedTradeForm = () => {
           />
         </div>
       ) : null}
-      <TradeSummary mangoAccount={mangoAccount} />
+      <TradeSummary mangoAccount={mangoAccount} useMargin={useMargin} />
     </div>
   )
 }

components/trade/TradeSummary.tsx

@@ -17,8 +17,10 @@ import Slippage from './Slippage'
 
 const TradeSummary = ({
   mangoAccount,
+  useMargin,
 }: {
   mangoAccount: MangoAccount | undefined
+  useMargin: boolean
 }) => {
   const { t } = useTranslation(['common', 'trade'])
   const { group } = useMangoGroup()
@@ -70,6 +72,36 @@ const TradeSummary = ({
       : Math.trunc(simulatedHealthRatio)
   }, [group, mangoAccount, selectedMarket, tradeForm])
 
+  const balanceBank = useMemo(() => {
+    if (
+      !group ||
+      !selectedMarket ||
+      selectedMarket instanceof PerpMarket ||
+      !useMargin
+    )
+      return
+    if (tradeForm.side === 'buy') {
+      return group.getFirstBankByTokenIndex(selectedMarket.quoteTokenIndex)
+    } else {
+      return group.getFirstBankByTokenIndex(selectedMarket.baseTokenIndex)
+    }
+  }, [group, selectedMarket, tradeForm.side])
+
+  const borrowAmount = useMemo(() => {
+    if (!balanceBank || !mangoAccount) return 0
+    let borrowAmount
+    const balance = mangoAccount.getTokenDepositsUi(balanceBank)
+    if (tradeForm.side === 'buy') {
+      const remainingBalance = balance - parseFloat(tradeForm.quoteSize)
+      borrowAmount = remainingBalance < 0 ? Math.abs(remainingBalance) : 0
+    } else {
+      const remainingBalance = balance - parseFloat(tradeForm.baseSize)
+      borrowAmount = remainingBalance < 0 ? Math.abs(remainingBalance) : 0
+    }
+
+    return borrowAmount
+  }, [balanceBank, mangoAccount, tradeForm])
+
   return (
     <div className="space-y-2 px-3 md:px-4">
       <div className="flex justify-between text-xs">
@@ -87,6 +119,30 @@ const TradeSummary = ({
         </p>
       </div>
       <HealthImpact maintProjectedHealth={maintProjectedHealth} small />
+      {borrowAmount ? (
+        <div className="flex justify-between text-xs">
+          <Tooltip
+            content={t('loan-origination-fee-tooltip', {
+              fee: `${(
+                balanceBank!.loanOriginationFeeRate.toNumber() * 100
+              ).toFixed(3)}%`,
+            })}
+            delay={100}
+          >
+            <p className="tooltip-underline">{t('loan-origination-fee')}</p>
+          </Tooltip>
+          <p className="text-right font-mono text-th-fgd-2">
+            ~
+            <FormatNumericValue
+              value={
+                borrowAmount * balanceBank!.loanOriginationFeeRate.toNumber()
+              }
+              decimals={balanceBank!.mintDecimals}
+            />{' '}
+            <span className="font-body text-th-fgd-4">{balanceBank!.name}</span>
+          </p>
+        </div>
+      ) : null}
       <div className="flex justify-between text-xs">
         <Tooltip content="The amount of capital you have to use for trades and loans. When your free collateral reaches $0 you won't be able to trade, borrow or withdraw.">
           <p className="tooltip-underline">{t('free-collateral')}</p>

public/locales/en/common.json

@@ -84,8 +84,8 @@
   "liability-weight": "Liability Weight",
   "liquidity": "Liquidity",
   "loading": "Loading",
-  "loan-origination-fee": "Loan Origination Fee",
-  "loan-origination-fee-tooltip": "The fee for opening a borrow. This is paid to the Mango DAO Treasury",
+  "loan-origination-fee": "Borrow Fee",
+  "loan-origination-fee-tooltip": "{{fee}} fee for opening a borrow.",
   "mango": "Mango",
   "mango-stats": "Mango Stats",
   "market": "Market",

public/locales/es/common.json

@@ -83,8 +83,8 @@
   "liability-weight": "Liability Weight",
   "liquidity": "Liquidity",
   "loading": "Loading",
-  "loan-origination-fee": "Loan Origination Fee",
-  "loan-origination-fee-tooltip": "The fee for opening a borrow. This is paid to the Mango DAO Treasury",
+  "loan-origination-fee": "Borrow Fee",
+  "loan-origination-fee-tooltip": "{{fee}} fee for opening a borrow.",
   "mango": "Mango",
   "market": "Market",
   "max": "Max",

public/locales/ru/common.json

@@ -83,8 +83,8 @@
   "liability-weight": "Liability Weight",
   "liquidity": "Liquidity",
   "loading": "Loading",
-  "loan-origination-fee": "Loan Origination Fee",
-  "loan-origination-fee-tooltip": "The fee for opening a borrow. This is paid to the Mango DAO Treasury",
+  "loan-origination-fee": "Borrow Fee",
+  "loan-origination-fee-tooltip": "{{fee}} fee for opening a borrow.",
   "mango": "Mango",
   "market": "Market",
   "max": "Max",

public/locales/zh/common.json

@@ -83,8 +83,8 @@
   "liability-weight": "Liability Weight",
   "liquidity": "Liquidity",
   "loading": "Loading",
-  "loan-origination-fee": "Loan Origination Fee",
-  "loan-origination-fee-tooltip": "The fee for opening a borrow. This is paid to the Mango DAO Treasury",
+  "loan-origination-fee": "Borrow Fee",
+  "loan-origination-fee-tooltip": "{{fee}} fee for opening a borrow.",
   "mango": "Mango",
   "market": "Market",
   "max": "Max",

public/locales/zh_tw/common.json

@@ -83,8 +83,8 @@
   "liability-weight": "Liability Weight",
   "liquidity": "Liquidity",
   "loading": "Loading",
-  "loan-origination-fee": "Loan Origination Fee",
-  "loan-origination-fee-tooltip": "The fee for opening a borrow. This is paid to the Mango DAO Treasury",
+  "loan-origination-fee": "Borrow Fee",
+  "loan-origination-fee-tooltip": "{{fee}} fee for opening a borrow.",
   "mango": "Mango",
   "market": "Market",
   "max": "Max",