@medialane/ui 0.119.0 → 0.120.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -50,7 +50,7 @@ function FiatChip({ size }) {
|
|
|
50
50
|
function stripDollarSign(usdValue) {
|
|
51
51
|
return usdValue.replace("$", "");
|
|
52
52
|
}
|
|
53
|
-
const DISPLAY_FACE = "font-
|
|
53
|
+
const DISPLAY_FACE = "font-extrabold tracking-tight tabular-nums";
|
|
54
54
|
const DUAL_PRICE_SCALES = {
|
|
55
55
|
/** Full-width hero contexts: AssetMarketplacePanel's main price. */
|
|
56
56
|
hero: { amount: "text-3xl", chip: 18, stableChip: 14, divider: "h-7", showLabel: true },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/dual-price.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport { CurrencyIcon } from \"./currency-icon.js\";\nimport { formatDisplayPrice, isStableCurrency } from \"../utils/format.js\";\n\n/** Currency icon in the soft circular chip used throughout the wallet UI —\n * reads as a coin, not a stray glyph floating next to text. */\nexport function CoinChip({ symbol, size }: { symbol: string | null | undefined; size: number }) {\n return (\n <span\n className=\"grid shrink-0 place-items-center rounded-full bg-foreground/[0.06]\"\n style={{ width: size + 10, height: size + 10 }}\n >\n <CurrencyIcon symbol={symbol ?? \"\"} size={size} />\n </span>\n );\n}\n\n/** Same circular chip as CoinChip, for fiat. Sized 1:1 with the crypto\n * icon (fontSize === size, not a fraction of it) so the \"$\" reads with\n * the same visual weight as the coin icon sitting next to it — a smaller,\n * thinner glyph in an identically-sized circle looked like an afterthought\n * next to a solid icon, even though the circles measured the same. */\nfunction FiatChip({ size }: { size: number }) {\n return (\n <span\n className=\"grid shrink-0 place-items-center rounded-full bg-foreground/[0.06] font-extrabold leading-none text-foreground/80\"\n style={{ width: size + 10, height: size + 10, fontSize: size }}\n >\n $\n </span>\n );\n}\n\n/** usdValue arrives pre-formatted (\"$13.14\", \"<$0.01\") — the chip already\n * carries the \"$\", so strip it from the number to avoid showing it twice. */\nfunction stripDollarSign(usdValue: string): string {\n return usdValue.replace(\"$\", \"\");\n}\n\nconst DISPLAY_FACE = \"font-[family-name:var(--font-display)] font-extrabold tracking-tight tabular-nums\";\n\nconst DUAL_PRICE_SCALES = {\n /** Full-width hero contexts: AssetMarketplacePanel's main price. */\n hero: { amount: \"text-3xl\", chip: 18, stableChip: 14, divider: \"h-7\", showLabel: true },\n /** Card contexts: ListingCard's full variant — denser, the coin icon\n * already conveys the currency, a text label would be redundant. */\n card: { amount: \"text-base\", chip: 13, stableChip: 10, divider: \"h-4\", showLabel: false },\n} as const;\n\n/**\n * One currency's [chip] [amount] [optional code label] unit. Fiat and\n * crypto both render through this exact function — the previous version\n * had two separately-hand-coded branches (one baseline-aligned, one\n * center-aligned; one full-opacity, one dimmed) that drifted out of sync\n * with each other. Routing both through one function makes that class of\n * bug structurally impossible: there is only one place font, size,\n * opacity, and alignment for a price unit can be defined.\n */\nfunction PriceUnit({\n chip,\n amount,\n label,\n amountClassName,\n}: {\n chip: ReactNode;\n amount: string;\n label?: string;\n amountClassName: string;\n}) {\n return (\n <span className=\"inline-flex items-center gap-1.5\">\n {chip}\n <span className=\"flex items-baseline gap-1.5\">\n <span className={amountClassName}>{amount}</span>\n {label && <span className=\"text-sm font-semibold text-muted-foreground/70\">{label}</span>}\n </span>\n </span>\n );\n}\n\n/**\n * Equal-weight dual price: fiat and the on-chain currency shown as true\n * peers — same font, same size, same icon treatment, same label\n * alignment — not one dominant number with a secondary afterthought.\n * This platform's audience spans non-crypto newcomers who read fiat and\n * crypto-native buyers who read the token amount; neither should look\n * like the \"real\" price and the other a footnote. Falls back to\n * crypto-only when no USD rate is available. When the currency is itself\n * a USD-pegged stablecoin, the crypto side collapses to a chip + code\n * badge — showing \"13.14 USD\" beside \"13.14 USDC\" would just be the same\n * number twice.\n */\nexport function DualPrice({\n amountFormatted,\n currency,\n usdValue,\n scale,\n trailing,\n}: {\n amountFormatted: string | null | undefined;\n currency: string | null | undefined;\n usdValue?: string | null;\n scale: keyof typeof DUAL_PRICE_SCALES;\n trailing?: ReactNode;\n}) {\n if (!amountFormatted) return null;\n const s = DUAL_PRICE_SCALES[scale];\n const cryptoDisplay = formatDisplayPrice(amountFormatted);\n const amountClass = `${DISPLAY_FACE} ${s.amount}`;\n\n if (!usdValue) {\n return (\n <div className=\"flex items-center gap-2.5\">\n <PriceUnit\n chip={<CoinChip symbol={currency} size={s.chip} />}\n amount={cryptoDisplay}\n label={s.showLabel ? (currency ?? undefined) : undefined}\n amountClassName={amountClass}\n />\n {trailing && <span className=\"ml-0.5\">{trailing}</span>}\n </div>\n );\n }\n\n const stable = isStableCurrency(currency);\n return (\n <div className=\"flex items-center gap-2.5\">\n <PriceUnit\n chip={<FiatChip size={s.chip} />}\n amount={stripDollarSign(usdValue)}\n label={s.showLabel ? \"USD\" : undefined}\n amountClassName={amountClass}\n />\n {!stable && <span className={`${s.divider} w-px bg-border/60 shrink-0`} />}\n {stable ? (\n <span className=\"inline-flex items-center gap-1.5\">\n <CoinChip symbol={currency} size={s.stableChip} />\n <span className=\"text-sm font-semibold text-muted-foreground\">{currency}</span>\n </span>\n ) : (\n <PriceUnit\n chip={<CoinChip symbol={currency} size={s.chip} />}\n amount={cryptoDisplay}\n label={s.showLabel ? (currency ?? undefined) : undefined}\n amountClassName={amountClass}\n />\n )}\n {trailing && <span className=\"ml-0.5\">{trailing}</span>}\n </div>\n );\n}\n\nconst CHIP_TONES = {\n /** Full-bleed image overlays (AssetCard) — fixed dark glass, guaranteed\n * readable regardless of the artwork or the viewer's theme. */\n \"overlay-dark\": { dot: \"text-white/30\", text: \"text-white/65\" },\n /** Theme-aware card backgrounds (TokenCard). */\n card: { dot: \"text-muted-foreground/50\", text: \"text-muted-foreground\" },\n} as const;\n\n/**\n * Overlay/pill price content — fiat leads, crypto trails, middot-\n * separated; stablecoins collapse to fiat + symbol alone. Renders only the\n * inner fragment: callers own their own pill container (background, blur,\n * border, padding), which intentionally differs between hosts (see\n * `tone`) rather than being forced into one visual treatment. Smaller\n * scale than DualPrice (compact artwork overlay), so no fiat/crypto icon\n * chips here — the middot + dimmer trailing color is what marks the\n * crypto side as secondary in this tighter context.\n */\nexport function PriceChipContent({\n amountFormatted,\n currency,\n usdValue,\n tone,\n}: {\n amountFormatted: string | null | undefined;\n currency: string | null | undefined;\n usdValue?: string | null;\n tone: keyof typeof CHIP_TONES;\n}) {\n if (!amountFormatted) return null;\n const cryptoDisplay = formatDisplayPrice(amountFormatted);\n const stable = isStableCurrency(currency);\n\n if (!usdValue) {\n return (\n <>\n {currency && <CurrencyIcon symbol={currency} size={13} />}\n {cryptoDisplay}\n </>\n );\n }\n\n const t = CHIP_TONES[tone];\n return (\n <>\n {stripDollarSign(usdValue)}\n <span className={`font-semibold ${t.text}`}>USD</span>\n <span className={t.dot}>·</span>\n <span className={`inline-flex items-center gap-1 font-semibold ${t.text}`}>\n {currency && <CurrencyIcon symbol={currency} size={12} />}\n {stable ? currency : cryptoDisplay}\n </span>\n </>\n );\n}\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../src/components/dual-price.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport { CurrencyIcon } from \"./currency-icon.js\";\nimport { formatDisplayPrice, isStableCurrency } from \"../utils/format.js\";\n\n/** Currency icon in the soft circular chip used throughout the wallet UI —\n * reads as a coin, not a stray glyph floating next to text. */\nexport function CoinChip({ symbol, size }: { symbol: string | null | undefined; size: number }) {\n return (\n <span\n className=\"grid shrink-0 place-items-center rounded-full bg-foreground/[0.06]\"\n style={{ width: size + 10, height: size + 10 }}\n >\n <CurrencyIcon symbol={symbol ?? \"\"} size={size} />\n </span>\n );\n}\n\n/** Same circular chip as CoinChip, for fiat. Sized 1:1 with the crypto\n * icon (fontSize === size, not a fraction of it) so the \"$\" reads with\n * the same visual weight as the coin icon sitting next to it — a smaller,\n * thinner glyph in an identically-sized circle looked like an afterthought\n * next to a solid icon, even though the circles measured the same. */\nfunction FiatChip({ size }: { size: number }) {\n return (\n <span\n className=\"grid shrink-0 place-items-center rounded-full bg-foreground/[0.06] font-extrabold leading-none text-foreground/80\"\n style={{ width: size + 10, height: size + 10, fontSize: size }}\n >\n $\n </span>\n );\n}\n\n/** usdValue arrives pre-formatted (\"$13.14\", \"<$0.01\") — the chip already\n * carries the \"$\", so strip it from the number to avoid showing it twice. */\nfunction stripDollarSign(usdValue: string): string {\n return usdValue.replace(\"$\", \"\");\n}\n\n// Inter (the platform's default body font, applied via <body>'s className\n// in every app's layout.tsx) rather than the Urbanist display face —\n// direct feedback that the price numbers should use the standard system\n// font, not the brand's opt-in heading face.\nconst DISPLAY_FACE = \"font-extrabold tracking-tight tabular-nums\";\n\nconst DUAL_PRICE_SCALES = {\n /** Full-width hero contexts: AssetMarketplacePanel's main price. */\n hero: { amount: \"text-3xl\", chip: 18, stableChip: 14, divider: \"h-7\", showLabel: true },\n /** Card contexts: ListingCard's full variant — denser, the coin icon\n * already conveys the currency, a text label would be redundant. */\n card: { amount: \"text-base\", chip: 13, stableChip: 10, divider: \"h-4\", showLabel: false },\n} as const;\n\n/**\n * One currency's [chip] [amount] [optional code label] unit. Fiat and\n * crypto both render through this exact function — the previous version\n * had two separately-hand-coded branches (one baseline-aligned, one\n * center-aligned; one full-opacity, one dimmed) that drifted out of sync\n * with each other. Routing both through one function makes that class of\n * bug structurally impossible: there is only one place font, size,\n * opacity, and alignment for a price unit can be defined.\n */\nfunction PriceUnit({\n chip,\n amount,\n label,\n amountClassName,\n}: {\n chip: ReactNode;\n amount: string;\n label?: string;\n amountClassName: string;\n}) {\n return (\n <span className=\"inline-flex items-center gap-1.5\">\n {chip}\n <span className=\"flex items-baseline gap-1.5\">\n <span className={amountClassName}>{amount}</span>\n {label && <span className=\"text-sm font-semibold text-muted-foreground/70\">{label}</span>}\n </span>\n </span>\n );\n}\n\n/**\n * Equal-weight dual price: fiat and the on-chain currency shown as true\n * peers — same font, same size, same icon treatment, same label\n * alignment — not one dominant number with a secondary afterthought.\n * This platform's audience spans non-crypto newcomers who read fiat and\n * crypto-native buyers who read the token amount; neither should look\n * like the \"real\" price and the other a footnote. Falls back to\n * crypto-only when no USD rate is available. When the currency is itself\n * a USD-pegged stablecoin, the crypto side collapses to a chip + code\n * badge — showing \"13.14 USD\" beside \"13.14 USDC\" would just be the same\n * number twice.\n */\nexport function DualPrice({\n amountFormatted,\n currency,\n usdValue,\n scale,\n trailing,\n}: {\n amountFormatted: string | null | undefined;\n currency: string | null | undefined;\n usdValue?: string | null;\n scale: keyof typeof DUAL_PRICE_SCALES;\n trailing?: ReactNode;\n}) {\n if (!amountFormatted) return null;\n const s = DUAL_PRICE_SCALES[scale];\n const cryptoDisplay = formatDisplayPrice(amountFormatted);\n const amountClass = `${DISPLAY_FACE} ${s.amount}`;\n\n if (!usdValue) {\n return (\n <div className=\"flex items-center gap-2.5\">\n <PriceUnit\n chip={<CoinChip symbol={currency} size={s.chip} />}\n amount={cryptoDisplay}\n label={s.showLabel ? (currency ?? undefined) : undefined}\n amountClassName={amountClass}\n />\n {trailing && <span className=\"ml-0.5\">{trailing}</span>}\n </div>\n );\n }\n\n const stable = isStableCurrency(currency);\n return (\n <div className=\"flex items-center gap-2.5\">\n <PriceUnit\n chip={<FiatChip size={s.chip} />}\n amount={stripDollarSign(usdValue)}\n label={s.showLabel ? \"USD\" : undefined}\n amountClassName={amountClass}\n />\n {!stable && <span className={`${s.divider} w-px bg-border/60 shrink-0`} />}\n {stable ? (\n <span className=\"inline-flex items-center gap-1.5\">\n <CoinChip symbol={currency} size={s.stableChip} />\n <span className=\"text-sm font-semibold text-muted-foreground\">{currency}</span>\n </span>\n ) : (\n <PriceUnit\n chip={<CoinChip symbol={currency} size={s.chip} />}\n amount={cryptoDisplay}\n label={s.showLabel ? (currency ?? undefined) : undefined}\n amountClassName={amountClass}\n />\n )}\n {trailing && <span className=\"ml-0.5\">{trailing}</span>}\n </div>\n );\n}\n\nconst CHIP_TONES = {\n /** Full-bleed image overlays (AssetCard) — fixed dark glass, guaranteed\n * readable regardless of the artwork or the viewer's theme. */\n \"overlay-dark\": { dot: \"text-white/30\", text: \"text-white/65\" },\n /** Theme-aware card backgrounds (TokenCard). */\n card: { dot: \"text-muted-foreground/50\", text: \"text-muted-foreground\" },\n} as const;\n\n/**\n * Overlay/pill price content — fiat leads, crypto trails, middot-\n * separated; stablecoins collapse to fiat + symbol alone. Renders only the\n * inner fragment: callers own their own pill container (background, blur,\n * border, padding), which intentionally differs between hosts (see\n * `tone`) rather than being forced into one visual treatment. Smaller\n * scale than DualPrice (compact artwork overlay), so no fiat/crypto icon\n * chips here — the middot + dimmer trailing color is what marks the\n * crypto side as secondary in this tighter context.\n */\nexport function PriceChipContent({\n amountFormatted,\n currency,\n usdValue,\n tone,\n}: {\n amountFormatted: string | null | undefined;\n currency: string | null | undefined;\n usdValue?: string | null;\n tone: keyof typeof CHIP_TONES;\n}) {\n if (!amountFormatted) return null;\n const cryptoDisplay = formatDisplayPrice(amountFormatted);\n const stable = isStableCurrency(currency);\n\n if (!usdValue) {\n return (\n <>\n {currency && <CurrencyIcon symbol={currency} size={13} />}\n {cryptoDisplay}\n </>\n );\n }\n\n const t = CHIP_TONES[tone];\n return (\n <>\n {stripDollarSign(usdValue)}\n <span className={`font-semibold ${t.text}`}>USD</span>\n <span className={t.dot}>·</span>\n <span className={`inline-flex items-center gap-1 font-semibold ${t.text}`}>\n {currency && <CurrencyIcon symbol={currency} size={12} />}\n {stable ? currency : cryptoDisplay}\n </span>\n </>\n );\n}\n"],"mappings":"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","names":[]}
|
|
@@ -25,7 +25,7 @@ function FiatChip({ size }) {
|
|
|
25
25
|
function stripDollarSign(usdValue) {
|
|
26
26
|
return usdValue.replace("$", "");
|
|
27
27
|
}
|
|
28
|
-
const DISPLAY_FACE = "font-
|
|
28
|
+
const DISPLAY_FACE = "font-extrabold tracking-tight tabular-nums";
|
|
29
29
|
const DUAL_PRICE_SCALES = {
|
|
30
30
|
/** Full-width hero contexts: AssetMarketplacePanel's main price. */
|
|
31
31
|
hero: { amount: "text-3xl", chip: 18, stableChip: 14, divider: "h-7", showLabel: true },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/dual-price.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport { CurrencyIcon } from \"./currency-icon.js\";\nimport { formatDisplayPrice, isStableCurrency } from \"../utils/format.js\";\n\n/** Currency icon in the soft circular chip used throughout the wallet UI —\n * reads as a coin, not a stray glyph floating next to text. */\nexport function CoinChip({ symbol, size }: { symbol: string | null | undefined; size: number }) {\n return (\n <span\n className=\"grid shrink-0 place-items-center rounded-full bg-foreground/[0.06]\"\n style={{ width: size + 10, height: size + 10 }}\n >\n <CurrencyIcon symbol={symbol ?? \"\"} size={size} />\n </span>\n );\n}\n\n/** Same circular chip as CoinChip, for fiat. Sized 1:1 with the crypto\n * icon (fontSize === size, not a fraction of it) so the \"$\" reads with\n * the same visual weight as the coin icon sitting next to it — a smaller,\n * thinner glyph in an identically-sized circle looked like an afterthought\n * next to a solid icon, even though the circles measured the same. */\nfunction FiatChip({ size }: { size: number }) {\n return (\n <span\n className=\"grid shrink-0 place-items-center rounded-full bg-foreground/[0.06] font-extrabold leading-none text-foreground/80\"\n style={{ width: size + 10, height: size + 10, fontSize: size }}\n >\n $\n </span>\n );\n}\n\n/** usdValue arrives pre-formatted (\"$13.14\", \"<$0.01\") — the chip already\n * carries the \"$\", so strip it from the number to avoid showing it twice. */\nfunction stripDollarSign(usdValue: string): string {\n return usdValue.replace(\"$\", \"\");\n}\n\nconst DISPLAY_FACE = \"font-[family-name:var(--font-display)] font-extrabold tracking-tight tabular-nums\";\n\nconst DUAL_PRICE_SCALES = {\n /** Full-width hero contexts: AssetMarketplacePanel's main price. */\n hero: { amount: \"text-3xl\", chip: 18, stableChip: 14, divider: \"h-7\", showLabel: true },\n /** Card contexts: ListingCard's full variant — denser, the coin icon\n * already conveys the currency, a text label would be redundant. */\n card: { amount: \"text-base\", chip: 13, stableChip: 10, divider: \"h-4\", showLabel: false },\n} as const;\n\n/**\n * One currency's [chip] [amount] [optional code label] unit. Fiat and\n * crypto both render through this exact function — the previous version\n * had two separately-hand-coded branches (one baseline-aligned, one\n * center-aligned; one full-opacity, one dimmed) that drifted out of sync\n * with each other. Routing both through one function makes that class of\n * bug structurally impossible: there is only one place font, size,\n * opacity, and alignment for a price unit can be defined.\n */\nfunction PriceUnit({\n chip,\n amount,\n label,\n amountClassName,\n}: {\n chip: ReactNode;\n amount: string;\n label?: string;\n amountClassName: string;\n}) {\n return (\n <span className=\"inline-flex items-center gap-1.5\">\n {chip}\n <span className=\"flex items-baseline gap-1.5\">\n <span className={amountClassName}>{amount}</span>\n {label && <span className=\"text-sm font-semibold text-muted-foreground/70\">{label}</span>}\n </span>\n </span>\n );\n}\n\n/**\n * Equal-weight dual price: fiat and the on-chain currency shown as true\n * peers — same font, same size, same icon treatment, same label\n * alignment — not one dominant number with a secondary afterthought.\n * This platform's audience spans non-crypto newcomers who read fiat and\n * crypto-native buyers who read the token amount; neither should look\n * like the \"real\" price and the other a footnote. Falls back to\n * crypto-only when no USD rate is available. When the currency is itself\n * a USD-pegged stablecoin, the crypto side collapses to a chip + code\n * badge — showing \"13.14 USD\" beside \"13.14 USDC\" would just be the same\n * number twice.\n */\nexport function DualPrice({\n amountFormatted,\n currency,\n usdValue,\n scale,\n trailing,\n}: {\n amountFormatted: string | null | undefined;\n currency: string | null | undefined;\n usdValue?: string | null;\n scale: keyof typeof DUAL_PRICE_SCALES;\n trailing?: ReactNode;\n}) {\n if (!amountFormatted) return null;\n const s = DUAL_PRICE_SCALES[scale];\n const cryptoDisplay = formatDisplayPrice(amountFormatted);\n const amountClass = `${DISPLAY_FACE} ${s.amount}`;\n\n if (!usdValue) {\n return (\n <div className=\"flex items-center gap-2.5\">\n <PriceUnit\n chip={<CoinChip symbol={currency} size={s.chip} />}\n amount={cryptoDisplay}\n label={s.showLabel ? (currency ?? undefined) : undefined}\n amountClassName={amountClass}\n />\n {trailing && <span className=\"ml-0.5\">{trailing}</span>}\n </div>\n );\n }\n\n const stable = isStableCurrency(currency);\n return (\n <div className=\"flex items-center gap-2.5\">\n <PriceUnit\n chip={<FiatChip size={s.chip} />}\n amount={stripDollarSign(usdValue)}\n label={s.showLabel ? \"USD\" : undefined}\n amountClassName={amountClass}\n />\n {!stable && <span className={`${s.divider} w-px bg-border/60 shrink-0`} />}\n {stable ? (\n <span className=\"inline-flex items-center gap-1.5\">\n <CoinChip symbol={currency} size={s.stableChip} />\n <span className=\"text-sm font-semibold text-muted-foreground\">{currency}</span>\n </span>\n ) : (\n <PriceUnit\n chip={<CoinChip symbol={currency} size={s.chip} />}\n amount={cryptoDisplay}\n label={s.showLabel ? (currency ?? undefined) : undefined}\n amountClassName={amountClass}\n />\n )}\n {trailing && <span className=\"ml-0.5\">{trailing}</span>}\n </div>\n );\n}\n\nconst CHIP_TONES = {\n /** Full-bleed image overlays (AssetCard) — fixed dark glass, guaranteed\n * readable regardless of the artwork or the viewer's theme. */\n \"overlay-dark\": { dot: \"text-white/30\", text: \"text-white/65\" },\n /** Theme-aware card backgrounds (TokenCard). */\n card: { dot: \"text-muted-foreground/50\", text: \"text-muted-foreground\" },\n} as const;\n\n/**\n * Overlay/pill price content — fiat leads, crypto trails, middot-\n * separated; stablecoins collapse to fiat + symbol alone. Renders only the\n * inner fragment: callers own their own pill container (background, blur,\n * border, padding), which intentionally differs between hosts (see\n * `tone`) rather than being forced into one visual treatment. Smaller\n * scale than DualPrice (compact artwork overlay), so no fiat/crypto icon\n * chips here — the middot + dimmer trailing color is what marks the\n * crypto side as secondary in this tighter context.\n */\nexport function PriceChipContent({\n amountFormatted,\n currency,\n usdValue,\n tone,\n}: {\n amountFormatted: string | null | undefined;\n currency: string | null | undefined;\n usdValue?: string | null;\n tone: keyof typeof CHIP_TONES;\n}) {\n if (!amountFormatted) return null;\n const cryptoDisplay = formatDisplayPrice(amountFormatted);\n const stable = isStableCurrency(currency);\n\n if (!usdValue) {\n return (\n <>\n {currency && <CurrencyIcon symbol={currency} size={13} />}\n {cryptoDisplay}\n </>\n );\n }\n\n const t = CHIP_TONES[tone];\n return (\n <>\n {stripDollarSign(usdValue)}\n <span className={`font-semibold ${t.text}`}>USD</span>\n <span className={t.dot}>·</span>\n <span className={`inline-flex items-center gap-1 font-semibold ${t.text}`}>\n {currency && <CurrencyIcon symbol={currency} size={12} />}\n {stable ? currency : cryptoDisplay}\n </span>\n </>\n );\n}\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../src/components/dual-price.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport { CurrencyIcon } from \"./currency-icon.js\";\nimport { formatDisplayPrice, isStableCurrency } from \"../utils/format.js\";\n\n/** Currency icon in the soft circular chip used throughout the wallet UI —\n * reads as a coin, not a stray glyph floating next to text. */\nexport function CoinChip({ symbol, size }: { symbol: string | null | undefined; size: number }) {\n return (\n <span\n className=\"grid shrink-0 place-items-center rounded-full bg-foreground/[0.06]\"\n style={{ width: size + 10, height: size + 10 }}\n >\n <CurrencyIcon symbol={symbol ?? \"\"} size={size} />\n </span>\n );\n}\n\n/** Same circular chip as CoinChip, for fiat. Sized 1:1 with the crypto\n * icon (fontSize === size, not a fraction of it) so the \"$\" reads with\n * the same visual weight as the coin icon sitting next to it — a smaller,\n * thinner glyph in an identically-sized circle looked like an afterthought\n * next to a solid icon, even though the circles measured the same. */\nfunction FiatChip({ size }: { size: number }) {\n return (\n <span\n className=\"grid shrink-0 place-items-center rounded-full bg-foreground/[0.06] font-extrabold leading-none text-foreground/80\"\n style={{ width: size + 10, height: size + 10, fontSize: size }}\n >\n $\n </span>\n );\n}\n\n/** usdValue arrives pre-formatted (\"$13.14\", \"<$0.01\") — the chip already\n * carries the \"$\", so strip it from the number to avoid showing it twice. */\nfunction stripDollarSign(usdValue: string): string {\n return usdValue.replace(\"$\", \"\");\n}\n\n// Inter (the platform's default body font, applied via <body>'s className\n// in every app's layout.tsx) rather than the Urbanist display face —\n// direct feedback that the price numbers should use the standard system\n// font, not the brand's opt-in heading face.\nconst DISPLAY_FACE = \"font-extrabold tracking-tight tabular-nums\";\n\nconst DUAL_PRICE_SCALES = {\n /** Full-width hero contexts: AssetMarketplacePanel's main price. */\n hero: { amount: \"text-3xl\", chip: 18, stableChip: 14, divider: \"h-7\", showLabel: true },\n /** Card contexts: ListingCard's full variant — denser, the coin icon\n * already conveys the currency, a text label would be redundant. */\n card: { amount: \"text-base\", chip: 13, stableChip: 10, divider: \"h-4\", showLabel: false },\n} as const;\n\n/**\n * One currency's [chip] [amount] [optional code label] unit. Fiat and\n * crypto both render through this exact function — the previous version\n * had two separately-hand-coded branches (one baseline-aligned, one\n * center-aligned; one full-opacity, one dimmed) that drifted out of sync\n * with each other. Routing both through one function makes that class of\n * bug structurally impossible: there is only one place font, size,\n * opacity, and alignment for a price unit can be defined.\n */\nfunction PriceUnit({\n chip,\n amount,\n label,\n amountClassName,\n}: {\n chip: ReactNode;\n amount: string;\n label?: string;\n amountClassName: string;\n}) {\n return (\n <span className=\"inline-flex items-center gap-1.5\">\n {chip}\n <span className=\"flex items-baseline gap-1.5\">\n <span className={amountClassName}>{amount}</span>\n {label && <span className=\"text-sm font-semibold text-muted-foreground/70\">{label}</span>}\n </span>\n </span>\n );\n}\n\n/**\n * Equal-weight dual price: fiat and the on-chain currency shown as true\n * peers — same font, same size, same icon treatment, same label\n * alignment — not one dominant number with a secondary afterthought.\n * This platform's audience spans non-crypto newcomers who read fiat and\n * crypto-native buyers who read the token amount; neither should look\n * like the \"real\" price and the other a footnote. Falls back to\n * crypto-only when no USD rate is available. When the currency is itself\n * a USD-pegged stablecoin, the crypto side collapses to a chip + code\n * badge — showing \"13.14 USD\" beside \"13.14 USDC\" would just be the same\n * number twice.\n */\nexport function DualPrice({\n amountFormatted,\n currency,\n usdValue,\n scale,\n trailing,\n}: {\n amountFormatted: string | null | undefined;\n currency: string | null | undefined;\n usdValue?: string | null;\n scale: keyof typeof DUAL_PRICE_SCALES;\n trailing?: ReactNode;\n}) {\n if (!amountFormatted) return null;\n const s = DUAL_PRICE_SCALES[scale];\n const cryptoDisplay = formatDisplayPrice(amountFormatted);\n const amountClass = `${DISPLAY_FACE} ${s.amount}`;\n\n if (!usdValue) {\n return (\n <div className=\"flex items-center gap-2.5\">\n <PriceUnit\n chip={<CoinChip symbol={currency} size={s.chip} />}\n amount={cryptoDisplay}\n label={s.showLabel ? (currency ?? undefined) : undefined}\n amountClassName={amountClass}\n />\n {trailing && <span className=\"ml-0.5\">{trailing}</span>}\n </div>\n );\n }\n\n const stable = isStableCurrency(currency);\n return (\n <div className=\"flex items-center gap-2.5\">\n <PriceUnit\n chip={<FiatChip size={s.chip} />}\n amount={stripDollarSign(usdValue)}\n label={s.showLabel ? \"USD\" : undefined}\n amountClassName={amountClass}\n />\n {!stable && <span className={`${s.divider} w-px bg-border/60 shrink-0`} />}\n {stable ? (\n <span className=\"inline-flex items-center gap-1.5\">\n <CoinChip symbol={currency} size={s.stableChip} />\n <span className=\"text-sm font-semibold text-muted-foreground\">{currency}</span>\n </span>\n ) : (\n <PriceUnit\n chip={<CoinChip symbol={currency} size={s.chip} />}\n amount={cryptoDisplay}\n label={s.showLabel ? (currency ?? undefined) : undefined}\n amountClassName={amountClass}\n />\n )}\n {trailing && <span className=\"ml-0.5\">{trailing}</span>}\n </div>\n );\n}\n\nconst CHIP_TONES = {\n /** Full-bleed image overlays (AssetCard) — fixed dark glass, guaranteed\n * readable regardless of the artwork or the viewer's theme. */\n \"overlay-dark\": { dot: \"text-white/30\", text: \"text-white/65\" },\n /** Theme-aware card backgrounds (TokenCard). */\n card: { dot: \"text-muted-foreground/50\", text: \"text-muted-foreground\" },\n} as const;\n\n/**\n * Overlay/pill price content — fiat leads, crypto trails, middot-\n * separated; stablecoins collapse to fiat + symbol alone. Renders only the\n * inner fragment: callers own their own pill container (background, blur,\n * border, padding), which intentionally differs between hosts (see\n * `tone`) rather than being forced into one visual treatment. Smaller\n * scale than DualPrice (compact artwork overlay), so no fiat/crypto icon\n * chips here — the middot + dimmer trailing color is what marks the\n * crypto side as secondary in this tighter context.\n */\nexport function PriceChipContent({\n amountFormatted,\n currency,\n usdValue,\n tone,\n}: {\n amountFormatted: string | null | undefined;\n currency: string | null | undefined;\n usdValue?: string | null;\n tone: keyof typeof CHIP_TONES;\n}) {\n if (!amountFormatted) return null;\n const cryptoDisplay = formatDisplayPrice(amountFormatted);\n const stable = isStableCurrency(currency);\n\n if (!usdValue) {\n return (\n <>\n {currency && <CurrencyIcon symbol={currency} size={13} />}\n {cryptoDisplay}\n </>\n );\n }\n\n const t = CHIP_TONES[tone];\n return (\n <>\n {stripDollarSign(usdValue)}\n <span className={`font-semibold ${t.text}`}>USD</span>\n <span className={t.dot}>·</span>\n <span className={`inline-flex items-center gap-1 font-semibold ${t.text}`}>\n {currency && <CurrencyIcon symbol={currency} size={12} />}\n {stable ? currency : cryptoDisplay}\n </span>\n </>\n );\n}\n"],"mappings":"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","names":[]}
|