Merge pull request #2373 from zeitgeistpm/tr-portfolio-liquidity-fixes

Portfolio fixes
zeitgeistpm · Apr 4, 2024 · 0b7e85a · 0b7e85a
2 parents d0fe91f + 6e2d23c
commit 0b7e85a
Show file tree

Hide file tree

Showing 6 changed files with 202 additions and 153 deletions.
diff --git a/components/portfolio/AccountPoolsTable.tsx b/components/portfolio/AccountPoolsTable.tsx
@@ -21,7 +21,7 @@ const columns: TableColumn[] = [
   {
     header: "Value",
     accessor: "value",
-    type: "text",
+    type: "currency",
   },
   {
     header: "Fees available",
@@ -36,6 +36,44 @@ const columns: TableColumn[] = [
   },
 ];
 
+const AccountPoolsTable = ({ address }: { address: string }) => {
+  const { data: pools, isLoading } = useAccountAmm2Pool(address);
+
+  const tableData: TableData[] | undefined = pools?.map((pool) => {
+    return {
+      question: (
+        <Link
+          href={`/markets/${pool.marketId}`}
+          className="line-clamp-1 text-[14px]"
+        >
+          {pool.question}
+        </Link>
+      ),
+      value: {
+        value: pool.addressValue?.toNumber(),
+        usdValue: pool.addressUsdValue?.toNumber(),
+      },
+      fees: new Decimal(pool.account?.fees ?? 0).div(ZTG).toFixed(3),
+      buttons: <PoolButtons marketId={pool.marketId} />,
+    };
+  });
+
+  return (
+    <div>
+      {pools?.length === 0 && isLoading === false ? (
+        <EmptyPortfolio
+          headerText="You don't have any liquidity"
+          bodyText="View liquidity pools to find places to provide liquidity"
+          buttonText="View Pools"
+          buttonLink="/liquidity"
+        />
+      ) : (
+        <Table columns={columns} data={tableData} showHighlight={false} />
+      )}
+    </div>
+  );
+};
+
 const PoolButtons = ({ marketId }: { marketId: number }) => {
   const [sdk] = useSdkv2();
   const notificationStore = useNotifications();
@@ -86,44 +124,4 @@ const PoolButtons = ({ marketId }: { marketId: number }) => {
   );
 };
 
-const AccountPoolsTable = ({ address }: { address: string }) => {
-  const { data: pools, isLoading } = useAccountAmm2Pool(address);
-
-  const tableData: TableData[] =
-    pools?.map((pool) => {
-      const percentageOwnership = new Decimal(pool.account?.stake ?? 0).div(
-        pool.totalStake,
-      );
-
-      return {
-        question: (
-          <Link
-            href={`/markets/${pool.marketId}`}
-            className="line-clamp-1 text-[14px]"
-          >
-            {pool.question}
-          </Link>
-        ),
-        value: pool.value.mul(percentageOwnership).div(ZTG).toFixed(3),
-        fees: new Decimal(pool.account?.fees ?? 0).div(ZTG).toFixed(3),
-        buttons: <PoolButtons marketId={pool.marketId} />,
-      };
-    }) ?? [];
-
-  return (
-    <div>
-      {pools?.length === 0 && isLoading === false ? (
-        <EmptyPortfolio
-          headerText="You don't have any liquidity"
-          bodyText="View liquidity pools to find places to provide liquidity"
-          buttonText="View Pools"
-          buttonLink="/liquidity"
-        />
-      ) : (
-        <Table columns={columns} data={tableData} showHighlight={false} />
-      )}
-    </div>
-  );
-};
-
 export default AccountPoolsTable;
diff --git a/components/portfolio/Breakdown.tsx b/components/portfolio/Breakdown.tsx
@@ -4,15 +4,17 @@ import Decimal from "decimal.js";
 import { PorfolioBreakdown } from "lib/hooks/queries/usePortfolioPositions";
 import { formatNumberLocalized } from "lib/util";
 import { useMemo } from "react";
+import { useAccountAmm2Pool } from "lib/hooks/queries/useAccountAmm2Pools";
 
 export type PortfolioBreakdownProps =
   | {
       /**
        * The breakdown is loading and should render a skeleton.
        */
       loading: true;
+      address: string;
     }
-  | PorfolioBreakdown;
+  | (PorfolioBreakdown & { address: string });
 
 /**
  * Show a breakdown of an accounts portofolio.
@@ -21,6 +23,13 @@ export type PortfolioBreakdownProps =
  * @returns JSX.Element
  */
 export const PortfolioBreakdown = (props: PortfolioBreakdownProps) => {
+  const { data: pools, isLoading: poolIsLoading } = useAccountAmm2Pool(
+    props.address,
+  );
+  const poolZtgTotal = pools?.reduce<Decimal>((total, pool) => {
+    return total.plus(pool.addressZtgValue);
+  }, new Decimal(0));
+
   return (
     <div className="flex flex-col gap-y-[30px] md:flex-row">
       <div className="flex w-full max-w-[600px] md:border-r-2 md:border-gray-200">
@@ -52,14 +61,14 @@ export const PortfolioBreakdown = (props: PortfolioBreakdownProps) => {
 
       <div className="flex w-full max-w-[600px] md:pl-4">
         <div className="flex-1 border-r-2 border-gray-200">
-          {"loading" in props ? (
+          {"loading" in props || poolIsLoading ? (
             <BreakdownSlotSkeleton />
           ) : (
             <BreakdownSlot
               title="Liquidity"
-              value={props.subsidy.value}
+              value={poolZtgTotal?.mul(ZTG) ?? new Decimal(0)}
               usdZtgPrice={props.usdZtgPrice}
-              changePercentage={props.subsidy.changePercentage}
+              changePercentage={0}
             />
           )}
         </div>

diff --git a/components/portfolio/MarketPositions.tsx b/components/portfolio/MarketPositions.tsx
@@ -170,103 +170,104 @@ export const MarketPositions = ({
     );
   };
 
-  // if (positions.some(displayBalance)) {
-  return (
-    <div className={`${className}`}>
-      <MarketPositionHeader
-        marketId={market.marketId}
-        question={market.question ?? undefined}
-        baseAsset={market.baseAsset}
-      />
-      <Table
-        showHighlight={false}
-        columns={isLiquidityMarket ? COLUMNS_LIQUIDITY : COLUMNS}
-        data={positions
-          // .filter((pos) => displayBalance(pos))
-          .map<TableData>(
-            ({
-              assetId,
-              price,
-              userBalance,
-              outcome,
-              changePercentage,
-              market,
-              avgCost,
-              rpnl,
-              upnl,
-            }) => {
-              const baseAssetUsdPrice = lookUpAssetPrice(
-                market.baseAsset,
-                foreignAssetPrices,
-                usdZtgPrice,
-              );
-              return {
-                outcome: outcome,
-                userBalance: userBalance.div(ZTG).toNumber(),
-                price: {
-                  value: price.toNumber(),
-                  usdValue: price.mul(baseAssetUsdPrice ?? 0).toNumber(),
-                },
-                cost: {
-                  value: avgCost,
-                  usdValue: new Decimal(avgCost)
-                    .mul(baseAssetUsdPrice ?? 0)
-                    .toNumber(),
-                },
-                upnl: {
-                  value: upnl,
-                  usdValue: new Decimal(upnl)
-                    .mul(baseAssetUsdPrice ?? 0)
-                    .toNumber(),
-                },
-                rpnl: {
-                  value: rpnl,
-                  usdValue: new Decimal(rpnl)
-                    .mul(baseAssetUsdPrice ?? 0)
-                    .toNumber(),
-                },
-                value: {
-                  value: userBalance.mul(price).div(ZTG).toNumber(),
-                  usdValue: userBalance
-                    .mul(price)
-                    .mul(baseAssetUsdPrice ?? 0)
-                    .div(ZTG)
-                    .toNumber(),
-                },
-                change: isNaN(changePercentage)
-                  ? 0
-                  : changePercentage.toFixed(1),
-                actions: (
-                  <div className="text-right">
-                    {IOPoolShareAssetId.is(assetId) ? (
-                      <PoolShareButtons
-                        poolId={assetId.PoolShare}
-                        market={market}
-                      />
-                    ) : marketStage?.type === "Trading" &&
-                      IOMarketOutcomeAssetId.is(assetId) ? (
-                      <AssetTradingButtons assetId={assetId} />
-                    ) : marketStage?.type === "Resolved" ? (
-                      <RedeemButton market={market} assetId={assetId} />
-                    ) : IOMarketOutcomeAssetId.is(assetId) &&
-                      marketStage?.type === "Reported" ? (
-                      <DisputeButton market={market} assetId={assetId} />
-                    ) : IOMarketOutcomeAssetId.is(assetId) &&
-                      (marketStage?.type === "OpenReportingPeriod" ||
-                        (marketStage?.type === "OracleReportingPeriod" &&
-                          isOracle)) ? (
-                      <ReportButton market={market} assetId={assetId} />
-                    ) : (
-                      ""
-                    )}
-                  </div>
-                ),
-              };
-            },
-          )}
-      />
-    </div>
-  );
+  if (positions.some(displayBalance)) {
+    return (
+      <div className={`${className}`}>
+        <MarketPositionHeader
+          marketId={market.marketId}
+          question={market.question ?? undefined}
+          baseAsset={market.baseAsset}
+        />
+        <Table
+          showHighlight={false}
+          columns={isLiquidityMarket ? COLUMNS_LIQUIDITY : COLUMNS}
+          data={positions
+            .filter((pos) => displayBalance(pos))
+            .map<TableData>(
+              ({
+                assetId,
+                price,
+                userBalance,
+                outcome,
+                changePercentage,
+                market,
+                avgCost,
+                rpnl,
+                upnl,
+              }) => {
+                const baseAssetUsdPrice = lookUpAssetPrice(
+                  market.baseAsset,
+                  foreignAssetPrices,
+                  usdZtgPrice,
+                );
+                return {
+                  outcome: outcome,
+                  userBalance: userBalance.div(ZTG).toNumber(),
+                  price: {
+                    value: price.toNumber(),
+                    usdValue: price.mul(baseAssetUsdPrice ?? 0).toNumber(),
+                  },
+                  cost: {
+                    value: avgCost,
+                    usdValue: new Decimal(avgCost)
+                      .mul(baseAssetUsdPrice ?? 0)
+                      .toNumber(),
+                  },
+                  upnl: {
+                    value: upnl,
+                    usdValue: new Decimal(upnl)
+                      .mul(baseAssetUsdPrice ?? 0)
+                      .toNumber(),
+                  },
+                  rpnl: {
+                    value: rpnl,
+                    usdValue: new Decimal(rpnl)
+                      .mul(baseAssetUsdPrice ?? 0)
+                      .toNumber(),
+                  },
+                  value: {
+                    value: userBalance.mul(price).div(ZTG).toNumber(),
+                    usdValue: userBalance
+                      .mul(price)
+                      .mul(baseAssetUsdPrice ?? 0)
+                      .div(ZTG)
+                      .toNumber(),
+                  },
+                  change: isNaN(changePercentage)
+                    ? 0
+                    : changePercentage.toFixed(1),
+                  actions: (
+                    <div className="text-right">
+                      {IOPoolShareAssetId.is(assetId) ? (
+                        <PoolShareButtons
+                          poolId={assetId.PoolShare}
+                          market={market}
+                        />
+                      ) : marketStage?.type === "Trading" &&
+                        IOMarketOutcomeAssetId.is(assetId) ? (
+                        <AssetTradingButtons assetId={assetId} />
+                      ) : marketStage?.type === "Resolved" ? (
+                        <RedeemButton market={market} assetId={assetId} />
+                      ) : IOMarketOutcomeAssetId.is(assetId) &&
+                        marketStage?.type === "Reported" ? (
+                        <DisputeButton market={market} assetId={assetId} />
+                      ) : IOMarketOutcomeAssetId.is(assetId) &&
+                        (marketStage?.type === "OpenReportingPeriod" ||
+                          (marketStage?.type === "OracleReportingPeriod" &&
+                            isOracle)) ? (
+                        <ReportButton market={market} assetId={assetId} />
+                      ) : (
+                        ""
+                      )}
+                    </div>
+                  ),
+                };
+              },
+            )}
+        />
+      </div>
+    );
+  }
 
   return <></>;
 };