Merge pull request #66 from useLiquidOps/feat/position-summary-improvements

Position summary component improvements

Author: LorimerJenkins

src/app/[ticker]/PositionSummary/PositionSummary.tsx

@@ -24,13 +24,10 @@ const PositionSummary: React.FC<{
 
   const denomination = 12n; // USD denomination
   const maxBorrow = useMemo(
-    () =>
-      !globalPosition
-        ? new Quantity(0n, 12n)
-        : new Quantity(
-            globalPosition.borrowCapacityUSD || 0,
-            denomination,
-          ).fromNumber(4),
+    () => new Quantity(
+      globalPosition?.borrowCapacityUSD || 0,
+      denomination,
+    ),
     [globalPosition],
   );
 
@@ -54,6 +51,25 @@ const PositionSummary: React.FC<{
     return `${Number(formatPercent).toFixed(3)}%`;
   }, [maxBorrow, globalPosition]);
 
+  const handleMouseMoveCollateral = (ticker: string, e: React.MouseEvent) => {
+    const pos = globalPosition?.tokenPositions?.[ticker];
+    if (!pos) return;
+
+    if (Quantity.le(new Quantity(0, pos.collateralization.denomination).fromNumber(0.0001), pos.collateralization)) {
+      let maximumFractionDigits = Quantity.le(Quantity.__one(), pos.collateralization) ? 2 : 4;
+      setTooltipContent(
+        // @ts-expect-error
+        pos.collateralization.toLocaleString(undefined, { maximumFractionDigits })
+        + " " + ticker
+      );
+    } else {
+      setTooltipContent(">0.0001 " + ticker);
+    }
+
+    setTooltipPosition({ x: e.clientX, y: e.clientY });
+    setShowTooltip(true);
+  };
+
   const handleMouseMove = (e: React.MouseEvent) => {
     const rect = e.currentTarget.getBoundingClientRect();
     const x = e.clientX - rect.left;
@@ -169,15 +185,17 @@ const PositionSummary: React.FC<{
             <div className={styles.tokens}>
               {!isLoadingPosition &&
                 globalPosition &&
-                globalPosition.collateralLogos.map((logo, i) => (
+                globalPosition.collateralLogos.map((collateral, i) => (
                   <img
                     key={i}
-                    src={`https://arweave.net/${logo}`}
+                    src={`https://arweave.net/${collateral.logo}`}
                     alt="collateral logo"
                     className={styles.token}
                     style={{
                       zIndex: globalPosition.collateralLogos.length - i,
                     }}
+                    onMouseMove={(e) => handleMouseMoveCollateral(collateral.ticker, e)}
+                    onMouseLeave={handleMouseLeave}
                   />
                 ))}
               {isLoadingPosition && (

src/hooks/LiquidOpsData/useGlobalPosition.ts

@@ -25,7 +25,10 @@ export interface TokenPositionCache {
 }
 
 export interface GlobalPositionCache {
-  collateralLogos: string[];
+  collateralLogos: {
+    ticker: string;
+    logo: string;
+  }[];
   collateralValueUSD: WrappedQuantity;
   borrowCapacityUSD: WrappedQuantity;
   borrowBalanceUSD: WrappedQuantity;
@@ -45,7 +48,10 @@ export interface TokenPositionResult {
 }
 
 export interface GlobalPositionResult {
-  collateralLogos: string[];
+  collateralLogos: {
+    ticker: string;
+    logo: string;
+  }[];
   collateralValueUSD: Quantity;
   borrowCapacityUSD: Quantity;
   borrowBalanceUSD: Quantity;
@@ -84,9 +90,9 @@ export function useGlobalPosition(overrideCache?: boolean) {
               info.ticker.toUpperCase() === ticker.toUpperCase() ||
               info.cleanTicker.toUpperCase() === ticker.toUpperCase(),
           );
-          return foundToken?.icon;
+          return { ticker, logo: foundToken?.icon };
         })
-        .filter((icon): icon is string => !!icon);
+        .filter((collateral) => !!collateral.logo) as GlobalPositionResult["collateralLogos"];
 
       // turn Bigints to Quantities
       const formattedTokenResult: { [token: string]: TokenPositionResult } = {};