diff --git a/app/lib/tokens.ts b/app/lib/tokens.ts
index 7cb8697..039a066 100644
--- a/app/lib/tokens.ts
+++ b/app/lib/tokens.ts
@@ -2,6 +2,8 @@ import type { RToken } from "@sushiswap/tines";
import type { PoolToken, TroveTokenWithQuantity } from "~/types";
import { sumArray } from "./array";
+import { formatTokenAmount } from "./currency";
+import { floorBigInt } from "./number";
export const tokenToRToken = ({
name,
@@ -17,3 +19,11 @@ export const tokenToRToken = ({
export const countTokens = (tokens: TroveTokenWithQuantity[]) =>
sumArray(tokens.map(({ quantity }) => quantity));
+
+export const formatTokenReserve = (token: PoolToken) =>
+ formatTokenAmount(
+ token.isNFT
+ ? floorBigInt(BigInt(token.reserve), token.decimals)
+ : BigInt(token.reserve),
+ token.decimals,
+ );
diff --git a/app/routes/pools_.$id.tsx b/app/routes/pools_.$id.tsx
index 3731209..b03f3ad 100644
--- a/app/routes/pools_.$id.tsx
+++ b/app/routes/pools_.$id.tsx
@@ -65,7 +65,12 @@ import { useTokenBalance } from "~/hooks/useTokenBalance";
import { truncateEthAddress } from "~/lib/address";
import { sumArray } from "~/lib/array";
import { formatAmount, formatTokenAmount, formatUSD } from "~/lib/currency";
-import { bigIntToNumber, formatNumber, formatPercent } from "~/lib/number";
+import {
+ bigIntToNumber,
+ floorBigInt,
+ formatNumber,
+ formatPercent,
+} from "~/lib/number";
import {
getPoolAPY,
getPoolFees24hDisplay,
@@ -73,6 +78,7 @@ import {
} from "~/lib/pools";
import type { Pool } from "~/lib/pools.server";
import { generateTitle, generateUrl, getSocialMetas } from "~/lib/seo";
+import { formatTokenReserve } from "~/lib/tokens";
import { cn } from "~/lib/utils";
import type { RootLoader } from "~/root";
import { getSession } from "~/sessions";
@@ -352,10 +358,7 @@ export default function PoolDetailsPage() {
- {formatTokenAmount(
- BigInt(token.reserve),
- token.decimals,
- )}
+ {formatTokenReserve(token)}
{token.priceUSD > 0 ? (
@@ -844,7 +847,7 @@ const PoolTokenCollectionInventory = ({
),
),
)}{" "}
- of {formatTokenAmount(BigInt(token.reserve), token.decimals)}
+ of {formatTokenReserve(token)}
diff --git a/app/routes/pools_.$id[.]png.tsx b/app/routes/pools_.$id[.]png.tsx
index c93e59c..4dfafef 100644
--- a/app/routes/pools_.$id[.]png.tsx
+++ b/app/routes/pools_.$id[.]png.tsx
@@ -12,6 +12,7 @@ import {
generateOgImage,
} from "~/lib/og.server";
import { getPoolAPY, getPoolReserveDisplay } from "~/lib/pools";
+import { formatTokenReserve } from "~/lib/tokens";
export const loader = async ({ request, params }: LoaderFunctionArgs) => {
const { origin } = new URL(request.url);
@@ -19,10 +20,20 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
invariant(params.id, "Missing pool id");
const pool = await fetchPool(params.id);
- const token0 = pool?.token0;
- const token1 = pool?.token1;
- const baseToken = token1?.isNFT && !pool?.isNFTNFT ? token1 : token0;
- const quoteToken = token1?.isNFT && !pool?.isNFTNFT ? token0 : token1;
+ if (!pool) {
+ return new Response(undefined, {
+ status: 404,
+ headers: {
+ "Content-Type": "image/png",
+ "cache-control": "no-cache, no-store",
+ },
+ });
+ }
+
+ const token0 = pool.token0;
+ const token1 = pool.token1;
+ const baseToken = token1.isNFT && !pool.isNFTNFT ? token1 : token0;
+ const quoteToken = token1.isNFT && !pool.isNFTNFT ? token0 : token1;
const png = await generateOgImage(
@@ -35,9 +46,9 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
color: NIGHT_100,
}}
>
-
{token0?.symbol}
+
{token0.symbol}
/
-
{token1?.symbol}
+
{token1.symbol}
@@ -47,10 +58,7 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
color: NIGHT_100,
}}
>
- {formatTokenAmount(
- BigInt(token0?.reserve ?? 0),
- token0?.decimals,
- )}
+ {formatTokenReserve(token0)}
{
}}
tw="text-lg"
>
- {token0?.symbol}
+ {token0.symbol}
@@ -68,10 +76,7 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
color: NIGHT_100,
}}
>
- {formatTokenAmount(
- BigInt(token1?.reserve ?? 0),
- token1?.decimals,
- )}
+ {formatTokenReserve(token1)}
{
}}
tw="text-lg"
>
- {token1?.symbol}
+ {token1.symbol}
@@ -89,7 +94,7 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
color: NIGHT_100,
}}
>
- {pool ? getPoolReserveDisplay(pool) : 0}
+ {getPoolReserveDisplay(pool)}
{
color: NIGHT_100,
}}
>
- {formatPercent(pool ? getPoolAPY(pool) : 0)}
+ {formatPercent(getPoolAPY(pool))}
{
- {baseToken && quoteToken ? (
+
-
1
+
- 1
-
- {baseToken.symbol}
-
-
-
-
+
+
+
+
+ {formatAmount(
+ bigIntToNumber(BigInt(quoteToken.reserve), quoteToken.decimals) /
+ bigIntToNumber(BigInt(baseToken.reserve), baseToken.decimals),
+ )}
+
+
-
- {formatAmount(
- bigIntToNumber(
- BigInt(quoteToken.reserve),
- quoteToken.decimals,
- ) /
- bigIntToNumber(BigInt(baseToken.reserve), baseToken.decimals),
- )}
-
-
- {quoteToken.symbol}
-
-
+ {quoteToken.symbol}
+
- ) : null}
+
,
origin,
);