Skip to content

Commit

Permalink
round nft reserves down to whole number on display
Browse files Browse the repository at this point in the history
  • Loading branch information
@alecananian
alecananian committed Jul 22, 2024
1 parent dabcf4f commit 9491651
Show file tree
Hide file tree
Showing 3 changed files with 88 additions and 75 deletions.
10 changes: 10 additions & 0 deletions app/lib/tokens.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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,
);
15 changes: 9 additions & 6 deletions app/routes/pools_.$id.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,14 +65,20 @@ 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,
getPoolVolume24hDisplay,
} 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";
Expand Down Expand Up @@ -352,10 +358,7 @@ export default function PoolDetailsPage() {
</div>
<div className="space-y-0.5 text-right">
<p className="text-night-100">
{formatTokenAmount(
BigInt(token.reserve),
token.decimals,
)}
{formatTokenReserve(token)}
</p>
{token.priceUSD > 0 ? (
<p className="text-night-400 text-xs">
Expand Down Expand Up @@ -844,7 +847,7 @@ const PoolTokenCollectionInventory = ({
),
),
)}{" "}
of {formatTokenAmount(BigInt(token.reserve), token.decimals)}
of {formatTokenReserve(token)}
</span>
<DialogTrigger asChild>
<Button variant="ghost">View All</Button>
Expand Down
138 changes: 69 additions & 69 deletions app/routes/pools_.$id[.]png.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,17 +12,28 @@ 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);

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(
<div tw="flex p-16 w-full">
Expand All @@ -35,9 +46,9 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
color: NIGHT_100,
}}
>
<div tw="flex">{token0?.symbol}</div>
<div tw="flex">{token0.symbol}</div>
<div tw="flex mx-2">/</div>
<div tw="flex">{token1?.symbol}</div>
<div tw="flex">{token1.symbol}</div>
</div>
<div tw="flex mt-6">
<div tw="flex flex-col">
Expand All @@ -47,18 +58,15 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
color: NIGHT_100,
}}
>
{formatTokenAmount(
BigInt(token0?.reserve ?? 0),
token0?.decimals,
)}
{formatTokenReserve(token0)}
</div>
<div
style={{
color: NIGHT_400,
}}
tw="text-lg"
>
{token0?.symbol}
{token0.symbol}
</div>
</div>
<div tw="flex ml-12 flex-col">
Expand All @@ -68,18 +76,15 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
color: NIGHT_100,
}}
>
{formatTokenAmount(
BigInt(token1?.reserve ?? 0),
token1?.decimals,
)}
{formatTokenReserve(token1)}
</div>
<div
style={{
color: NIGHT_400,
}}
tw="text-lg"
>
{token1?.symbol}
{token1.symbol}
</div>
</div>
<div tw="flex ml-12 flex-col">
Expand All @@ -89,7 +94,7 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
color: NIGHT_100,
}}
>
{pool ? getPoolReserveDisplay(pool) : 0}
{getPoolReserveDisplay(pool)}
</div>
<div
style={{
Expand All @@ -107,7 +112,7 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
color: NIGHT_100,
}}
>
{formatPercent(pool ? getPoolAPY(pool) : 0)}
{formatPercent(getPoolAPY(pool))}
</div>
<div
style={{
Expand All @@ -121,68 +126,63 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
</div>
</div>
</div>
{baseToken && quoteToken ? (
<div
tw="flex text-3xl absolute right-16 top-16 items-center px-6 py-3 rounded-full font-semibold"
style={{
backgroundColor: "rgba(64, 70, 82, 0.6)",
}}
>
<div
tw="flex text-3xl absolute right-16 top-16 items-center px-6 py-3 rounded-full font-semibold"
tw="flex items-center"
style={{
backgroundColor: "rgba(64, 70, 82, 0.6)",
color: NIGHT_100,
}}
>
<div
tw="flex items-center"
<span>1</span>
<span
tw="ml-2"
style={{
color: NIGHT_100,
color: NIGHT_400,
}}
>
<span>1</span>
<span
tw="ml-2"
style={{
color: NIGHT_400,
}}
>
{baseToken.symbol}
</span>
</div>
<svg
width="24"
height="19"
viewBox="0 0 24 19"
fill="none"
xmlns="http://www.w3.org/2000/svg"
tw="mx-4 mt-2"
>
<path
d="M6.16683 18.8334L0.333496 13L6.16683 7.16669L7.80016 8.82919L4.796 11.8334H13.1668V14.1667H4.796L7.80016 17.1709L6.16683 18.8334ZM17.8335 11.8334L16.2002 10.1709L19.2043 7.16669H10.8335V4.83335H19.2043L16.2002 1.82919L17.8335 0.166687L23.6668 6.00002L17.8335 11.8334Z"
fill="#888C93"
/>
</svg>
<div
tw="flex items-center"
{baseToken.symbol}
</span>
</div>
<svg
width="24"
height="19"
viewBox="0 0 24 19"
fill="none"
xmlns="http://www.w3.org/2000/svg"
tw="mx-4 mt-2"
>
<path
d="M6.16683 18.8334L0.333496 13L6.16683 7.16669L7.80016 8.82919L4.796 11.8334H13.1668V14.1667H4.796L7.80016 17.1709L6.16683 18.8334ZM17.8335 11.8334L16.2002 10.1709L19.2043 7.16669H10.8335V4.83335H19.2043L16.2002 1.82919L17.8335 0.166687L23.6668 6.00002L17.8335 11.8334Z"
fill="#888C93"
/>
</svg>
<div
tw="flex items-center"
style={{
color: NIGHT_100,
}}
>
<span>
{formatAmount(
bigIntToNumber(BigInt(quoteToken.reserve), quoteToken.decimals) /
bigIntToNumber(BigInt(baseToken.reserve), baseToken.decimals),
)}
</span>
<span
tw="ml-2"
style={{
color: NIGHT_100,
color: NIGHT_400,
}}
>
<span>
{formatAmount(
bigIntToNumber(
BigInt(quoteToken.reserve),
quoteToken.decimals,
) /
bigIntToNumber(BigInt(baseToken.reserve), baseToken.decimals),
)}
</span>
<span
tw="ml-2"
style={{
color: NIGHT_400,
}}
>
{quoteToken.symbol}
</span>
</div>
{quoteToken.symbol}
</span>
</div>
) : null}
</div>
</div>,
origin,
);
Expand Down

0 comments on commit 9491651

Please sign in to comment.