Merge branch 'master' of https://github.com/gmx-io/gmx-interface

RunOnFlux · Aug 6, 2023 · b5d420e · b5d420e
2 parents 52f279a + 980010e
commit b5d420e
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 23 deletions.
diff --git a/src/components/ShareBar/ShareBar.scss b/src/components/ShareBar/ShareBar.scss
@@ -2,7 +2,8 @@
   background: rgba(255, 255, 255, 0.25);
   position: relative;
   height: 2px;
-  width: 10rem;
+  width: 100%;
+  min-width: 10rem;
 }
 
 .ShareBar-fill {

diff --git a/src/domain/synthetics/markets/utils.ts b/src/domain/synthetics/markets/utils.ts
@@ -137,11 +137,24 @@ export function getAvailableUsdLiquidityForPosition(marketInfo: MarketInfo, isLo
 }
 
 export function getAvailableUsdLiquidityForCollateral(marketInfo: MarketInfo, isLong: boolean) {
+  const poolUsd = getPoolUsdWithoutPnl(marketInfo, isLong, "minPrice");
+
+  if (marketInfo.isSpotOnly) {
+    return poolUsd;
+  }
+
   const reservedUsd = getReservedUsd(marketInfo, isLong);
+  const maxReserveFactor = isLong ? marketInfo.reserveFactorLong : marketInfo.reserveFactorShort;
 
-  const poolUsd = getPoolUsdWithoutPnl(marketInfo, isLong, "minPrice");
+  if (maxReserveFactor.eq(0)) {
+    return BigNumber.from(0);
+  }
+
+  const minPoolUsd = reservedUsd.mul(PRECISION).div(maxReserveFactor);
+
+  const liqudiity = poolUsd.sub(minPoolUsd);
 
-  return poolUsd.sub(reservedUsd);
+  return liqudiity;
 }
 
 export function getCappedPoolPnl(p: {

diff --git a/src/pages/SyntheticsStats/SyntheticsStats.tsx b/src/pages/SyntheticsStats/SyntheticsStats.tsx
@@ -10,6 +10,7 @@ import StatsTooltipRow from "components/StatsTooltip/StatsTooltipRow";
 import Tooltip from "components/Tooltip/Tooltip";
 import { getBorrowingFactorPerPeriod, getFundingFactorPerPeriod } from "domain/synthetics/fees";
 import {
+  getAvailableUsdLiquidityForCollateral,
   getMarketIndexName,
   getMarketPoolName,
   getMaxReservedUsd,
@@ -88,6 +89,9 @@ export function SyntheticsStats() {
             const shortPoolUsd = convertToUsd(market.shortPoolAmount, market.shortToken.decimals, midShortPrice);
             const totalPoolUsd = longPoolUsd?.add(shortPoolUsd || 0);
 
+            const longCollateralLiquidityUsd = getAvailableUsdLiquidityForCollateral(market, true);
+            const shortCollateralLiquidityUsd = getAvailableUsdLiquidityForCollateral(market, false);
+
             const swapImpactUsdLong = convertToUsd(
               market.swapImpactPoolAmountLong,
               market.longToken.decimals,
@@ -180,6 +184,7 @@ export function SyntheticsStats() {
                         <>
                           <StatsTooltipRow label="Pool USD Long" value={formatAmountHuman(longPoolUsd, 30)} />
                           <StatsTooltipRow label="Pool USD Short" value={formatAmountHuman(shortPoolUsd, 30)} />
+
                           <StatsTooltipRow
                             label={`Swap Imapct Amount ${market.longToken.symbol}`}
                             value={formatAmountHuman(swapImpactUsdLong, 30)}
@@ -271,32 +276,48 @@ export function SyntheticsStats() {
                   </div>
                 </td>
                 <td>
-                  <div className="cell">
-                    {market.isSpotOnly ? (
-                      "..."
-                    ) : (
-                      <>
-                        <div style={{ marginBottom: "4px" }}>
-                          ${formatAmountHuman(reservedUsdLong, 30)} / ${formatAmountHuman(maxReservedUsdLong, 30)}
+                  <Tooltip
+                    handle={
+                      market.isSpotOnly ? (
+                        formatAmountHuman(longCollateralLiquidityUsd, 30)
+                      ) : (
+                        <div className="cell">
+                          <div style={{ marginBottom: "4px" }}>
+                            ${formatAmountHuman(reservedUsdLong, 30)} / ${formatAmountHuman(maxReservedUsdLong, 30)}
+                          </div>
+                          <ShareBar share={reservedUsdLong} total={maxReservedUsdLong} />
                         </div>
-                        <ShareBar share={reservedUsdLong} total={maxReservedUsdLong} />
-                      </>
+                      )
+                    }
+                    renderContent={() => (
+                      <StatsTooltipRow
+                        label={`Max ${market.longToken.symbol} Out`}
+                        value={formatAmountHuman(longCollateralLiquidityUsd, 30)}
+                      />
                     )}
-                  </div>
+                  />
                 </td>
                 <td>
-                  <div className="cell">
-                    {market.isSpotOnly ? (
-                      "..."
-                    ) : (
-                      <>
-                        <div style={{ marginBottom: "4px" }}>
-                          ${formatAmountHuman(reservedUsdShort, 30)} / ${formatAmountHuman(maxReservedUsdShort, 30)}
+                  <Tooltip
+                    handle={
+                      market.isSpotOnly ? (
+                        formatAmountHuman(shortCollateralLiquidityUsd, 30)
+                      ) : (
+                        <div className="cell">
+                          <div style={{ marginBottom: "4px" }}>
+                            ${formatAmountHuman(reservedUsdShort, 30)} / ${formatAmountHuman(maxReservedUsdShort, 30)}
+                          </div>
+                          <ShareBar share={reservedUsdShort} total={maxReservedUsdShort} />
                         </div>
-                        <ShareBar share={reservedUsdShort} total={maxReservedUsdShort} />
-                      </>
+                      )
+                    }
+                    renderContent={() => (
+                      <StatsTooltipRow
+                        label={`Max ${market.shortToken.symbol} Out`}
+                        value={formatAmountHuman(shortCollateralLiquidityUsd, 30)}
+                      />
                     )}
-                  </div>
+                  />
                 </td>
                 <td>
                   <div className="cell">