diff --git a/src/app/dashboard/reader/page.tsx b/src/app/dashboard/reader/page.tsx index bbc2adb3..0532b28e 100644 --- a/src/app/dashboard/reader/page.tsx +++ b/src/app/dashboard/reader/page.tsx @@ -11,6 +11,8 @@ import { formatUnits } from "viem"; import { ConnectWallet } from "../../../components/ConnectWallet"; import { RESERVE_LABEL, PLOT_TOKEN, STORY_FACTORY, EXPLORER_URL } from "../../../../lib/contracts/constants"; import { browserClient as publicClient } from "../../../../lib/rpc"; +import { formatUsdValue } from "../../../../lib/usd-price"; +import { usePlotUsdPrice } from "../../../hooks/usePlotUsdPrice"; import { type Address } from "viem"; /** Truncate formatUnits output to at most `digits` decimal places */ @@ -25,6 +27,7 @@ const PAGE_SIZE = 10; export default function ReaderDashboard() { const { address, isConnected } = useAccount(); + const { data: plotUsd } = usePlotUsdPrice(); const { data, @@ -97,10 +100,10 @@ export default function ReaderDashboard() {

- + {/* --- Trading History --- */} - + {/* --- Donation History --- */}
@@ -188,7 +191,7 @@ function DonationRow({ donation, decimals }: { donation: Donation; decimals: num const TRADE_PAGE_SIZE = 10; -function TradingHistory({ address }: { address: string }) { +function TradingHistory({ address, plotUsd }: { address: string; plotUsd?: number | null }) { const { data, isLoading, @@ -287,6 +290,11 @@ function TradingHistory({ address }: { address: string }) {
{formatPrice(t.reserve_amount)} {RESERVE_LABEL} + {plotUsd && ( + + (≈ {formatUsdValue(t.reserve_amount * plotUsd)}) + + )} {t.tx_hash && ( ({ value: l, label: l })); export default function WriterDashboard() { const { address, isConnected } = useAccount(); + const { data: plotUsd } = usePlotUsdPrice(); const { data: storylines = [], isLoading, error } = useQuery({ queryKey: ["writer-storylines", address], @@ -91,7 +93,7 @@ export default function WriterDashboard() {
{storylines.map((s) => ( - + ))} {!isLoading && !error && storylines.length === 0 && (

@@ -103,7 +105,7 @@ export default function WriterDashboard() { ); } -function StorylineDetail({ storyline, writerAddress }: { storyline: Storyline; writerAddress: Address }) { +function StorylineDetail({ storyline, writerAddress, plotUsd }: { storyline: Storyline; writerAddress: Address; plotUsd?: number | null }) { return (

@@ -172,11 +174,12 @@ function StorylineDetail({ storyline, writerAddress }: { storyline: Storyline; w {storyline.token_address && (
- +
)} diff --git a/src/components/ClaimRoyalties.tsx b/src/components/ClaimRoyalties.tsx index 06e80ba2..53bf69b8 100644 --- a/src/components/ClaimRoyalties.tsx +++ b/src/components/ClaimRoyalties.tsx @@ -7,6 +7,7 @@ import { formatUnits, type Address } from "viem"; import { browserClient } from "../../lib/rpc"; import { mcv2BondAbi, getTokenTVL } from "../../lib/price"; import { MCV2_BOND, RESERVE_LABEL, EXPLORER_URL, PLOT_TOKEN } from "../../lib/contracts/constants"; +import { formatUsdValue } from "../../lib/usd-price"; function formatTruncated(value: bigint, decimals: number, digits = 10): string { const raw = formatUnits(value, decimals); @@ -22,9 +23,10 @@ interface ClaimRoyaltiesProps { tokenAddress: Address; plotCount: number; beneficiary: Address; + plotUsd?: number | null; } -export function ClaimRoyalties({ tokenAddress, plotCount, beneficiary }: ClaimRoyaltiesProps) { +export function ClaimRoyalties({ tokenAddress, plotCount, beneficiary, plotUsd }: ClaimRoyaltiesProps) { const [txState, setTxState] = useState("idle"); const [error, setError] = useState(null); const [claimedAmount, setClaimedAmount] = useState(BigInt(0)); @@ -146,6 +148,11 @@ export function ClaimRoyalties({ tokenAddress, plotCount, beneficiary }: ClaimRo BigInt(0) ? "text-accent" : "text-foreground"}`}> {formatTruncated(unclaimed, decimals)} {RESERVE_LABEL} + {unclaimed > BigInt(0) && plotUsd && ( + + (≈ {formatUsdValue(parseFloat(formatUnits(unclaimed, decimals)) * plotUsd)}) + + )} {totalClaimed > BigInt(0) && ( (claimed: {formatTruncated(totalClaimed, decimals)} {RESERVE_LABEL} so far) diff --git a/src/components/ReaderPortfolio.tsx b/src/components/ReaderPortfolio.tsx index abc27c8c..c3880fa9 100644 --- a/src/components/ReaderPortfolio.tsx +++ b/src/components/ReaderPortfolio.tsx @@ -9,6 +9,7 @@ import { erc20Abi, mcv2BondAbi, get24hPriceChange, getTokenTVL } from "../../lib import { MCV2_BOND, RESERVE_LABEL, STORY_FACTORY } from "../../lib/contracts/constants"; import { supabase, type Storyline } from "../../lib/supabase"; import Link from "next/link"; +import { formatUsdValue } from "../../lib/usd-price"; interface Holding { storyline: Storyline; @@ -19,7 +20,7 @@ interface Holding { reserveDecimals: number; } -export function ReaderPortfolio() { +export function ReaderPortfolio({ plotUsd }: { plotUsd?: number | null }) { const { address, isConnected } = useAccount(); const { data: holdings, isLoading } = useQuery({ queryKey: ["reader-portfolio", address], @@ -128,6 +129,11 @@ export function ReaderPortfolio() { {formatPrice(formatUnits(totalValue, reserveDecimals))} {RESERVE_LABEL} + {plotUsd && ( + + (≈ {formatUsdValue(parseFloat(formatUnits(totalValue, reserveDecimals)) * plotUsd)}) + + )}
{bestPick && bestPick.priceChange !== null && (
@@ -166,6 +172,11 @@ export function ReaderPortfolio() {
{formatPrice(formatUnits(h.value, h.reserveDecimals))} {RESERVE_LABEL} + {plotUsd && ( + + (≈ {formatUsdValue(parseFloat(formatUnits(h.value, h.reserveDecimals)) * plotUsd)}) + + )}
{h.priceChange !== null && (
{data ? `${formatPrice(data.price)} ${RESERVE_LABEL}` : "—"} + {data && plotUsd && ( + + (≈ {formatUsdValue(parseFloat(data.price) * plotUsd)}) + + )}
@@ -57,6 +64,11 @@ export function WriterTradingStats({ storyline }: WriterTradingStatsProps) { {data ? `${formatPrice(data.tvl)} ${RESERVE_LABEL}` : "—"} + {data && plotUsd && ( + + (≈ {formatUsdValue(parseFloat(data.tvl) * plotUsd)}) + + )}
);