From d7ddd2d324b17b21e768cfb96cd274d29edfd196 Mon Sep 17 00:00:00 2001
From: jackburrus <jhburrus3@gmail.com>
Date: Thu, 7 Nov 2024 15:31:52 -0700
Subject: [PATCH] adds total value to lp table

---
 .../LpAndWithdrawalSharesTable.tsx            |  2 +
 .../TotalLpValue.tsx                          | 67 +++++++++++++++++++
 2 files changed, 69 insertions(+)
 create mode 100644 apps/hyperdrive-trading/src/ui/hyperdrive/lp/LpAndWithdrawalSharesTable/TotalLpValue.tsx

diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/lp/LpAndWithdrawalSharesTable/LpAndWithdrawalSharesTable.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/lp/LpAndWithdrawalSharesTable/LpAndWithdrawalSharesTable.tsx
index 24ff604b1..91e07783f 100644
--- a/apps/hyperdrive-trading/src/ui/hyperdrive/lp/LpAndWithdrawalSharesTable/LpAndWithdrawalSharesTable.tsx
+++ b/apps/hyperdrive-trading/src/ui/hyperdrive/lp/LpAndWithdrawalSharesTable/LpAndWithdrawalSharesTable.tsx
@@ -20,6 +20,7 @@ import { ConnectWalletButton } from "src/ui/compliance/ConnectWallet";
 import { LpCurrentValueCell } from "src/ui/hyperdrive/lp/LpAndWithdrawalSharesTable/LpCurrentValueCell";
 import { ManageLpAndWithdrawalSharesButton } from "src/ui/hyperdrive/lp/LpAndWithdrawalSharesTable/ManageLpAndWithdrawalSharesButton";
 import { SizeAndPoolShareCell } from "src/ui/hyperdrive/lp/LpAndWithdrawalSharesTable/SizeAndPoolShareCell";
+import { TotalLpValue } from "src/ui/hyperdrive/lp/LpAndWithdrawalSharesTable/TotalLpValue";
 import { WithdrawalQueueCell } from "src/ui/hyperdrive/lp/LpAndWithdrawalSharesTable/WithdrawalQueueCell";
 import { AssetStack } from "src/ui/markets/AssetStack";
 import { usePortfolioLpData } from "src/ui/portfolio/usePortfolioLpData";
@@ -128,6 +129,7 @@ export function LpAndWithdrawalSharesContainer(): ReactElement {
                   {hyperdrive.name.replace(/\d{1,3}d/, "")}
                 </p>
               </div>
+              <TotalLpValue hyperdrive={hyperdrive} />
             </div>
             <OpenLpTableDesktop
               hyperdrive={hyperdrive}
diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/lp/LpAndWithdrawalSharesTable/TotalLpValue.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/lp/LpAndWithdrawalSharesTable/TotalLpValue.tsx
new file mode 100644
index 000000000..2aa4b20b1
--- /dev/null
+++ b/apps/hyperdrive-trading/src/ui/hyperdrive/lp/LpAndWithdrawalSharesTable/TotalLpValue.tsx
@@ -0,0 +1,67 @@
+import { fixed } from "@delvtech/fixed-point-wasm";
+import {
+  appConfig,
+  findBaseToken,
+  HyperdriveConfig,
+} from "@delvtech/hyperdrive-appconfig";
+
+import { ReactElement } from "react";
+import Skeleton from "react-loading-skeleton";
+import { formatBalance } from "src/ui/base/formatting/formatBalance";
+import { useOpenLpPosition } from "src/ui/hyperdrive/lp/hooks/useOpenLpPosition";
+import { useTokenFiatPrice } from "src/ui/token/hooks/useTokenFiatPrice";
+import { useAccount } from "wagmi";
+import { sepolia } from "wagmi/chains";
+
+export function TotalLpValue({
+  hyperdrive,
+}: {
+  hyperdrive: HyperdriveConfig;
+}): ReactElement {
+  const { address: account } = useAccount();
+  const chainInfo = appConfig.chains[hyperdrive.chainId];
+  const baseToken = findBaseToken({
+    hyperdriveChainId: hyperdrive.chainId,
+    hyperdriveAddress: hyperdrive.address,
+    appConfig,
+  });
+  const { baseValue, openLpPositionStatus } = useOpenLpPosition({
+    hyperdriveAddress: hyperdrive.address,
+    account,
+    chainId: hyperdrive.chainId,
+  });
+
+  const { fiatPrice } = useTokenFiatPrice({
+    chainId: baseToken.chainId,
+    tokenAddress: baseToken.address,
+  });
+  const isFiatPriceEnabled = chainInfo.id !== sepolia.id;
+
+  return (
+    <div className="flex items-center gap-2">
+      <img src={chainInfo.iconUrl} className="size-7 rounded-full" />
+      <p className="flex gap-2 font-dmMono text-h4">
+        {openLpPositionStatus === "loading" ? (
+          <Skeleton className="w-24" />
+        ) : isFiatPriceEnabled ? (
+          `$${formatBalance({
+            balance: fiatPrice
+              ? fixed(baseValue, baseToken.decimals).mul(
+                  fiatPrice,
+                  baseToken.decimals,
+                ).bigint
+              : 0n,
+            decimals: hyperdrive.decimals,
+            places: baseToken?.places,
+          })}`
+        ) : (
+          `${formatBalance({
+            balance: baseValue,
+            decimals: hyperdrive.decimals,
+            places: baseToken?.places,
+          })} ${baseToken.symbol}`
+        )}{" "}
+      </p>
+    </div>
+  );
+}