From 386f653c68a9d4b4045c5af886ec0cdda01100d4 Mon Sep 17 00:00:00 2001 From: FrancoAguzzi Date: Wed, 21 Aug 2024 17:46:05 -0300 Subject: [PATCH 01/43] feat: [SC-25297] Migrate DisplayedPrice comp. to namekit-react --- .../Namekit/DisplayedPrice.stories.tsx | 202 +++++++++++ .../CurrencySymbol/CurrencySymbol.tsx | 25 +- .../src/components/DisplayedPrice.tsx | 314 ++++++++++++++++++ packages/namekit-react/src/index.ts | 1 + 4 files changed, 535 insertions(+), 7 deletions(-) create mode 100644 apps/storybook.namekit.io/stories/Namekit/DisplayedPrice.stories.tsx create mode 100644 packages/namekit-react/src/components/DisplayedPrice.tsx diff --git a/apps/storybook.namekit.io/stories/Namekit/DisplayedPrice.stories.tsx b/apps/storybook.namekit.io/stories/Namekit/DisplayedPrice.stories.tsx new file mode 100644 index 000000000..77b72f7a4 --- /dev/null +++ b/apps/storybook.namekit.io/stories/Namekit/DisplayedPrice.stories.tsx @@ -0,0 +1,202 @@ +import { Currency, PriceSymbology } from "@namehash/ens-utils"; +import { + DisplayedPrice, + PriceDisplaySize, + CurrencySymbolPosition, +} from "@namehash/namekit-react"; +import type { Meta, StoryObj } from "@storybook/react"; + +const meta: Meta = { + component: DisplayedPrice, + title: "Namekit/DisplayedPrice", + argTypes: { + price: { + control: "object", + }, + displaySize: { + options: Object.keys(PriceDisplaySize), + control: { type: "select" }, + }, + symbolPosition: { + options: Object.keys(CurrencySymbolPosition), + control: { type: "select" }, + }, + currencySymbology: { + options: Object.keys(PriceSymbology), + control: { type: "select" }, + }, + }, +}; + +declare global { + interface BigInt { + toJSON(): string; + } +} + +BigInt.prototype.toJSON = function () { + return `${this.toString()}n`; +}; + +export default meta; + +type Story = StoryObj; + +export const EthPrice: Story = { + args: { + price: { + currency: Currency.Eth, + value: 1000000000000000000n, + }, + }, +}; +export const EthPriceWithoutCurrencyTooltip: Story = { + args: { + price: { + currency: Currency.Eth, + value: 1000000000000000000n, + }, + describeCurrencyInTooltip: false, + }, +}; +export const UsdPrice: Story = { + args: { + price: { + currency: Currency.Usd, + value: 198900n, + }, + }, +}; +export const LargePriceDisplaySize: Story = { + args: { + price: { + currency: Currency.Usd, + value: 198900n, + }, + displaySize: PriceDisplaySize.Large, + }, +}; +export const MediumPriceDisplaySize: Story = { + args: { + price: { + currency: Currency.Usd, + value: 198900n, + }, + displaySize: PriceDisplaySize.Medium, + }, +}; +export const SmallPriceDisplaySize: Story = { + args: { + price: { + currency: Currency.Usd, + value: 198900n, + }, + displaySize: PriceDisplaySize.Small, + }, +}; +export const MicroPriceDisplaySize: Story = { + args: { + price: { + currency: Currency.Usd, + value: 198900n, + }, + displaySize: PriceDisplaySize.Micro, + }, +}; +export const DisplaySymbologyAtLeft: Story = { + args: { + price: { + currency: Currency.Usd, + value: 198900n, + }, + symbolPosition: CurrencySymbolPosition.Left, + displaySize: PriceDisplaySize.Micro, + }, +}; +export const DisplaySymbologyAtRight: Story = { + args: { + price: { + currency: Currency.Usd, + value: 198900n, + }, + symbolPosition: CurrencySymbolPosition.Right, + displaySize: PriceDisplaySize.Micro, + }, +}; +export const DisplaySymbolSymbologyForETH: Story = { + args: { + price: { + currency: Currency.Eth, + value: 1000000000000000000n, + }, + currencySymbology: PriceSymbology.Symbol, + }, +}; +export const DisplayAcronymSymbologyForETH: Story = { + args: { + price: { + currency: Currency.Eth, + value: 1000000000000000000n, + }, + currencySymbology: PriceSymbology.Acronym, + }, +}; +export const DisplaySymbolSymbologyForUSD: Story = { + args: { + price: { + currency: Currency.Usd, + value: 198900n, + }, + currencySymbology: PriceSymbology.Symbol, + }, +}; +export const DisplayAcronymSymbologyForUSD: Story = { + args: { + price: { + currency: Currency.Usd, + value: 198900n, + }, + currencySymbology: PriceSymbology.Acronym, + }, +}; +export const WithOnClickHandler: Story = { + args: { + price: { + currency: Currency.Usd, + value: 198900n, + }, + onTextClick: () => alert("Price clicked"), + }, +}; +export const EthMinDisplayPrice: Story = { + args: { + price: { + currency: Currency.Eth, + value: 100000000000000n, + }, + }, +}; +export const EthMaxDisplayPrice: Story = { + args: { + price: { + currency: Currency.Eth, + value: 10000000000000000000000000n, + }, + }, +}; +export const UsdMinDisplayPrice: Story = { + args: { + price: { + currency: Currency.Usd, + value: 1n, + }, + }, +}; +export const UsdMaxDisplayPrice: Story = { + args: { + price: { + currency: Currency.Usd, + value: 1000000000000000000n, + }, + }, +}; diff --git a/packages/namekit-react/src/components/CurrencySymbol/CurrencySymbol.tsx b/packages/namekit-react/src/components/CurrencySymbol/CurrencySymbol.tsx index 809860fe9..734106c03 100644 --- a/packages/namekit-react/src/components/CurrencySymbol/CurrencySymbol.tsx +++ b/packages/namekit-react/src/components/CurrencySymbol/CurrencySymbol.tsx @@ -6,6 +6,7 @@ import { WethSymbol } from "./WethSymbol"; import { EthSymbol } from "./EthSymbol"; import { DaiSymbol } from "./DaiSymbol"; import React from "react"; +import cc from "classcat"; export enum CurrencySymbolSize { Small = "nk-w-4", @@ -20,7 +21,7 @@ interface CurrencySymbolProps { /** * The size of the `CurrencySymbol`. - * + * * Defaults to `CurrencySymbolSize.Small`. */ size: CurrencySymbolSize; @@ -29,20 +30,24 @@ interface CurrencySymbolProps { * If `true`, hovering over the `CurrencySymbol` will display the * name of `currency` in a `Tooltip`. If `false` then the `CurrencySymbol` * won't have any `Tooltip`. - * + * * Defaults to `true`. */ describeCurrencyInTooltip: boolean; - + /** * Optional. Defines a custom color for the `CurrencySymbol` that overrides * the default symbol color for `currency`. - * + * * If defined, must be formatted as a hex color code. - * + * * If undefined, defaults to the default symbol color for `currency`. */ symbolFillColor?: string; + /** + * Optional. Additional classes to apply to the `CurrencySymbol`. + */ + additionalClasses?: string; } export const CurrencySymbol = ({ @@ -50,13 +55,17 @@ export const CurrencySymbol = ({ size = CurrencySymbolSize.Small, describeCurrencyInTooltip = true, symbolFillColor = undefined, + additionalClasses = "", }: CurrencySymbolProps) => { let symbol: JSX.Element; switch (currency) { case Currency.Usd: symbol = ( -

+

$

); @@ -75,7 +84,9 @@ export const CurrencySymbol = ({ break; default: // TODO: We haven't created symbols for `Currency.Gas` yet. - throw new Error(`Error creating CurrencySymbol: unsupported Currency: "${currency}".`); + throw new Error( + `Error creating CurrencySymbol: unsupported Currency: "${currency}".`, + ); } if (!describeCurrencyInTooltip) return symbol; diff --git a/packages/namekit-react/src/components/DisplayedPrice.tsx b/packages/namekit-react/src/components/DisplayedPrice.tsx new file mode 100644 index 000000000..9535f33f9 --- /dev/null +++ b/packages/namekit-react/src/components/DisplayedPrice.tsx @@ -0,0 +1,314 @@ +import { + Currency, + type Price, + formattedPrice, + PriceCurrencyFormat, + PriceSymbology, +} from "@namehash/ens-utils"; + +import React, { useEffect } from "react"; +import { + CurrencySymbol, + CurrencySymbolSize, +} from "./CurrencySymbol/CurrencySymbol"; + +import cc from "classcat"; +import { Tooltip } from "./Tooltip"; + +export enum PriceDisplaySize { + Micro = "nk-text-xs md:nk-text-sm nk-font-normal", + Small = "nk-text-sm nk-font-semibold", + Medium = "nk-text-xl nk-font-semibold", + Large = "nk-text-2xl nk-font-bold", +} + +export enum AltPriceDisplayFormat { + Tooltip, + Text, +} + +export enum CurrencySymbolPosition { + Left = "nk-mr-1.5", + Right = "nk-ml-1.5", +} + +export enum PriceDisplayPosition { + Right = "nk-flex nk-inline-flex nk-items-end nk-space-x-2", + Bottom = "nk-flex nk-flex-col nk-text-right nk-items-end nk-space-y-1", +} + +const parsePriceDisplaySizeToCurrencyDisplaySize = ( + priceDisplaySize: PriceDisplaySize, +): CurrencySymbolSize => { + switch (priceDisplaySize) { + case PriceDisplaySize.Micro: + case PriceDisplaySize.Small: + return CurrencySymbolSize.Small; + case PriceDisplaySize.Medium: + case PriceDisplaySize.Large: + return CurrencySymbolSize.Large; + } +}; + +interface DisplayedPriceProps { + // The price to be displayed + price: Price; + // The onClick event handler for the price text + onTextClick?: () => void; + // Wether to display a currency symbology as its acronym or symbol + currencySymbology?: PriceSymbology; + // The place to display the currency symbology + symbolPosition?: CurrencySymbolPosition; + // The size of the price display + displaySize?: PriceDisplaySize; + // Wether or not to display the name of the currency in a tooltip when its symbol is hovered + describeCurrencyInTooltip?: boolean; + // Wether to display the currency symbology + withSymbol?: boolean; +} + +export const DisplayedPrice = ({ + price, + onTextClick, + describeCurrencyInTooltip = true, + symbolPosition = CurrencySymbolPosition.Left, + currencySymbology = PriceSymbology.Symbol, + displaySize = PriceDisplaySize.Small, + withSymbol = true, +}: DisplayedPriceProps) => { + const priceDisplaySizeAsCurrencyDisplaySize = + parsePriceDisplaySizeToCurrencyDisplaySize(displaySize); + + return ( +
+

{formattedPrice({ price })}

+ +
+ +
+ + {currencySymbology === PriceSymbology.Acronym && ( +

+ {PriceCurrencyFormat[price.currency].Acronym} +

+ )} +
+ ); +}; + +interface DisplayedPriceWithAltPriceProps { + // The price to be displayed + price: Price; + // The alternative price to be displayed (the price converted to another currency) + altPrice?: Price; + // The onClick event handler for the price text + onTextClick?: () => void; + // The onClick event handler for the alt. price text + onAltPriceTextClick?: () => void; + // Wether to display the alternative price as a text instead of a tooltip + altPriceDisplayFormat: AltPriceDisplayFormat; + // Wether to display a currency symbology as its acronym or symbol + currencySymbology?: PriceSymbology; + // The place to display the currency symbology + symbolPosition?: CurrencySymbolPosition; + // The size of the price display + priceTextDisplaySize?: PriceDisplaySize; + // The size of the alternative price to display, which must be smaller than the price display size + altPriceDisplaySize?: PriceDisplaySize; + // The place to display the alternative price when displayed as text + altPriceDisplayPosition?: PriceDisplayPosition; + // Wether or not to display the name of the currency in a tooltip when its symbol is hovered + describeCurrencyInTooltip?: boolean; +} + +export const DisplayedPriceWithAltPrice = ({ + price, + altPrice, + onTextClick, + onAltPriceTextClick, + describeCurrencyInTooltip = true, + currencySymbology = PriceSymbology.Symbol, + altPriceDisplaySize = PriceDisplaySize.Micro, + symbolPosition = CurrencySymbolPosition.Left, + priceTextDisplaySize = PriceDisplaySize.Small, + altPriceDisplayPosition = PriceDisplayPosition.Right, + altPriceDisplayFormat = AltPriceDisplayFormat.Tooltip, +}: DisplayedPriceWithAltPriceProps) => { + // Below useEffect checks wether the alternative price display size is smaller than the price display size + useEffect(() => { + switch (altPriceDisplaySize) { + case PriceDisplaySize.Micro: + break; + case PriceDisplaySize.Small: + if (priceTextDisplaySize === PriceDisplaySize.Micro) { + throw new Error( + "The size of the alternative price must be equal or smaller than the price display size.", + ); + } + break; + case PriceDisplaySize.Medium: + if ( + priceTextDisplaySize === PriceDisplaySize.Micro || + priceTextDisplaySize === PriceDisplaySize.Small + ) { + throw new Error( + "The size of the alternative price must be equal or smaller than the price display size.", + ); + } + break; + case PriceDisplaySize.Large: + if ( + priceTextDisplaySize === PriceDisplaySize.Micro || + priceTextDisplaySize === PriceDisplaySize.Small || + priceTextDisplaySize === PriceDisplaySize.Medium + ) { + throw new Error( + "The size of the alternative price must be equal or smaller than the price display size.", + ); + } + } + }, []); + + const triggerElm = ( + + ); + + if (!altPrice && altPriceDisplayFormat === AltPriceDisplayFormat.Tooltip) + return triggerElm; + else if (altPrice) { + const altPriceDisplayElm = ( + + ); + + if (altPriceDisplayFormat === AltPriceDisplayFormat.Text) { + return ( +
+ {triggerElm} + {altPriceDisplayElm} +
+ ); + } else if (altPrice) { + const priceDisplaySizeAsCurrencyDisplaySize = + parsePriceDisplaySizeToCurrencyDisplaySize(altPriceDisplaySize); + return ( +
+ {currencySymbology === PriceSymbology.Symbol && ( +
+ +
+ )} + +
+ + <> + {altPrice ? ( +
+
+

+ {formattedPrice({ + price: altPrice, + symbology: currencySymbology, + withPrefix: + currencySymbology === PriceSymbology.Symbol, + withSufix: + currencySymbology === PriceSymbology.Acronym, + })} +

+
+
+ ) : ( + <> + )} + + +
+
+ ); + } else return <>; + } else return <>; +}; diff --git a/packages/namekit-react/src/index.ts b/packages/namekit-react/src/index.ts index 8e716e004..1d40d4038 100644 --- a/packages/namekit-react/src/index.ts +++ b/packages/namekit-react/src/index.ts @@ -15,3 +15,4 @@ export * from "./components/ENSInput"; export * from "./components/Link"; export * from "./components/Tooltip"; export * from "./components/CurrencySymbol/CurrencySymbol"; +export * from "./components/DisplayedPrice"; From 3513deb08dfed567acfd4ef96d9e97be2505a30a Mon Sep 17 00:00:00 2001 From: FrancoAguzzi Date: Wed, 21 Aug 2024 17:46:36 -0300 Subject: [PATCH 02/43] feat: [SC-25297] Update formattedPrice function to render different PriceSymbologies --- packages/ens-utils/src/price.ts | 66 ++++++++++++++++++++------------- 1 file changed, 41 insertions(+), 25 deletions(-) diff --git a/packages/ens-utils/src/price.ts b/packages/ens-utils/src/price.ts index 75ac307d2..266ad51ce 100644 --- a/packages/ens-utils/src/price.ts +++ b/packages/ens-utils/src/price.ts @@ -1,8 +1,11 @@ -import { Currency, PriceCurrencyFormat, parseStringToCurrency } from "./currency"; +import { + Currency, + PriceCurrencyFormat, + parseStringToCurrency, +} from "./currency"; import { approxScaleBigInt, stringToBigInt } from "./number"; export interface Price { - // TODO: consider adding a constraint where value is never negative /** * The value of the price. This is a BigInt to avoid floating point math issues when working with prices. @@ -23,19 +26,21 @@ export interface ExchangeRates extends Partial> {} /** * Builds a Price object. * @param value the value of the price. This is a BigInt to avoid floating point math issues when working with prices. - * For example, a price of 1.23 USD would be represented as 123n with a currency of USD. - * Note that the value is always in the smallest unit of the currency (e.g. cents for USD, wei for ETH). - * See the CurrencyConfig for the related currency for the number of decimals to use when converting the value to a human-readable format. - * @param currency - * @returns + * For example, a price of 1.23 USD would be represented as 123n with a currency of USD. + * Note that the value is always in the smallest unit of the currency (e.g. cents for USD, wei for ETH). + * See the CurrencyConfig for the related currency for the number of decimals to use when converting the value to a human-readable format. + * @param currency + * @returns */ -export const buildPrice = (value: bigint | string, currency: Currency | string): Price => { - - let priceValue : bigint; - let priceCurrency : Currency; +export const buildPrice = ( + value: bigint | string, + currency: Currency | string, +): Price => { + let priceValue: bigint; + let priceCurrency: Currency; if (typeof value === "string") { - priceValue = stringToBigInt(value) + priceValue = stringToBigInt(value); } else { priceValue = value; } @@ -47,7 +52,7 @@ export const buildPrice = (value: bigint | string, currency: Currency | string): } return { value: priceValue, currency: priceCurrency }; -} +}; export const priceAsNumber = (price: Price): number => { return ( @@ -61,12 +66,12 @@ export const numberAsPrice = (number: number, currency: Currency): Price => { // Fix the number's displayed decimals (e.g. from 0.00001 to 0.00001) const numberWithCorrectCurrencyDecimals = Number( - number.toFixed(currencyDecimals) + number.toFixed(currencyDecimals), ); // Remove the decimals from the number (e.g. from 0.00001 to 1) const numberWithoutDecimals = Number( - numberWithCorrectCurrencyDecimals * 10 ** currencyDecimals + numberWithCorrectCurrencyDecimals * 10 ** currencyDecimals, ).toFixed(0); /* @@ -102,7 +107,7 @@ export const addPrices = (prices: Array): Price => { export const subtractPrices = (price1: Price, price2: Price): Price => { if (price1.currency !== price2.currency) { throw new Error( - `Cannot subtract price of currency ${price1.currency} to price of currency ${price2.currency}` + `Cannot subtract price of currency ${price1.currency} to price of currency ${price2.currency}`, ); } else { return { @@ -123,14 +128,21 @@ export const multiplyPriceByNumber = (price1: Price, price2: number): Price => { }; }; +export enum PriceSymbology { + Acronym = "Acronym", + Symbol = "Symbol", +} + export const formattedPrice = ({ price, withPrefix = false, withSufix = false, + symbology = PriceSymbology.Symbol, }: { price: Price; withPrefix?: boolean; withSufix?: boolean; + symbology?: PriceSymbology; }): string => { let formattedAmount = ""; const valueConsideringDecimals = ( @@ -150,7 +162,7 @@ export const formattedPrice = ({ ) { // If formatted number is 0.0 but real 'value' is not 0, then we show the Underflow price formattedAmount = String( - PriceCurrencyFormat[price.currency].MinDisplayValue + PriceCurrencyFormat[price.currency].MinDisplayValue, ); } else if (wouldDisplayAsZero && price.value == 0n) { // But if the real 'value' is really 0, then we show 0.00 (in the correct number of Display Decimals) @@ -158,7 +170,7 @@ export const formattedPrice = ({ formattedAmount = prefix.padEnd( Number(PriceCurrencyFormat[price.currency].DisplayDecimals) + prefix.length, - "0" + "0", ); } @@ -168,10 +180,10 @@ export const formattedPrice = ({ formattedAmount = displayNumber.toLocaleString("en-US", { minimumFractionDigits: Number( - PriceCurrencyFormat[price.currency].DisplayDecimals + PriceCurrencyFormat[price.currency].DisplayDecimals, ), maximumFractionDigits: Number( - PriceCurrencyFormat[price.currency].DisplayDecimals + PriceCurrencyFormat[price.currency].DisplayDecimals, ), }); @@ -180,10 +192,14 @@ export const formattedPrice = ({ } const prefixUnit = withPrefix - ? PriceCurrencyFormat[price.currency].Symbol + ? symbology === PriceSymbology.Acronym + ? PriceCurrencyFormat[price.currency].Acronym + : PriceCurrencyFormat[price.currency].Symbol : ""; const postfixUnit = withSufix - ? PriceCurrencyFormat[price.currency].Acronym + ? symbology === PriceSymbology.Acronym + ? PriceCurrencyFormat[price.currency].Acronym + : PriceCurrencyFormat[price.currency].Symbol : ""; let priceDisplay = @@ -197,7 +213,7 @@ export const formattedPrice = ({ export const approxScalePrice = ( price: Price, scaleFactor: number, - digitsOfPrecision = 20n + digitsOfPrecision = 20n, ): Price => { return { value: approxScaleBigInt(price.value, scaleFactor, digitsOfPrecision), @@ -208,13 +224,13 @@ export const approxScalePrice = ( export const convertCurrencyWithRates = ( fromPrice: Price, toCurrency: Currency, - exchangeRates: ExchangeRates + exchangeRates: ExchangeRates, ): Price => { if (typeof exchangeRates[toCurrency] === "undefined") { throw new Error(`Exchange rate for currency ${toCurrency} not found`); } else if (typeof exchangeRates[fromPrice.currency] === "undefined") { throw new Error( - `Exchange rate for currency ${fromPrice.currency} not found` + `Exchange rate for currency ${fromPrice.currency} not found`, ); } From e8bd561dfec0baa96af9689e210b7ba25833cf50 Mon Sep 17 00:00:00 2001 From: FrancoAguzzi Date: Wed, 21 Aug 2024 17:47:06 -0300 Subject: [PATCH 03/43] feat: [SC-25520] Create stories for DisplayedPriceWithAltText --- .../DisplayedPriceWithAltPrice.stories.tsx | 495 ++++++++++++++++++ 1 file changed, 495 insertions(+) create mode 100644 apps/storybook.namekit.io/stories/Namekit/DisplayedPriceWithAltPrice.stories.tsx diff --git a/apps/storybook.namekit.io/stories/Namekit/DisplayedPriceWithAltPrice.stories.tsx b/apps/storybook.namekit.io/stories/Namekit/DisplayedPriceWithAltPrice.stories.tsx new file mode 100644 index 000000000..9a6d0ffe2 --- /dev/null +++ b/apps/storybook.namekit.io/stories/Namekit/DisplayedPriceWithAltPrice.stories.tsx @@ -0,0 +1,495 @@ +import { Currency, PriceSymbology } from "@namehash/ens-utils"; +import { + AltPriceDisplayFormat, + DisplayedPriceWithAltPrice, + PriceDisplayPosition, + PriceDisplaySize, + CurrencySymbolPosition, +} from "@namehash/namekit-react"; +import type { Meta, StoryObj } from "@storybook/react"; + +const meta: Meta = { + component: DisplayedPriceWithAltPrice, + title: "Namekit/DisplayedPriceWithAltPrice", + argTypes: { + price: { + control: "object", + }, + priceTextDisplaySize: { + options: Object.keys(PriceDisplaySize), + control: { type: "select" }, + }, + altPriceDisplayFormat: { + options: Object.keys(AltPriceDisplayFormat), + control: { type: "select" }, + }, + symbolPosition: { + options: Object.keys(CurrencySymbolPosition), + control: { type: "select" }, + }, + currencySymbology: { + options: Object.keys(PriceSymbology), + control: { type: "select" }, + }, + altPriceDisplaySize: { + options: Object.keys(PriceDisplaySize), + control: { type: "select" }, + }, + altPriceDisplayPosition: { + options: Object.keys(PriceDisplayPosition), + control: { type: "select" }, + }, + }, +}; + +declare global { + interface BigInt { + toJSON(): string; + } +} + +BigInt.prototype.toJSON = function () { + return `${this.toString()}n`; +}; + +export default meta; + +type Story = StoryObj; + +export const EthPrice: Story = { + args: { + price: { + currency: Currency.Eth, + value: 1000000000000000000n, + }, + altPrice: { + currency: Currency.Usd, + value: 198900n, + }, + altPriceDisplayFormat: AltPriceDisplayFormat.Tooltip, + }, +}; +export const EthPriceWithoutCurrencyTooltip: Story = { + args: { + price: { + currency: Currency.Eth, + value: 1000000000000000000n, + }, + altPrice: { + currency: Currency.Usd, + value: 198900n, + }, + altPriceDisplayFormat: AltPriceDisplayFormat.Tooltip, + describeCurrencyInTooltip: false, + }, +}; +export const UsdPrice: Story = { + args: { + price: { + currency: Currency.Usd, + value: 198900n, + }, + altPrice: { + currency: Currency.Eth, + value: 1000000000000000000n, + }, + altPriceDisplayFormat: AltPriceDisplayFormat.Tooltip, + }, +}; +export const AlternativePriceDisplayedAsTextNextToPrice: Story = { + args: { + price: { + currency: Currency.Usd, + value: 198900n, + }, + altPrice: { + currency: Currency.Eth, + value: 1000000000000000000n, + }, + priceTextDisplaySize: PriceDisplaySize.Medium, + altPriceDisplaySize: PriceDisplaySize.Small, + altPriceDisplayPosition: PriceDisplayPosition.Right, + altPriceDisplayFormat: AltPriceDisplayFormat.Text, + }, +}; +export const AlternativePriceDisplayedAsTextInBottom: Story = { + args: { + price: { + currency: Currency.Usd, + value: 198900n, + }, + altPrice: { + currency: Currency.Eth, + value: 1000000000000000000n, + }, + priceTextDisplaySize: PriceDisplaySize.Medium, + altPriceDisplaySize: PriceDisplaySize.Small, + altPriceDisplayPosition: PriceDisplayPosition.Bottom, + altPriceDisplayFormat: AltPriceDisplayFormat.Text, + }, +}; + +export const LargePriceDisplaySize: Story = { + args: { + price: { + currency: Currency.Usd, + value: 198900n, + }, + altPrice: { + currency: Currency.Eth, + value: 1000000000000000000n, + }, + priceTextDisplaySize: PriceDisplaySize.Large, + }, +}; +export const MediumPriceDisplaySize: Story = { + args: { + price: { + currency: Currency.Usd, + value: 198900n, + }, + altPrice: { + currency: Currency.Eth, + value: 1000000000000000000n, + }, + priceTextDisplaySize: PriceDisplaySize.Medium, + }, +}; +export const SmallPriceDisplaySize: Story = { + args: { + price: { + currency: Currency.Usd, + value: 198900n, + }, + altPrice: { + currency: Currency.Eth, + value: 1000000000000000000n, + }, + priceTextDisplaySize: PriceDisplaySize.Small, + }, +}; +export const MicroPriceDisplaySize: Story = { + args: { + price: { + currency: Currency.Usd, + value: 198900n, + }, + altPrice: { + currency: Currency.Eth, + value: 1000000000000000000n, + }, + priceTextDisplaySize: PriceDisplaySize.Micro, + }, +}; +export const DisplaySymbologyAtLeft: Story = { + args: { + price: { + currency: Currency.Usd, + value: 198900n, + }, + altPrice: { + currency: Currency.Eth, + value: 1000000000000000000n, + }, + symbolPosition: CurrencySymbolPosition.Left, + priceTextDisplaySize: PriceDisplaySize.Micro, + }, +}; +export const DisplaySymbologyAtRight: Story = { + args: { + price: { + currency: Currency.Usd, + value: 198900n, + }, + altPrice: { + currency: Currency.Eth, + value: 1000000000000000000n, + }, + symbolPosition: CurrencySymbolPosition.Right, + priceTextDisplaySize: PriceDisplaySize.Micro, + }, +}; +export const DisplaySymbolSymbologyForETH: Story = { + args: { + price: { + currency: Currency.Eth, + value: 1000000000000000000n, + }, + altPrice: { + currency: Currency.Usd, + value: 198900n, + }, + currencySymbology: PriceSymbology.Symbol, + }, +}; +export const DisplayAcronymSymbologyForETH: Story = { + args: { + price: { + currency: Currency.Eth, + value: 1000000000000000000n, + }, + altPrice: { + currency: Currency.Usd, + value: 198900n, + }, + currencySymbology: PriceSymbology.Acronym, + }, +}; +export const DisplaySymbolSymbologyForUSD: Story = { + args: { + price: { + currency: Currency.Usd, + value: 198900n, + }, + altPrice: { + currency: Currency.Eth, + value: 1000000000000000000n, + }, + currencySymbology: PriceSymbology.Symbol, + }, +}; +export const DisplayAcronymSymbologyForUSD: Story = { + args: { + price: { + currency: Currency.Usd, + value: 198900n, + }, + altPrice: { + currency: Currency.Eth, + value: 1000000000000000000n, + }, + currencySymbology: PriceSymbology.Acronym, + }, +}; +export const LargeLargeDisplaySizes: Story = { + name: "[Prices sizes combinations] Large & Large", + args: { + price: { + currency: Currency.Usd, + value: 198900n, + }, + altPrice: { + currency: Currency.Eth, + value: 1000000000000000000n, + }, + altPriceDisplayFormat: AltPriceDisplayFormat.Text, + priceTextDisplaySize: PriceDisplaySize.Large, + altPriceDisplaySize: PriceDisplaySize.Large, + }, +}; +export const LargeMediumDisplaySizes: Story = { + name: "[Prices sizes combinations] Large & Medium", + args: { + price: { + currency: Currency.Usd, + value: 198900n, + }, + altPrice: { + currency: Currency.Eth, + value: 1000000000000000000n, + }, + altPriceDisplayFormat: AltPriceDisplayFormat.Text, + priceTextDisplaySize: PriceDisplaySize.Large, + altPriceDisplaySize: PriceDisplaySize.Medium, + }, +}; +export const LargeSmallDisplaySizes: Story = { + name: "[Prices sizes combinations] Large & Small", + args: { + price: { + currency: Currency.Usd, + value: 198900n, + }, + altPrice: { + currency: Currency.Eth, + value: 1000000000000000000n, + }, + altPriceDisplayFormat: AltPriceDisplayFormat.Text, + priceTextDisplaySize: PriceDisplaySize.Large, + altPriceDisplaySize: PriceDisplaySize.Small, + }, +}; +export const LargeMicroDisplaySizes: Story = { + name: "[Prices sizes combinations] Large & Micro", + args: { + price: { + currency: Currency.Usd, + value: 198900n, + }, + altPrice: { + currency: Currency.Eth, + value: 1000000000000000000n, + }, + altPriceDisplayFormat: AltPriceDisplayFormat.Text, + priceTextDisplaySize: PriceDisplaySize.Large, + altPriceDisplaySize: PriceDisplaySize.Micro, + }, +}; +export const MediumMediumDisplaySizes: Story = { + name: "[Prices sizes combinations] Medium & Medium", + args: { + price: { + currency: Currency.Usd, + value: 198900n, + }, + altPrice: { + currency: Currency.Eth, + value: 1000000000000000000n, + }, + altPriceDisplayFormat: AltPriceDisplayFormat.Text, + priceTextDisplaySize: PriceDisplaySize.Medium, + altPriceDisplaySize: PriceDisplaySize.Medium, + }, +}; +export const MediumSmallDisplaySizes: Story = { + name: "[Prices sizes combinations] Medium & Small", + args: { + price: { + currency: Currency.Usd, + value: 198900n, + }, + altPrice: { + currency: Currency.Eth, + value: 1000000000000000000n, + }, + altPriceDisplayFormat: AltPriceDisplayFormat.Text, + priceTextDisplaySize: PriceDisplaySize.Medium, + altPriceDisplaySize: PriceDisplaySize.Small, + }, +}; +export const MediumMicroDisplaySizes: Story = { + name: "[Prices sizes combinations] Medium & Micro", + args: { + price: { + currency: Currency.Usd, + value: 198900n, + }, + altPrice: { + currency: Currency.Eth, + value: 1000000000000000000n, + }, + altPriceDisplayFormat: AltPriceDisplayFormat.Text, + priceTextDisplaySize: PriceDisplaySize.Medium, + altPriceDisplaySize: PriceDisplaySize.Micro, + }, +}; +export const SmallSmallDisplaySizes: Story = { + name: "[Prices sizes combinations] Small & Small", + args: { + price: { + currency: Currency.Usd, + value: 198900n, + }, + altPrice: { + currency: Currency.Eth, + value: 1000000000000000000n, + }, + altPriceDisplayFormat: AltPriceDisplayFormat.Text, + priceTextDisplaySize: PriceDisplaySize.Small, + altPriceDisplaySize: PriceDisplaySize.Small, + }, +}; +export const SmallMicroDisplaySizes: Story = { + name: "[Prices sizes combinations] Small & Micro", + args: { + price: { + currency: Currency.Usd, + value: 198900n, + }, + altPrice: { + currency: Currency.Eth, + value: 1000000000000000000n, + }, + altPriceDisplayFormat: AltPriceDisplayFormat.Text, + priceTextDisplaySize: PriceDisplaySize.Small, + altPriceDisplaySize: PriceDisplaySize.Micro, + }, +}; +export const MicroMicroDisplaySizes: Story = { + name: "[Prices sizes combinations] Micro & Micro", + args: { + price: { + currency: Currency.Usd, + value: 198900n, + }, + altPrice: { + currency: Currency.Eth, + value: 1000000000000000000n, + }, + altPriceDisplayFormat: AltPriceDisplayFormat.Text, + priceTextDisplaySize: PriceDisplaySize.Micro, + altPriceDisplaySize: PriceDisplaySize.Micro, + }, +}; +export const WithOnClickHandler: Story = { + args: { + price: { + currency: Currency.Usd, + value: 198900n, + }, + altPrice: { + currency: Currency.Eth, + value: 1000000000000000000n, + }, + onTextClick: () => alert("Price clicked"), + }, +}; +export const WithAltPriceOnClickHandler: Story = { + args: { + price: { + currency: Currency.Usd, + value: 198900n, + }, + altPrice: { + currency: Currency.Eth, + value: 1000000000000000000n, + }, + onAltPriceTextClick: () => alert("Alt price clicked"), + }, +}; +export const WithMultipleOnClickHandlers: Story = { + args: { + price: { + currency: Currency.Usd, + value: 198900n, + }, + altPrice: { + currency: Currency.Eth, + value: 1000000000000000000n, + }, + onTextClick: () => alert("Price clicked"), + onAltPriceTextClick: () => alert("Alt price clicked"), + }, +}; +export const EthMinDisplayPrice: Story = { + args: { + price: { + currency: Currency.Eth, + value: 100000000000000n, + }, + }, +}; +export const EthMaxDisplayPrice: Story = { + args: { + price: { + currency: Currency.Eth, + value: 10000000000000000000000000n, + }, + }, +}; +export const UsdMinDisplayPrice: Story = { + args: { + price: { + currency: Currency.Usd, + value: 1n, + }, + }, +}; +export const UsdMaxDisplayPrice: Story = { + args: { + price: { + currency: Currency.Usd, + value: 1000000000000000000n, + }, + }, +}; From 4352362f17cc7d7383a04c9d0e4a1ec57517eb29 Mon Sep 17 00:00:00 2001 From: FrancoAguzzi Date: Wed, 21 Aug 2024 18:10:40 -0300 Subject: [PATCH 04/43] feat: [SC-25297] Optimize alt price and main price alignments | Create dedicated file for DisplayedPriceWithAltPrice --- .../src/components/DisplayedPrice.tsx | 206 +----------------- .../components/DisplayedPriceWithAltPrice.tsx | 206 ++++++++++++++++++ 2 files changed, 214 insertions(+), 198 deletions(-) create mode 100644 packages/namekit-react/src/components/DisplayedPriceWithAltPrice.tsx diff --git a/packages/namekit-react/src/components/DisplayedPrice.tsx b/packages/namekit-react/src/components/DisplayedPrice.tsx index 9535f33f9..1296f3695 100644 --- a/packages/namekit-react/src/components/DisplayedPrice.tsx +++ b/packages/namekit-react/src/components/DisplayedPrice.tsx @@ -5,21 +5,18 @@ import { PriceCurrencyFormat, PriceSymbology, } from "@namehash/ens-utils"; - -import React, { useEffect } from "react"; +import React from "react"; import { CurrencySymbol, CurrencySymbolSize, } from "./CurrencySymbol/CurrencySymbol"; - import cc from "classcat"; -import { Tooltip } from "./Tooltip"; export enum PriceDisplaySize { - Micro = "nk-text-xs md:nk-text-sm nk-font-normal", - Small = "nk-text-sm nk-font-semibold", - Medium = "nk-text-xl nk-font-semibold", - Large = "nk-text-2xl nk-font-bold", + Micro = "nk-text-[12px] md:nk-text-[14px] nk-font-normal", + Small = "nk-text-[14px] nk-font-semibold", + Medium = "nk-text-[20px] nk-font-semibold", + Large = "nk-text-[24px] nk-font-bold", } export enum AltPriceDisplayFormat { @@ -37,7 +34,7 @@ export enum PriceDisplayPosition { Bottom = "nk-flex nk-flex-col nk-text-right nk-items-end nk-space-y-1", } -const parsePriceDisplaySizeToCurrencyDisplaySize = ( +export const parsePriceDisplaySizeToCurrencySymbolSize = ( priceDisplaySize: PriceDisplaySize, ): CurrencySymbolSize => { switch (priceDisplaySize) { @@ -77,14 +74,14 @@ export const DisplayedPrice = ({ withSymbol = true, }: DisplayedPriceProps) => { const priceDisplaySizeAsCurrencyDisplaySize = - parsePriceDisplaySizeToCurrencyDisplaySize(displaySize); + parsePriceDisplaySizeToCurrencySymbolSize(displaySize); return (
); }; - -interface DisplayedPriceWithAltPriceProps { - // The price to be displayed - price: Price; - // The alternative price to be displayed (the price converted to another currency) - altPrice?: Price; - // The onClick event handler for the price text - onTextClick?: () => void; - // The onClick event handler for the alt. price text - onAltPriceTextClick?: () => void; - // Wether to display the alternative price as a text instead of a tooltip - altPriceDisplayFormat: AltPriceDisplayFormat; - // Wether to display a currency symbology as its acronym or symbol - currencySymbology?: PriceSymbology; - // The place to display the currency symbology - symbolPosition?: CurrencySymbolPosition; - // The size of the price display - priceTextDisplaySize?: PriceDisplaySize; - // The size of the alternative price to display, which must be smaller than the price display size - altPriceDisplaySize?: PriceDisplaySize; - // The place to display the alternative price when displayed as text - altPriceDisplayPosition?: PriceDisplayPosition; - // Wether or not to display the name of the currency in a tooltip when its symbol is hovered - describeCurrencyInTooltip?: boolean; -} - -export const DisplayedPriceWithAltPrice = ({ - price, - altPrice, - onTextClick, - onAltPriceTextClick, - describeCurrencyInTooltip = true, - currencySymbology = PriceSymbology.Symbol, - altPriceDisplaySize = PriceDisplaySize.Micro, - symbolPosition = CurrencySymbolPosition.Left, - priceTextDisplaySize = PriceDisplaySize.Small, - altPriceDisplayPosition = PriceDisplayPosition.Right, - altPriceDisplayFormat = AltPriceDisplayFormat.Tooltip, -}: DisplayedPriceWithAltPriceProps) => { - // Below useEffect checks wether the alternative price display size is smaller than the price display size - useEffect(() => { - switch (altPriceDisplaySize) { - case PriceDisplaySize.Micro: - break; - case PriceDisplaySize.Small: - if (priceTextDisplaySize === PriceDisplaySize.Micro) { - throw new Error( - "The size of the alternative price must be equal or smaller than the price display size.", - ); - } - break; - case PriceDisplaySize.Medium: - if ( - priceTextDisplaySize === PriceDisplaySize.Micro || - priceTextDisplaySize === PriceDisplaySize.Small - ) { - throw new Error( - "The size of the alternative price must be equal or smaller than the price display size.", - ); - } - break; - case PriceDisplaySize.Large: - if ( - priceTextDisplaySize === PriceDisplaySize.Micro || - priceTextDisplaySize === PriceDisplaySize.Small || - priceTextDisplaySize === PriceDisplaySize.Medium - ) { - throw new Error( - "The size of the alternative price must be equal or smaller than the price display size.", - ); - } - } - }, []); - - const triggerElm = ( - - ); - - if (!altPrice && altPriceDisplayFormat === AltPriceDisplayFormat.Tooltip) - return triggerElm; - else if (altPrice) { - const altPriceDisplayElm = ( - - ); - - if (altPriceDisplayFormat === AltPriceDisplayFormat.Text) { - return ( -
- {triggerElm} - {altPriceDisplayElm} -
- ); - } else if (altPrice) { - const priceDisplaySizeAsCurrencyDisplaySize = - parsePriceDisplaySizeToCurrencyDisplaySize(altPriceDisplaySize); - return ( -
- {currencySymbology === PriceSymbology.Symbol && ( -
- -
- )} - -
- - <> - {altPrice ? ( -
-
-

- {formattedPrice({ - price: altPrice, - symbology: currencySymbology, - withPrefix: - currencySymbology === PriceSymbology.Symbol, - withSufix: - currencySymbology === PriceSymbology.Acronym, - })} -

-
-
- ) : ( - <> - )} - - -
-
- ); - } else return <>; - } else return <>; -}; diff --git a/packages/namekit-react/src/components/DisplayedPriceWithAltPrice.tsx b/packages/namekit-react/src/components/DisplayedPriceWithAltPrice.tsx new file mode 100644 index 000000000..d15667655 --- /dev/null +++ b/packages/namekit-react/src/components/DisplayedPriceWithAltPrice.tsx @@ -0,0 +1,206 @@ +import { + Currency, + formattedPrice, + Price, + PriceSymbology, +} from "@namehash/ens-utils"; +import { + AltPriceDisplayFormat, + CurrencySymbolPosition, + DisplayedPrice, + parsePriceDisplaySizeToCurrencySymbolSize, + PriceDisplayPosition, + PriceDisplaySize, +} from "./DisplayedPrice"; +import { useEffect } from "react"; +import { CurrencySymbol } from "./CurrencySymbol/CurrencySymbol"; +import { Tooltip } from "./Tooltip"; +import React from "react"; +import cc from "classcat"; + +interface DisplayedPriceWithAltPriceProps { + // The price to be displayed + price: Price; + // The alternative price to be displayed (the price converted to another currency) + altPrice?: Price; + // The onClick event handler for the price text + onTextClick?: () => void; + // The onClick event handler for the alt. price text + onAltPriceTextClick?: () => void; + // Wether to display the alternative price as a text instead of a tooltip + altPriceDisplayFormat: AltPriceDisplayFormat; + // Wether to display a currency symbology as its acronym or symbol + currencySymbology?: PriceSymbology; + // The place to display the currency symbology + symbolPosition?: CurrencySymbolPosition; + // The size of the price display + priceTextDisplaySize?: PriceDisplaySize; + // The size of the alternative price to display, which must be smaller than the price display size + altPriceDisplaySize?: PriceDisplaySize; + // The place to display the alternative price when displayed as text + altPriceDisplayPosition?: PriceDisplayPosition; + // Wether or not to display the name of the currency in a tooltip when its symbol is hovered + describeCurrencyInTooltip?: boolean; +} + +export const DisplayedPriceWithAltPrice = ({ + price, + altPrice, + onTextClick, + onAltPriceTextClick, + describeCurrencyInTooltip = true, + currencySymbology = PriceSymbology.Symbol, + altPriceDisplaySize = PriceDisplaySize.Micro, + symbolPosition = CurrencySymbolPosition.Left, + priceTextDisplaySize = PriceDisplaySize.Small, + altPriceDisplayPosition = PriceDisplayPosition.Right, + altPriceDisplayFormat = AltPriceDisplayFormat.Tooltip, +}: DisplayedPriceWithAltPriceProps) => { + // Below useEffect checks wether the alternative price display size is smaller than the price display size + useEffect(() => { + switch (altPriceDisplaySize) { + case PriceDisplaySize.Micro: + break; + case PriceDisplaySize.Small: + if (priceTextDisplaySize === PriceDisplaySize.Micro) { + throw new Error( + "The size of the alternative price must be equal or smaller than the price display size.", + ); + } + break; + case PriceDisplaySize.Medium: + if ( + priceTextDisplaySize === PriceDisplaySize.Micro || + priceTextDisplaySize === PriceDisplaySize.Small + ) { + throw new Error( + "The size of the alternative price must be equal or smaller than the price display size.", + ); + } + break; + case PriceDisplaySize.Large: + if ( + priceTextDisplaySize === PriceDisplaySize.Micro || + priceTextDisplaySize === PriceDisplaySize.Small || + priceTextDisplaySize === PriceDisplaySize.Medium + ) { + throw new Error( + "The size of the alternative price must be equal or smaller than the price display size.", + ); + } + } + }, []); + + const triggerElm = ( + + ); + + if (!altPrice && altPriceDisplayFormat === AltPriceDisplayFormat.Tooltip) + return triggerElm; + else if (altPrice) { + const altPriceDisplayElm = ( + + ); + + if (altPriceDisplayFormat === AltPriceDisplayFormat.Text) { + return ( +
+ {triggerElm} + {altPriceDisplayElm} +
+ ); + } else if (altPrice) { + const priceDisplaySizeAsCurrencyDisplaySize = + parsePriceDisplaySizeToCurrencySymbolSize(altPriceDisplaySize); + return ( +
+ {currencySymbology === PriceSymbology.Symbol && ( +
+ +
+ )} + +
+ + <> + {altPrice ? ( +
+
+

+ {formattedPrice({ + price: altPrice, + symbology: currencySymbology, + withPrefix: + currencySymbology === PriceSymbology.Symbol, + withSufix: + currencySymbology === PriceSymbology.Acronym, + })} +

+
+
+ ) : ( + <> + )} + + +
+
+ ); + } else return <>; + } else return <>; +}; From 8cc1b5a8d5a1847c9aa948b7e18d922081d39f9b Mon Sep 17 00:00:00 2001 From: FrancoAguzzi Date: Wed, 21 Aug 2024 18:12:48 -0300 Subject: [PATCH 05/43] feat: [SC-25520] Create changesets for Price components creation PR --- .changeset/quick-ads-pretend.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/quick-ads-pretend.md diff --git a/.changeset/quick-ads-pretend.md b/.changeset/quick-ads-pretend.md new file mode 100644 index 000000000..183f5d0fe --- /dev/null +++ b/.changeset/quick-ads-pretend.md @@ -0,0 +1,6 @@ +--- +"@namehash/namekit-react": minor +"@namehash/ens-utils": minor +--- + +Create DisplayedPrice and DisplayedPriceWithAltPrice components and PriceSymbology enum From 98019e27a908aaa4026ab3d498d9d47593b7f850 Mon Sep 17 00:00:00 2001 From: FrancoAguzzi Date: Wed, 21 Aug 2024 18:18:06 -0300 Subject: [PATCH 06/43] feat: [SC-25520] Add DisplayedPriceWithAltPrice export to namekit-react lib. --- packages/namekit-react/src/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/namekit-react/src/index.ts b/packages/namekit-react/src/index.ts index 1d40d4038..3d41753cf 100644 --- a/packages/namekit-react/src/index.ts +++ b/packages/namekit-react/src/index.ts @@ -16,3 +16,4 @@ export * from "./components/Link"; export * from "./components/Tooltip"; export * from "./components/CurrencySymbol/CurrencySymbol"; export * from "./components/DisplayedPrice"; +export * from "./components/DisplayedPriceWithAltPrice"; From b967b85940cd40e4c206f05b595a8b8539ff7c01 Mon Sep 17 00:00:00 2001 From: FrancoAguzzi Date: Wed, 21 Aug 2024 19:09:05 -0300 Subject: [PATCH 07/43] feat: [SC-25297] Created examples of DisplayedPrice for each Currency | Rewrote enums definitions to optimized model | Optimized Currency-Price spacings --- .../Namekit/DisplayedPrice.stories.tsx | 125 ++++++++++++++++- .../DisplayedPriceWithAltPrice.stories.tsx | 131 ++++++++++++++++-- packages/ens-utils/src/price.ts | 16 ++- .../CurrencySymbol/CurrencySymbol.tsx | 18 +-- .../CurrencySymbol/{ => icons}/DaiSymbol.tsx | 0 .../CurrencySymbol/{ => icons}/EthSymbol.tsx | 0 .../CurrencySymbol/{ => icons}/UsdcSymbol.tsx | 0 .../CurrencySymbol/{ => icons}/WethSymbol.tsx | 0 .../src/components/DisplayedPrice.tsx | 72 ++++++---- .../components/DisplayedPriceWithAltPrice.tsx | 57 +++++--- 10 files changed, 350 insertions(+), 69 deletions(-) rename packages/namekit-react/src/components/CurrencySymbol/{ => icons}/DaiSymbol.tsx (100%) rename packages/namekit-react/src/components/CurrencySymbol/{ => icons}/EthSymbol.tsx (100%) rename packages/namekit-react/src/components/CurrencySymbol/{ => icons}/UsdcSymbol.tsx (100%) rename packages/namekit-react/src/components/CurrencySymbol/{ => icons}/WethSymbol.tsx (100%) diff --git a/apps/storybook.namekit.io/stories/Namekit/DisplayedPrice.stories.tsx b/apps/storybook.namekit.io/stories/Namekit/DisplayedPrice.stories.tsx index 77b72f7a4..6957cc802 100644 --- a/apps/storybook.namekit.io/stories/Namekit/DisplayedPrice.stories.tsx +++ b/apps/storybook.namekit.io/stories/Namekit/DisplayedPrice.stories.tsx @@ -42,7 +42,7 @@ export default meta; type Story = StoryObj; -export const EthPrice: Story = { +export const EthPriceWithSymbol: Story = { args: { price: { currency: Currency.Eth, @@ -50,13 +50,32 @@ export const EthPrice: Story = { }, }, }; -export const EthPriceWithoutCurrencyTooltip: Story = { +export const EthPriceWithAcronym: Story = { + args: { + price: { + currency: Currency.Eth, + value: 1000000000000000000n, + }, + currencySymbology: PriceSymbology.Acronym, + }, +}; +export const EthPriceWithSymbolWithoutCurrencyTooltip: Story = { + args: { + price: { + currency: Currency.Eth, + value: 1000000000000000000n, + }, + describeCurrencyInTooltip: false, + }, +}; +export const EthPriceWithAcronymWithoutCurrencyTooltip: Story = { args: { price: { currency: Currency.Eth, value: 1000000000000000000n, }, describeCurrencyInTooltip: false, + currencySymbology: PriceSymbology.Acronym, }, }; export const UsdPrice: Story = { @@ -159,6 +178,60 @@ export const DisplayAcronymSymbologyForUSD: Story = { currencySymbology: PriceSymbology.Acronym, }, }; +export const DisplaySymbolSymbologyForUSDC: Story = { + args: { + price: { + currency: Currency.Usdc, + value: 198900n, + }, + currencySymbology: PriceSymbology.Symbol, + }, +}; +export const DisplayAcronymSymbologyForUSDC: Story = { + args: { + price: { + currency: Currency.Usdc, + value: 198900n, + }, + currencySymbology: PriceSymbology.Acronym, + }, +}; +export const DisplaySymbolSymbologyForDAI: Story = { + args: { + price: { + currency: Currency.Dai, + value: 198900n, + }, + currencySymbology: PriceSymbology.Symbol, + }, +}; +export const DisplayAcronymSymbologyForDAI: Story = { + args: { + price: { + currency: Currency.Dai, + value: 198900n, + }, + currencySymbology: PriceSymbology.Acronym, + }, +}; +export const DisplaySymbolSymbologyForWETH: Story = { + args: { + price: { + currency: Currency.Weth, + value: 198900n, + }, + currencySymbology: PriceSymbology.Symbol, + }, +}; +export const DisplayAcronymSymbologyForWETH: Story = { + args: { + price: { + currency: Currency.Weth, + value: 198900n, + }, + currencySymbology: PriceSymbology.Acronym, + }, +}; export const WithOnClickHandler: Story = { args: { price: { @@ -200,3 +273,51 @@ export const UsdMaxDisplayPrice: Story = { }, }, }; +export const UsdcMinDisplayPrice: Story = { + args: { + price: { + currency: Currency.Usdc, + value: 1n, + }, + }, +}; +export const UsdcMaxDisplayPrice: Story = { + args: { + price: { + currency: Currency.Usdc, + value: 1000000000000000000n, + }, + }, +}; +export const DaiMinDisplayPrice: Story = { + args: { + price: { + currency: Currency.Dai, + value: 1n, + }, + }, +}; +export const DaiMaxDisplayPrice: Story = { + args: { + price: { + currency: Currency.Dai, + value: 10000000000000000000000000n, + }, + }, +}; +export const WethMinDisplayPrice: Story = { + args: { + price: { + currency: Currency.Weth, + value: 1n, + }, + }, +}; +export const WethMaxDisplayPrice: Story = { + args: { + price: { + currency: Currency.Weth, + value: 1000000000000000000000000n, + }, + }, +}; diff --git a/apps/storybook.namekit.io/stories/Namekit/DisplayedPriceWithAltPrice.stories.tsx b/apps/storybook.namekit.io/stories/Namekit/DisplayedPriceWithAltPrice.stories.tsx index 9a6d0ffe2..0ee41633f 100644 --- a/apps/storybook.namekit.io/stories/Namekit/DisplayedPriceWithAltPrice.stories.tsx +++ b/apps/storybook.namekit.io/stories/Namekit/DisplayedPriceWithAltPrice.stories.tsx @@ -56,31 +56,40 @@ export default meta; type Story = StoryObj; -export const EthPrice: Story = { +export const EthPriceWithSymbol: Story = { args: { price: { currency: Currency.Eth, value: 1000000000000000000n, }, - altPrice: { - currency: Currency.Usd, - value: 198900n, + }, +}; +export const EthPriceWithAcronym: Story = { + args: { + price: { + currency: Currency.Eth, + value: 1000000000000000000n, }, - altPriceDisplayFormat: AltPriceDisplayFormat.Tooltip, + currencySymbology: PriceSymbology.Acronym, }, }; -export const EthPriceWithoutCurrencyTooltip: Story = { +export const EthPriceWithSymbolWithoutCurrencyTooltip: Story = { args: { price: { currency: Currency.Eth, value: 1000000000000000000n, }, - altPrice: { - currency: Currency.Usd, - value: 198900n, + describeCurrencyInTooltip: false, + }, +}; +export const EthPriceWithAcronymWithoutCurrencyTooltip: Story = { + args: { + price: { + currency: Currency.Eth, + value: 1000000000000000000n, }, - altPriceDisplayFormat: AltPriceDisplayFormat.Tooltip, describeCurrencyInTooltip: false, + currencySymbology: PriceSymbology.Acronym, }, }; export const UsdPrice: Story = { @@ -261,6 +270,60 @@ export const DisplayAcronymSymbologyForUSD: Story = { currencySymbology: PriceSymbology.Acronym, }, }; +export const DisplaySymbolSymbologyForUSDC: Story = { + args: { + price: { + currency: Currency.Usdc, + value: 198900n, + }, + currencySymbology: PriceSymbology.Symbol, + }, +}; +export const DisplayAcronymSymbologyForUSDC: Story = { + args: { + price: { + currency: Currency.Usdc, + value: 198900n, + }, + currencySymbology: PriceSymbology.Acronym, + }, +}; +export const DisplaySymbolSymbologyForDAI: Story = { + args: { + price: { + currency: Currency.Dai, + value: 198900n, + }, + currencySymbology: PriceSymbology.Symbol, + }, +}; +export const DisplayAcronymSymbologyForDAI: Story = { + args: { + price: { + currency: Currency.Dai, + value: 198900n, + }, + currencySymbology: PriceSymbology.Acronym, + }, +}; +export const DisplaySymbolSymbologyForWETH: Story = { + args: { + price: { + currency: Currency.Weth, + value: 198900n, + }, + currencySymbology: PriceSymbology.Symbol, + }, +}; +export const DisplayAcronymSymbologyForWETH: Story = { + args: { + price: { + currency: Currency.Weth, + value: 198900n, + }, + currencySymbology: PriceSymbology.Acronym, + }, +}; export const LargeLargeDisplaySizes: Story = { name: "[Prices sizes combinations] Large & Large", args: { @@ -493,3 +556,51 @@ export const UsdMaxDisplayPrice: Story = { }, }, }; +export const UsdcMinDisplayPrice: Story = { + args: { + price: { + currency: Currency.Usdc, + value: 1n, + }, + }, +}; +export const UsdcMaxDisplayPrice: Story = { + args: { + price: { + currency: Currency.Usdc, + value: 1000000000000000000n, + }, + }, +}; +export const DaiMinDisplayPrice: Story = { + args: { + price: { + currency: Currency.Dai, + value: 1n, + }, + }, +}; +export const DaiMaxDisplayPrice: Story = { + args: { + price: { + currency: Currency.Dai, + value: 10000000000000000000000000n, + }, + }, +}; +export const WethMinDisplayPrice: Story = { + args: { + price: { + currency: Currency.Weth, + value: 1n, + }, + }, +}; +export const WethMaxDisplayPrice: Story = { + args: { + price: { + currency: Currency.Weth, + value: 1000000000000000000000000n, + }, + }, +}; diff --git a/packages/ens-utils/src/price.ts b/packages/ens-utils/src/price.ts index 266ad51ce..14de44f0a 100644 --- a/packages/ens-utils/src/price.ts +++ b/packages/ens-utils/src/price.ts @@ -128,10 +128,18 @@ export const multiplyPriceByNumber = (price1: Price, price2: number): Price => { }; }; -export enum PriceSymbology { - Acronym = "Acronym", - Symbol = "Symbol", -} +export const PriceSymbology = { + /** + * The price will be displayed with the currency's acronym (e.g. USD). + */ + Acronym: "Acronym", + /** + * The price will be displayed with the currency's symbol (e.g. $). + */ + Symbol: "Symbol", +} as const; +export type PriceSymbology = + (typeof PriceSymbology)[keyof typeof PriceSymbology]; export const formattedPrice = ({ price, diff --git a/packages/namekit-react/src/components/CurrencySymbol/CurrencySymbol.tsx b/packages/namekit-react/src/components/CurrencySymbol/CurrencySymbol.tsx index 734106c03..11ba5c7d1 100644 --- a/packages/namekit-react/src/components/CurrencySymbol/CurrencySymbol.tsx +++ b/packages/namekit-react/src/components/CurrencySymbol/CurrencySymbol.tsx @@ -1,17 +1,19 @@ import { PriceCurrencyFormat, Currency } from "@namehash/ens-utils"; import { Tooltip } from "../Tooltip"; -import { UsdcSymbol } from "./UsdcSymbol"; -import { WethSymbol } from "./WethSymbol"; -import { EthSymbol } from "./EthSymbol"; -import { DaiSymbol } from "./DaiSymbol"; +import { UsdcSymbol } from "./icons/UsdcSymbol"; +import { WethSymbol } from "./icons/WethSymbol"; +import { EthSymbol } from "./icons/EthSymbol"; +import { DaiSymbol } from "./icons/DaiSymbol"; import React from "react"; import cc from "classcat"; -export enum CurrencySymbolSize { - Small = "nk-w-4", - Large = "nk-w-5", -} +export const CurrencySymbolSize = { + Small: "nk-w-4", + Large: "nk-w-5", +} as const; +export type CurrencySymbolSize = + (typeof CurrencySymbolSize)[keyof typeof CurrencySymbolSize]; interface CurrencySymbolProps { /** diff --git a/packages/namekit-react/src/components/CurrencySymbol/DaiSymbol.tsx b/packages/namekit-react/src/components/CurrencySymbol/icons/DaiSymbol.tsx similarity index 100% rename from packages/namekit-react/src/components/CurrencySymbol/DaiSymbol.tsx rename to packages/namekit-react/src/components/CurrencySymbol/icons/DaiSymbol.tsx diff --git a/packages/namekit-react/src/components/CurrencySymbol/EthSymbol.tsx b/packages/namekit-react/src/components/CurrencySymbol/icons/EthSymbol.tsx similarity index 100% rename from packages/namekit-react/src/components/CurrencySymbol/EthSymbol.tsx rename to packages/namekit-react/src/components/CurrencySymbol/icons/EthSymbol.tsx diff --git a/packages/namekit-react/src/components/CurrencySymbol/UsdcSymbol.tsx b/packages/namekit-react/src/components/CurrencySymbol/icons/UsdcSymbol.tsx similarity index 100% rename from packages/namekit-react/src/components/CurrencySymbol/UsdcSymbol.tsx rename to packages/namekit-react/src/components/CurrencySymbol/icons/UsdcSymbol.tsx diff --git a/packages/namekit-react/src/components/CurrencySymbol/WethSymbol.tsx b/packages/namekit-react/src/components/CurrencySymbol/icons/WethSymbol.tsx similarity index 100% rename from packages/namekit-react/src/components/CurrencySymbol/WethSymbol.tsx rename to packages/namekit-react/src/components/CurrencySymbol/icons/WethSymbol.tsx diff --git a/packages/namekit-react/src/components/DisplayedPrice.tsx b/packages/namekit-react/src/components/DisplayedPrice.tsx index 1296f3695..8a9503ad4 100644 --- a/packages/namekit-react/src/components/DisplayedPrice.tsx +++ b/packages/namekit-react/src/components/DisplayedPrice.tsx @@ -11,29 +11,35 @@ import { CurrencySymbolSize, } from "./CurrencySymbol/CurrencySymbol"; import cc from "classcat"; +import { Tooltip } from "./Tooltip"; -export enum PriceDisplaySize { - Micro = "nk-text-[12px] md:nk-text-[14px] nk-font-normal", - Small = "nk-text-[14px] nk-font-semibold", - Medium = "nk-text-[20px] nk-font-semibold", - Large = "nk-text-[24px] nk-font-bold", -} - -export enum AltPriceDisplayFormat { - Tooltip, - Text, -} +export const CurrencySymbolPosition = { + /** + * Display the currency symbol to the left of the price. (e.g. $1.00) + */ + Left: "nk-mr-1.5", + /** + * Display the currency symbol to the right of the price. (e.g. 1.00$) + */ + Right: "nk-ml-1.5", +} as const; +export type CurrencySymbolPosition = + (typeof CurrencySymbolPosition)[keyof typeof CurrencySymbolPosition]; -export enum CurrencySymbolPosition { - Left = "nk-mr-1.5", - Right = "nk-ml-1.5", -} - -export enum PriceDisplayPosition { - Right = "nk-flex nk-inline-flex nk-items-end nk-space-x-2", - Bottom = "nk-flex nk-flex-col nk-text-right nk-items-end nk-space-y-1", -} +export const PriceDisplaySize = { + Micro: "nk-text-[12px] md:nk-text-[14px] nk-font-normal", + Small: "nk-text-[14px] nk-font-semibold", + Medium: "nk-text-[20px] nk-font-semibold", + Large: "nk-text-[24px] nk-font-bold", +} as const; +export type PriceDisplaySize = + (typeof PriceDisplaySize)[keyof typeof PriceDisplaySize]; +/** + * A map of the `PriceDisplaySize` to the `CurrencySymbolSize`. + * @param priceDisplaySize: PriceDisplaySize + * @returns CurrencySymbolSize + */ export const parsePriceDisplaySizeToCurrencySymbolSize = ( priceDisplaySize: PriceDisplaySize, ): CurrencySymbolSize => { @@ -95,11 +101,10 @@ export const DisplayedPrice = ({ className={cc([ "nk-leading-none", { - "nk-mb-[1px]": price.currency !== Currency.Usd, "nk-mr-1": price.currency === Currency.Usd, - "nk-order-1 nk-mr-0.5": + "nk-order-1 nk-mr-1": symbolPosition === CurrencySymbolPosition.Left, - "nk-mr-1.5 nk-order-3": + "nk-mr-1 nk-order-3": symbolPosition === CurrencySymbolPosition.Right, "nk-hidden": !withSymbol || currencySymbology === PriceSymbology.Acronym, @@ -115,9 +120,24 @@ export const DisplayedPrice = ({
{currencySymbology === PriceSymbology.Acronym && ( -

- {PriceCurrencyFormat[price.currency].Acronym} -

+ <> + {describeCurrencyInTooltip ? ( +
+ {PriceCurrencyFormat[price.currency].Acronym}

} + > + { + PriceCurrencyFormat[price.currency] + .ExtendedCurrencyNameSingular + } + +
+ ) : ( +

+ {PriceCurrencyFormat[price.currency].Acronym} +

+ )} + )} ); diff --git a/packages/namekit-react/src/components/DisplayedPriceWithAltPrice.tsx b/packages/namekit-react/src/components/DisplayedPriceWithAltPrice.tsx index d15667655..62f9a664f 100644 --- a/packages/namekit-react/src/components/DisplayedPriceWithAltPrice.tsx +++ b/packages/namekit-react/src/components/DisplayedPriceWithAltPrice.tsx @@ -5,12 +5,10 @@ import { PriceSymbology, } from "@namehash/ens-utils"; import { - AltPriceDisplayFormat, - CurrencySymbolPosition, DisplayedPrice, - parsePriceDisplaySizeToCurrencySymbolSize, - PriceDisplayPosition, PriceDisplaySize, + CurrencySymbolPosition, + parsePriceDisplaySizeToCurrencySymbolSize, } from "./DisplayedPrice"; import { useEffect } from "react"; import { CurrencySymbol } from "./CurrencySymbol/CurrencySymbol"; @@ -18,6 +16,26 @@ import { Tooltip } from "./Tooltip"; import React from "react"; import cc from "classcat"; +export const AltPriceDisplayFormat = { + /** + * Display the alternative price as a tooltip. + */ + Tooltip: "tooltip", + /** + * Display the alternative price as a text. + */ + Text: "text", +} as const; +export type AltPriceDisplayFormat = + (typeof AltPriceDisplayFormat)[keyof typeof AltPriceDisplayFormat]; + +export const PriceDisplayPosition = { + Right: "nk-flex nk-inline-flex nk-items-end nk-space-x-2", + Bottom: "nk-flex nk-flex-col nk-text-right nk-items-end nk-space-y-1", +} as const; +export type PriceDisplayPosition = + (typeof PriceDisplayPosition)[keyof typeof PriceDisplayPosition]; + interface DisplayedPriceWithAltPriceProps { // The price to be displayed price: Price; @@ -91,6 +109,12 @@ export const DisplayedPriceWithAltPrice = ({ } }, []); + const displayAltPriceAsText = + altPriceDisplayFormat === AltPriceDisplayFormat.Text; + const displayAltPriceInTooltip = + altPriceDisplayFormat === AltPriceDisplayFormat.Tooltip; + const displayCurrencySymbol = currencySymbology === PriceSymbology.Symbol; + const triggerElm = ( ); - if (!altPrice && altPriceDisplayFormat === AltPriceDisplayFormat.Tooltip) - return triggerElm; + if (!altPrice && displayAltPriceInTooltip) return triggerElm; else if (altPrice) { const altPriceDisplayElm = ( ); - if (altPriceDisplayFormat === AltPriceDisplayFormat.Text) { + if (displayAltPriceAsText) { return (
{triggerElm} @@ -139,17 +159,17 @@ export const DisplayedPriceWithAltPrice = ({ priceTextDisplaySize, ])} > - {currencySymbology === PriceSymbology.Symbol && ( + {displayCurrencySymbol && (
-
+

Date: Thu, 22 Aug 2024 17:58:26 -0300 Subject: [PATCH 08/43] feat: [SC-25297] Delete DisplayedPriceWithAltPrice and update DisplayedPrice so it can be displayed in a tooltip or as a plain text --- .../Namekit/CurrencySymbol.stories.tsx | 4 +- .../Namekit/DisplayedPrice.stories.tsx | 100 ++- .../DisplayedPriceWithAltPrice.stories.tsx | 606 ------------------ .../CurrencySymbol/CurrencySymbol.tsx | 77 ++- .../CurrencySymbol/icons/UsdSymbol.tsx | 5 + .../src/components/DisplayedPrice.tsx | 120 ++-- .../components/DisplayedPriceWithAltPrice.tsx | 225 ------- packages/namekit-react/src/index.ts | 1 - 8 files changed, 216 insertions(+), 922 deletions(-) delete mode 100644 apps/storybook.namekit.io/stories/Namekit/DisplayedPriceWithAltPrice.stories.tsx create mode 100644 packages/namekit-react/src/components/CurrencySymbol/icons/UsdSymbol.tsx delete mode 100644 packages/namekit-react/src/components/DisplayedPriceWithAltPrice.tsx diff --git a/apps/storybook.namekit.io/stories/Namekit/CurrencySymbol.stories.tsx b/apps/storybook.namekit.io/stories/Namekit/CurrencySymbol.stories.tsx index 45dba59c9..87e6f7469 100644 --- a/apps/storybook.namekit.io/stories/Namekit/CurrencySymbol.stories.tsx +++ b/apps/storybook.namekit.io/stories/Namekit/CurrencySymbol.stories.tsx @@ -46,7 +46,7 @@ export const LargeSize: Story = { }; export const WithCustomSymbolColor: Story = { args: { - symbolFillColor: "#007bff", + fill: "#007bff", size: CurrencySymbolSize.Large, currency: Currency.Eth, }, @@ -70,7 +70,7 @@ const meta: Meta = { component: CurrencySymbol, title: "Namekit/CurrencySymbol", argTypes: { - symbolFillColor: { control: "color" }, + fill: { control: "color" }, currency: { options: [ Currency.Eth, diff --git a/apps/storybook.namekit.io/stories/Namekit/DisplayedPrice.stories.tsx b/apps/storybook.namekit.io/stories/Namekit/DisplayedPrice.stories.tsx index 6957cc802..a26c3bf79 100644 --- a/apps/storybook.namekit.io/stories/Namekit/DisplayedPrice.stories.tsx +++ b/apps/storybook.namekit.io/stories/Namekit/DisplayedPrice.stories.tsx @@ -5,6 +5,7 @@ import { CurrencySymbolPosition, } from "@namehash/namekit-react"; import type { Meta, StoryObj } from "@storybook/react"; +import React from "react"; const meta: Meta = { component: DisplayedPrice, @@ -25,6 +26,9 @@ const meta: Meta = { options: Object.keys(PriceSymbology), control: { type: "select" }, }, + tooltipTriggerToDisplayPriceInTooltip: { + control: "text", + }, }, }; @@ -59,6 +63,29 @@ export const EthPriceWithAcronym: Story = { currencySymbology: PriceSymbology.Acronym, }, }; +export const EthPriceWithSymbolInATooltip: Story = { + args: { + price: { + currency: Currency.Eth, + value: 1000000000000000000n, + }, + tooltipTriggerToDisplayPriceInTooltip: ( +

My custom trigger

+ ), + }, +}; +export const EthPriceWithAcronymInATooltip: Story = { + args: { + price: { + currency: Currency.Eth, + value: 1000000000000000000n, + }, + currencySymbology: PriceSymbology.Acronym, + tooltipTriggerToDisplayPriceInTooltip: ( +

My custom trigger

+ ), + }, +}; export const EthPriceWithSymbolWithoutCurrencyTooltip: Story = { args: { price: { @@ -86,7 +113,7 @@ export const UsdPrice: Story = { }, }, }; -export const LargePriceDisplaySize: Story = { +export const LargePriceDisplaySizeForUSD: Story = { args: { price: { currency: Currency.Usd, @@ -95,7 +122,16 @@ export const LargePriceDisplaySize: Story = { displaySize: PriceDisplaySize.Large, }, }; -export const MediumPriceDisplaySize: Story = { +export const LargePriceDisplaySizeForWETH: Story = { + args: { + price: { + currency: Currency.Weth, + value: 198900n, + }, + displaySize: PriceDisplaySize.Large, + }, +}; +export const MediumPriceDisplaySizeForUSD: Story = { args: { price: { currency: Currency.Usd, @@ -104,7 +140,16 @@ export const MediumPriceDisplaySize: Story = { displaySize: PriceDisplaySize.Medium, }, }; -export const SmallPriceDisplaySize: Story = { +export const MediumPriceDisplaySizeForWETH: Story = { + args: { + price: { + currency: Currency.Weth, + value: 198900n, + }, + displaySize: PriceDisplaySize.Medium, + }, +}; +export const SmallPriceDisplaySizeForUSD: Story = { args: { price: { currency: Currency.Usd, @@ -113,7 +158,16 @@ export const SmallPriceDisplaySize: Story = { displaySize: PriceDisplaySize.Small, }, }; -export const MicroPriceDisplaySize: Story = { +export const SmallPriceDisplaySizeForWETH: Story = { + args: { + price: { + currency: Currency.Weth, + value: 198900n, + }, + displaySize: PriceDisplaySize.Small, + }, +}; +export const MicroPriceDisplaySizeForUSD: Story = { args: { price: { currency: Currency.Usd, @@ -122,6 +176,15 @@ export const MicroPriceDisplaySize: Story = { displaySize: PriceDisplaySize.Micro, }, }; +export const MicroPriceDisplaySizeForWETH: Story = { + args: { + price: { + currency: Currency.Weth, + value: 198900n, + }, + displaySize: PriceDisplaySize.Micro, + }, +}; export const DisplaySymbologyAtLeft: Story = { args: { price: { @@ -232,15 +295,6 @@ export const DisplayAcronymSymbologyForWETH: Story = { currencySymbology: PriceSymbology.Acronym, }, }; -export const WithOnClickHandler: Story = { - args: { - price: { - currency: Currency.Usd, - value: 198900n, - }, - onTextClick: () => alert("Price clicked"), - }, -}; export const EthMinDisplayPrice: Story = { args: { price: { @@ -321,3 +375,23 @@ export const WethMaxDisplayPrice: Story = { }, }, }; +export const PrimaryPriceAndTooltipPrice: Story = { + name: "[Prices combination] Text price + Tooltip price", + args: { + price: { + currency: Currency.Usd, + value: 198900n, + }, + displaySize: PriceDisplaySize.Large, + tooltipTriggerToDisplayPriceInTooltip: ( + + ), + }, +}; diff --git a/apps/storybook.namekit.io/stories/Namekit/DisplayedPriceWithAltPrice.stories.tsx b/apps/storybook.namekit.io/stories/Namekit/DisplayedPriceWithAltPrice.stories.tsx deleted file mode 100644 index 0ee41633f..000000000 --- a/apps/storybook.namekit.io/stories/Namekit/DisplayedPriceWithAltPrice.stories.tsx +++ /dev/null @@ -1,606 +0,0 @@ -import { Currency, PriceSymbology } from "@namehash/ens-utils"; -import { - AltPriceDisplayFormat, - DisplayedPriceWithAltPrice, - PriceDisplayPosition, - PriceDisplaySize, - CurrencySymbolPosition, -} from "@namehash/namekit-react"; -import type { Meta, StoryObj } from "@storybook/react"; - -const meta: Meta = { - component: DisplayedPriceWithAltPrice, - title: "Namekit/DisplayedPriceWithAltPrice", - argTypes: { - price: { - control: "object", - }, - priceTextDisplaySize: { - options: Object.keys(PriceDisplaySize), - control: { type: "select" }, - }, - altPriceDisplayFormat: { - options: Object.keys(AltPriceDisplayFormat), - control: { type: "select" }, - }, - symbolPosition: { - options: Object.keys(CurrencySymbolPosition), - control: { type: "select" }, - }, - currencySymbology: { - options: Object.keys(PriceSymbology), - control: { type: "select" }, - }, - altPriceDisplaySize: { - options: Object.keys(PriceDisplaySize), - control: { type: "select" }, - }, - altPriceDisplayPosition: { - options: Object.keys(PriceDisplayPosition), - control: { type: "select" }, - }, - }, -}; - -declare global { - interface BigInt { - toJSON(): string; - } -} - -BigInt.prototype.toJSON = function () { - return `${this.toString()}n`; -}; - -export default meta; - -type Story = StoryObj; - -export const EthPriceWithSymbol: Story = { - args: { - price: { - currency: Currency.Eth, - value: 1000000000000000000n, - }, - }, -}; -export const EthPriceWithAcronym: Story = { - args: { - price: { - currency: Currency.Eth, - value: 1000000000000000000n, - }, - currencySymbology: PriceSymbology.Acronym, - }, -}; -export const EthPriceWithSymbolWithoutCurrencyTooltip: Story = { - args: { - price: { - currency: Currency.Eth, - value: 1000000000000000000n, - }, - describeCurrencyInTooltip: false, - }, -}; -export const EthPriceWithAcronymWithoutCurrencyTooltip: Story = { - args: { - price: { - currency: Currency.Eth, - value: 1000000000000000000n, - }, - describeCurrencyInTooltip: false, - currencySymbology: PriceSymbology.Acronym, - }, -}; -export const UsdPrice: Story = { - args: { - price: { - currency: Currency.Usd, - value: 198900n, - }, - altPrice: { - currency: Currency.Eth, - value: 1000000000000000000n, - }, - altPriceDisplayFormat: AltPriceDisplayFormat.Tooltip, - }, -}; -export const AlternativePriceDisplayedAsTextNextToPrice: Story = { - args: { - price: { - currency: Currency.Usd, - value: 198900n, - }, - altPrice: { - currency: Currency.Eth, - value: 1000000000000000000n, - }, - priceTextDisplaySize: PriceDisplaySize.Medium, - altPriceDisplaySize: PriceDisplaySize.Small, - altPriceDisplayPosition: PriceDisplayPosition.Right, - altPriceDisplayFormat: AltPriceDisplayFormat.Text, - }, -}; -export const AlternativePriceDisplayedAsTextInBottom: Story = { - args: { - price: { - currency: Currency.Usd, - value: 198900n, - }, - altPrice: { - currency: Currency.Eth, - value: 1000000000000000000n, - }, - priceTextDisplaySize: PriceDisplaySize.Medium, - altPriceDisplaySize: PriceDisplaySize.Small, - altPriceDisplayPosition: PriceDisplayPosition.Bottom, - altPriceDisplayFormat: AltPriceDisplayFormat.Text, - }, -}; - -export const LargePriceDisplaySize: Story = { - args: { - price: { - currency: Currency.Usd, - value: 198900n, - }, - altPrice: { - currency: Currency.Eth, - value: 1000000000000000000n, - }, - priceTextDisplaySize: PriceDisplaySize.Large, - }, -}; -export const MediumPriceDisplaySize: Story = { - args: { - price: { - currency: Currency.Usd, - value: 198900n, - }, - altPrice: { - currency: Currency.Eth, - value: 1000000000000000000n, - }, - priceTextDisplaySize: PriceDisplaySize.Medium, - }, -}; -export const SmallPriceDisplaySize: Story = { - args: { - price: { - currency: Currency.Usd, - value: 198900n, - }, - altPrice: { - currency: Currency.Eth, - value: 1000000000000000000n, - }, - priceTextDisplaySize: PriceDisplaySize.Small, - }, -}; -export const MicroPriceDisplaySize: Story = { - args: { - price: { - currency: Currency.Usd, - value: 198900n, - }, - altPrice: { - currency: Currency.Eth, - value: 1000000000000000000n, - }, - priceTextDisplaySize: PriceDisplaySize.Micro, - }, -}; -export const DisplaySymbologyAtLeft: Story = { - args: { - price: { - currency: Currency.Usd, - value: 198900n, - }, - altPrice: { - currency: Currency.Eth, - value: 1000000000000000000n, - }, - symbolPosition: CurrencySymbolPosition.Left, - priceTextDisplaySize: PriceDisplaySize.Micro, - }, -}; -export const DisplaySymbologyAtRight: Story = { - args: { - price: { - currency: Currency.Usd, - value: 198900n, - }, - altPrice: { - currency: Currency.Eth, - value: 1000000000000000000n, - }, - symbolPosition: CurrencySymbolPosition.Right, - priceTextDisplaySize: PriceDisplaySize.Micro, - }, -}; -export const DisplaySymbolSymbologyForETH: Story = { - args: { - price: { - currency: Currency.Eth, - value: 1000000000000000000n, - }, - altPrice: { - currency: Currency.Usd, - value: 198900n, - }, - currencySymbology: PriceSymbology.Symbol, - }, -}; -export const DisplayAcronymSymbologyForETH: Story = { - args: { - price: { - currency: Currency.Eth, - value: 1000000000000000000n, - }, - altPrice: { - currency: Currency.Usd, - value: 198900n, - }, - currencySymbology: PriceSymbology.Acronym, - }, -}; -export const DisplaySymbolSymbologyForUSD: Story = { - args: { - price: { - currency: Currency.Usd, - value: 198900n, - }, - altPrice: { - currency: Currency.Eth, - value: 1000000000000000000n, - }, - currencySymbology: PriceSymbology.Symbol, - }, -}; -export const DisplayAcronymSymbologyForUSD: Story = { - args: { - price: { - currency: Currency.Usd, - value: 198900n, - }, - altPrice: { - currency: Currency.Eth, - value: 1000000000000000000n, - }, - currencySymbology: PriceSymbology.Acronym, - }, -}; -export const DisplaySymbolSymbologyForUSDC: Story = { - args: { - price: { - currency: Currency.Usdc, - value: 198900n, - }, - currencySymbology: PriceSymbology.Symbol, - }, -}; -export const DisplayAcronymSymbologyForUSDC: Story = { - args: { - price: { - currency: Currency.Usdc, - value: 198900n, - }, - currencySymbology: PriceSymbology.Acronym, - }, -}; -export const DisplaySymbolSymbologyForDAI: Story = { - args: { - price: { - currency: Currency.Dai, - value: 198900n, - }, - currencySymbology: PriceSymbology.Symbol, - }, -}; -export const DisplayAcronymSymbologyForDAI: Story = { - args: { - price: { - currency: Currency.Dai, - value: 198900n, - }, - currencySymbology: PriceSymbology.Acronym, - }, -}; -export const DisplaySymbolSymbologyForWETH: Story = { - args: { - price: { - currency: Currency.Weth, - value: 198900n, - }, - currencySymbology: PriceSymbology.Symbol, - }, -}; -export const DisplayAcronymSymbologyForWETH: Story = { - args: { - price: { - currency: Currency.Weth, - value: 198900n, - }, - currencySymbology: PriceSymbology.Acronym, - }, -}; -export const LargeLargeDisplaySizes: Story = { - name: "[Prices sizes combinations] Large & Large", - args: { - price: { - currency: Currency.Usd, - value: 198900n, - }, - altPrice: { - currency: Currency.Eth, - value: 1000000000000000000n, - }, - altPriceDisplayFormat: AltPriceDisplayFormat.Text, - priceTextDisplaySize: PriceDisplaySize.Large, - altPriceDisplaySize: PriceDisplaySize.Large, - }, -}; -export const LargeMediumDisplaySizes: Story = { - name: "[Prices sizes combinations] Large & Medium", - args: { - price: { - currency: Currency.Usd, - value: 198900n, - }, - altPrice: { - currency: Currency.Eth, - value: 1000000000000000000n, - }, - altPriceDisplayFormat: AltPriceDisplayFormat.Text, - priceTextDisplaySize: PriceDisplaySize.Large, - altPriceDisplaySize: PriceDisplaySize.Medium, - }, -}; -export const LargeSmallDisplaySizes: Story = { - name: "[Prices sizes combinations] Large & Small", - args: { - price: { - currency: Currency.Usd, - value: 198900n, - }, - altPrice: { - currency: Currency.Eth, - value: 1000000000000000000n, - }, - altPriceDisplayFormat: AltPriceDisplayFormat.Text, - priceTextDisplaySize: PriceDisplaySize.Large, - altPriceDisplaySize: PriceDisplaySize.Small, - }, -}; -export const LargeMicroDisplaySizes: Story = { - name: "[Prices sizes combinations] Large & Micro", - args: { - price: { - currency: Currency.Usd, - value: 198900n, - }, - altPrice: { - currency: Currency.Eth, - value: 1000000000000000000n, - }, - altPriceDisplayFormat: AltPriceDisplayFormat.Text, - priceTextDisplaySize: PriceDisplaySize.Large, - altPriceDisplaySize: PriceDisplaySize.Micro, - }, -}; -export const MediumMediumDisplaySizes: Story = { - name: "[Prices sizes combinations] Medium & Medium", - args: { - price: { - currency: Currency.Usd, - value: 198900n, - }, - altPrice: { - currency: Currency.Eth, - value: 1000000000000000000n, - }, - altPriceDisplayFormat: AltPriceDisplayFormat.Text, - priceTextDisplaySize: PriceDisplaySize.Medium, - altPriceDisplaySize: PriceDisplaySize.Medium, - }, -}; -export const MediumSmallDisplaySizes: Story = { - name: "[Prices sizes combinations] Medium & Small", - args: { - price: { - currency: Currency.Usd, - value: 198900n, - }, - altPrice: { - currency: Currency.Eth, - value: 1000000000000000000n, - }, - altPriceDisplayFormat: AltPriceDisplayFormat.Text, - priceTextDisplaySize: PriceDisplaySize.Medium, - altPriceDisplaySize: PriceDisplaySize.Small, - }, -}; -export const MediumMicroDisplaySizes: Story = { - name: "[Prices sizes combinations] Medium & Micro", - args: { - price: { - currency: Currency.Usd, - value: 198900n, - }, - altPrice: { - currency: Currency.Eth, - value: 1000000000000000000n, - }, - altPriceDisplayFormat: AltPriceDisplayFormat.Text, - priceTextDisplaySize: PriceDisplaySize.Medium, - altPriceDisplaySize: PriceDisplaySize.Micro, - }, -}; -export const SmallSmallDisplaySizes: Story = { - name: "[Prices sizes combinations] Small & Small", - args: { - price: { - currency: Currency.Usd, - value: 198900n, - }, - altPrice: { - currency: Currency.Eth, - value: 1000000000000000000n, - }, - altPriceDisplayFormat: AltPriceDisplayFormat.Text, - priceTextDisplaySize: PriceDisplaySize.Small, - altPriceDisplaySize: PriceDisplaySize.Small, - }, -}; -export const SmallMicroDisplaySizes: Story = { - name: "[Prices sizes combinations] Small & Micro", - args: { - price: { - currency: Currency.Usd, - value: 198900n, - }, - altPrice: { - currency: Currency.Eth, - value: 1000000000000000000n, - }, - altPriceDisplayFormat: AltPriceDisplayFormat.Text, - priceTextDisplaySize: PriceDisplaySize.Small, - altPriceDisplaySize: PriceDisplaySize.Micro, - }, -}; -export const MicroMicroDisplaySizes: Story = { - name: "[Prices sizes combinations] Micro & Micro", - args: { - price: { - currency: Currency.Usd, - value: 198900n, - }, - altPrice: { - currency: Currency.Eth, - value: 1000000000000000000n, - }, - altPriceDisplayFormat: AltPriceDisplayFormat.Text, - priceTextDisplaySize: PriceDisplaySize.Micro, - altPriceDisplaySize: PriceDisplaySize.Micro, - }, -}; -export const WithOnClickHandler: Story = { - args: { - price: { - currency: Currency.Usd, - value: 198900n, - }, - altPrice: { - currency: Currency.Eth, - value: 1000000000000000000n, - }, - onTextClick: () => alert("Price clicked"), - }, -}; -export const WithAltPriceOnClickHandler: Story = { - args: { - price: { - currency: Currency.Usd, - value: 198900n, - }, - altPrice: { - currency: Currency.Eth, - value: 1000000000000000000n, - }, - onAltPriceTextClick: () => alert("Alt price clicked"), - }, -}; -export const WithMultipleOnClickHandlers: Story = { - args: { - price: { - currency: Currency.Usd, - value: 198900n, - }, - altPrice: { - currency: Currency.Eth, - value: 1000000000000000000n, - }, - onTextClick: () => alert("Price clicked"), - onAltPriceTextClick: () => alert("Alt price clicked"), - }, -}; -export const EthMinDisplayPrice: Story = { - args: { - price: { - currency: Currency.Eth, - value: 100000000000000n, - }, - }, -}; -export const EthMaxDisplayPrice: Story = { - args: { - price: { - currency: Currency.Eth, - value: 10000000000000000000000000n, - }, - }, -}; -export const UsdMinDisplayPrice: Story = { - args: { - price: { - currency: Currency.Usd, - value: 1n, - }, - }, -}; -export const UsdMaxDisplayPrice: Story = { - args: { - price: { - currency: Currency.Usd, - value: 1000000000000000000n, - }, - }, -}; -export const UsdcMinDisplayPrice: Story = { - args: { - price: { - currency: Currency.Usdc, - value: 1n, - }, - }, -}; -export const UsdcMaxDisplayPrice: Story = { - args: { - price: { - currency: Currency.Usdc, - value: 1000000000000000000n, - }, - }, -}; -export const DaiMinDisplayPrice: Story = { - args: { - price: { - currency: Currency.Dai, - value: 1n, - }, - }, -}; -export const DaiMaxDisplayPrice: Story = { - args: { - price: { - currency: Currency.Dai, - value: 10000000000000000000000000n, - }, - }, -}; -export const WethMinDisplayPrice: Story = { - args: { - price: { - currency: Currency.Weth, - value: 1n, - }, - }, -}; -export const WethMaxDisplayPrice: Story = { - args: { - price: { - currency: Currency.Weth, - value: 1000000000000000000000000n, - }, - }, -}; diff --git a/packages/namekit-react/src/components/CurrencySymbol/CurrencySymbol.tsx b/packages/namekit-react/src/components/CurrencySymbol/CurrencySymbol.tsx index 11ba5c7d1..862647077 100644 --- a/packages/namekit-react/src/components/CurrencySymbol/CurrencySymbol.tsx +++ b/packages/namekit-react/src/components/CurrencySymbol/CurrencySymbol.tsx @@ -1,21 +1,26 @@ import { PriceCurrencyFormat, Currency } from "@namehash/ens-utils"; import { Tooltip } from "../Tooltip"; +import { UsdSymbol } from "./icons/UsdSymbol"; import { UsdcSymbol } from "./icons/UsdcSymbol"; import { WethSymbol } from "./icons/WethSymbol"; import { EthSymbol } from "./icons/EthSymbol"; import { DaiSymbol } from "./icons/DaiSymbol"; import React from "react"; -import cc from "classcat"; +/** + * The size of the `CurrencySymbol`. + * This is defined as a mapping from a `CurrencySymbolSize` to a number. + * This number represents the size a `CurrencySymbol` should be displayed at, in pixels. + */ export const CurrencySymbolSize = { - Small: "nk-w-4", - Large: "nk-w-5", + Small: 16, + Large: 20, } as const; export type CurrencySymbolSize = (typeof CurrencySymbolSize)[keyof typeof CurrencySymbolSize]; -interface CurrencySymbolProps { +interface CurrencySymbolProps extends React.ComponentProps { /** * The `Currency` to display the symbol for. */ @@ -26,7 +31,7 @@ interface CurrencySymbolProps { * * Defaults to `CurrencySymbolSize.Small`. */ - size: CurrencySymbolSize; + size?: CurrencySymbolSize; /** * If `true`, hovering over the `CurrencySymbol` will display the @@ -36,53 +41,61 @@ interface CurrencySymbolProps { * Defaults to `true`. */ describeCurrencyInTooltip: boolean; - - /** - * Optional. Defines a custom color for the `CurrencySymbol` that overrides - * the default symbol color for `currency`. - * - * If defined, must be formatted as a hex color code. - * - * If undefined, defaults to the default symbol color for `currency`. - */ - symbolFillColor?: string; - /** - * Optional. Additional classes to apply to the `CurrencySymbol`. - */ - additionalClasses?: string; } export const CurrencySymbol = ({ - currency, size = CurrencySymbolSize.Small, describeCurrencyInTooltip = true, - symbolFillColor = undefined, - additionalClasses = "", -}: CurrencySymbolProps) => { + currency, + ...props +}: CurrencySymbolProps): JSX.Element => { let symbol: JSX.Element; switch (currency) { case Currency.Usd: symbol = ( -

- $ -

+ + ); break; case Currency.Usdc: - symbol = ; + symbol = ( + + + + ); break; case Currency.Dai: - symbol = ; + symbol = ( + + + + ); break; case Currency.Weth: - symbol = ; + symbol = ( + + + + ); break; case Currency.Eth: - symbol = ; + symbol = ( + + + + ); break; default: // TODO: We haven't created symbols for `Currency.Gas` yet. diff --git a/packages/namekit-react/src/components/CurrencySymbol/icons/UsdSymbol.tsx b/packages/namekit-react/src/components/CurrencySymbol/icons/UsdSymbol.tsx new file mode 100644 index 000000000..a0c410ea6 --- /dev/null +++ b/packages/namekit-react/src/components/CurrencySymbol/icons/UsdSymbol.tsx @@ -0,0 +1,5 @@ +import React, { type SVGProps } from "react"; + +export const UsdSymbol = (props: React.ComponentProps<"p">) => { + return

$

; +}; diff --git a/packages/namekit-react/src/components/DisplayedPrice.tsx b/packages/namekit-react/src/components/DisplayedPrice.tsx index 8a9503ad4..7b6c9e833 100644 --- a/packages/namekit-react/src/components/DisplayedPrice.tsx +++ b/packages/namekit-react/src/components/DisplayedPrice.tsx @@ -36,11 +36,17 @@ export type PriceDisplaySize = (typeof PriceDisplaySize)[keyof typeof PriceDisplaySize]; /** - * A map of the `PriceDisplaySize` to the `CurrencySymbolSize`. - * @param priceDisplaySize: PriceDisplaySize - * @returns CurrencySymbolSize + * A mapping from a `PriceDisplaySize` to a `CurrencySymbolSize`. + * This is useful for determining the size of the currency symbol to display + * for a given price display size. e.g. as needed in DisplayedPrice, when a + * currency symbol is displayed alongside a price and the user can define + * the size of the price display. This way both price display size and + * currency symbol size can be controlled by the same prop, always + * guaranteeing that they are displayed with aligned sizes. + * @param priceDisplaySize: PriceDisplaySize. The size of the price display. + * @returns CurrencySymbolSize. The size of the currency symbol to display. */ -export const parsePriceDisplaySizeToCurrencySymbolSize = ( +export const getCurrencySymbolSize = ( priceDisplaySize: PriceDisplaySize, ): CurrencySymbolSize => { switch (priceDisplaySize) { @@ -53,71 +59,68 @@ export const parsePriceDisplaySizeToCurrencySymbolSize = ( } }; -interface DisplayedPriceProps { +export interface DisplayedPriceProps { // The price to be displayed price: Price; - // The onClick event handler for the price text - onTextClick?: () => void; // Wether to display a currency symbology as its acronym or symbol currencySymbology?: PriceSymbology; - // The place to display the currency symbology + /** + * The position of the currency symbol relative to the price. + * Defaults to `CurrencySymbolPosition.Left`. + * + * If `CurrencySymbolPosition.Left`, the currency symbol will be displayed to the left of the price. + * If `CurrencySymbolPosition.Right`, the currency symbol will be displayed to the right of the price. + */ symbolPosition?: CurrencySymbolPosition; // The size of the price display displaySize?: PriceDisplaySize; // Wether or not to display the name of the currency in a tooltip when its symbol is hovered describeCurrencyInTooltip?: boolean; - // Wether to display the currency symbology - withSymbol?: boolean; + // Whenever below prop is defined, the price is displayed inside a Tooltip which is triggered by the below content + tooltipTriggerToDisplayPriceInTooltip?: React.ReactNode; } export const DisplayedPrice = ({ price, - onTextClick, describeCurrencyInTooltip = true, - symbolPosition = CurrencySymbolPosition.Left, - currencySymbology = PriceSymbology.Symbol, displaySize = PriceDisplaySize.Small, - withSymbol = true, + tooltipTriggerToDisplayPriceInTooltip, + currencySymbology = PriceSymbology.Symbol, + symbolPosition = CurrencySymbolPosition.Left, }: DisplayedPriceProps) => { const priceDisplaySizeAsCurrencyDisplaySize = - parsePriceDisplaySizeToCurrencySymbolSize(displaySize); + getCurrencySymbolSize(displaySize); - return ( + const displayedPrice = (

{formattedPrice({ price })}

-
- -
+ {currencySymbology === PriceSymbology.Symbol && ( +
+ +
+ )} {currencySymbology === PriceSymbology.Acronym && ( <> @@ -141,4 +144,35 @@ export const DisplayedPrice = ({ )}
); + + const displayedPriceInATooltip = ( +
+
+ + <> + {price ? ( +
+
+

+ {formattedPrice({ + price: price, + symbology: currencySymbology, + withPrefix: currencySymbology === PriceSymbology.Symbol, + withSufix: currencySymbology === PriceSymbology.Acronym, + })} +

+
+
+ ) : ( + <> + )} + + +
+
+ ); + + return tooltipTriggerToDisplayPriceInTooltip + ? displayedPriceInATooltip + : displayedPrice; }; diff --git a/packages/namekit-react/src/components/DisplayedPriceWithAltPrice.tsx b/packages/namekit-react/src/components/DisplayedPriceWithAltPrice.tsx deleted file mode 100644 index 62f9a664f..000000000 --- a/packages/namekit-react/src/components/DisplayedPriceWithAltPrice.tsx +++ /dev/null @@ -1,225 +0,0 @@ -import { - Currency, - formattedPrice, - Price, - PriceSymbology, -} from "@namehash/ens-utils"; -import { - DisplayedPrice, - PriceDisplaySize, - CurrencySymbolPosition, - parsePriceDisplaySizeToCurrencySymbolSize, -} from "./DisplayedPrice"; -import { useEffect } from "react"; -import { CurrencySymbol } from "./CurrencySymbol/CurrencySymbol"; -import { Tooltip } from "./Tooltip"; -import React from "react"; -import cc from "classcat"; - -export const AltPriceDisplayFormat = { - /** - * Display the alternative price as a tooltip. - */ - Tooltip: "tooltip", - /** - * Display the alternative price as a text. - */ - Text: "text", -} as const; -export type AltPriceDisplayFormat = - (typeof AltPriceDisplayFormat)[keyof typeof AltPriceDisplayFormat]; - -export const PriceDisplayPosition = { - Right: "nk-flex nk-inline-flex nk-items-end nk-space-x-2", - Bottom: "nk-flex nk-flex-col nk-text-right nk-items-end nk-space-y-1", -} as const; -export type PriceDisplayPosition = - (typeof PriceDisplayPosition)[keyof typeof PriceDisplayPosition]; - -interface DisplayedPriceWithAltPriceProps { - // The price to be displayed - price: Price; - // The alternative price to be displayed (the price converted to another currency) - altPrice?: Price; - // The onClick event handler for the price text - onTextClick?: () => void; - // The onClick event handler for the alt. price text - onAltPriceTextClick?: () => void; - // Wether to display the alternative price as a text instead of a tooltip - altPriceDisplayFormat: AltPriceDisplayFormat; - // Wether to display a currency symbology as its acronym or symbol - currencySymbology?: PriceSymbology; - // The place to display the currency symbology - symbolPosition?: CurrencySymbolPosition; - // The size of the price display - priceTextDisplaySize?: PriceDisplaySize; - // The size of the alternative price to display, which must be smaller than the price display size - altPriceDisplaySize?: PriceDisplaySize; - // The place to display the alternative price when displayed as text - altPriceDisplayPosition?: PriceDisplayPosition; - // Wether or not to display the name of the currency in a tooltip when its symbol is hovered - describeCurrencyInTooltip?: boolean; -} - -export const DisplayedPriceWithAltPrice = ({ - price, - altPrice, - onTextClick, - onAltPriceTextClick, - describeCurrencyInTooltip = true, - currencySymbology = PriceSymbology.Symbol, - altPriceDisplaySize = PriceDisplaySize.Micro, - symbolPosition = CurrencySymbolPosition.Left, - priceTextDisplaySize = PriceDisplaySize.Small, - altPriceDisplayPosition = PriceDisplayPosition.Right, - altPriceDisplayFormat = AltPriceDisplayFormat.Tooltip, -}: DisplayedPriceWithAltPriceProps) => { - // Below useEffect checks wether the alternative price display size is smaller than the price display size - useEffect(() => { - switch (altPriceDisplaySize) { - case PriceDisplaySize.Micro: - break; - case PriceDisplaySize.Small: - if (priceTextDisplaySize === PriceDisplaySize.Micro) { - throw new Error( - "The size of the alternative price must be equal or smaller than the price display size.", - ); - } - break; - case PriceDisplaySize.Medium: - if ( - priceTextDisplaySize === PriceDisplaySize.Micro || - priceTextDisplaySize === PriceDisplaySize.Small - ) { - throw new Error( - "The size of the alternative price must be equal or smaller than the price display size.", - ); - } - break; - case PriceDisplaySize.Large: - if ( - priceTextDisplaySize === PriceDisplaySize.Micro || - priceTextDisplaySize === PriceDisplaySize.Small || - priceTextDisplaySize === PriceDisplaySize.Medium - ) { - throw new Error( - "The size of the alternative price must be equal or smaller than the price display size.", - ); - } - } - }, []); - - const displayAltPriceAsText = - altPriceDisplayFormat === AltPriceDisplayFormat.Text; - const displayAltPriceInTooltip = - altPriceDisplayFormat === AltPriceDisplayFormat.Tooltip; - const displayCurrencySymbol = currencySymbology === PriceSymbology.Symbol; - - const triggerElm = ( - - ); - - if (!altPrice && displayAltPriceInTooltip) return triggerElm; - else if (altPrice) { - const altPriceDisplayElm = ( - - ); - - if (displayAltPriceAsText) { - return ( -
- {triggerElm} - {altPriceDisplayElm} -
- ); - } else if (altPrice) { - const priceDisplaySizeAsCurrencyDisplaySize = - parsePriceDisplaySizeToCurrencySymbolSize(altPriceDisplaySize); - return ( -
- {displayCurrencySymbol && ( -
- -
- )} - -
- - <> - {altPrice ? ( -
-
-

- {formattedPrice({ - price: altPrice, - symbology: currencySymbology, - withPrefix: displayCurrencySymbol, - withSufix: - currencySymbology === PriceSymbology.Acronym, - })} -

-
-
- ) : ( - <> - )} - - -
-
- ); - } else return <>; - } else return <>; -}; diff --git a/packages/namekit-react/src/index.ts b/packages/namekit-react/src/index.ts index 3d41753cf..1d40d4038 100644 --- a/packages/namekit-react/src/index.ts +++ b/packages/namekit-react/src/index.ts @@ -16,4 +16,3 @@ export * from "./components/Link"; export * from "./components/Tooltip"; export * from "./components/CurrencySymbol/CurrencySymbol"; export * from "./components/DisplayedPrice"; -export * from "./components/DisplayedPriceWithAltPrice"; From 9be7ba6fdf3d91006a4f4a77d644a49a96e68fa2 Mon Sep 17 00:00:00 2001 From: FrancoAguzzi Date: Fri, 23 Aug 2024 10:29:52 -0300 Subject: [PATCH 09/43] feat: [SC-25297] Set DisplayedPrice to receive custom symbol | Create DisplayedPriceWithSymbol comp. --- .changeset/quick-ads-pretend.md | 2 +- .../Namekit/DisplayedPrice.stories.tsx | 190 +------- .../DisplayedPriceWithSymbol.stories.tsx | 419 ++++++++++++++++++ packages/ens-utils/src/price.ts | 35 +- .../src/components/DisplayedPrice.tsx | 129 +----- .../components/DisplayedPriceWithSymbol.tsx | 168 +++++++ packages/namekit-react/src/index.ts | 1 + 7 files changed, 636 insertions(+), 308 deletions(-) create mode 100644 apps/storybook.namekit.io/stories/Namekit/DisplayedPriceWithSymbol.stories.tsx create mode 100644 packages/namekit-react/src/components/DisplayedPriceWithSymbol.tsx diff --git a/.changeset/quick-ads-pretend.md b/.changeset/quick-ads-pretend.md index 183f5d0fe..cce0898f9 100644 --- a/.changeset/quick-ads-pretend.md +++ b/.changeset/quick-ads-pretend.md @@ -3,4 +3,4 @@ "@namehash/ens-utils": minor --- -Create DisplayedPrice and DisplayedPriceWithAltPrice components and PriceSymbology enum +Create DisplayedPrice and DisplayedPriceWithSymbol components + new price utilities diff --git a/apps/storybook.namekit.io/stories/Namekit/DisplayedPrice.stories.tsx b/apps/storybook.namekit.io/stories/Namekit/DisplayedPrice.stories.tsx index a26c3bf79..2e100ad65 100644 --- a/apps/storybook.namekit.io/stories/Namekit/DisplayedPrice.stories.tsx +++ b/apps/storybook.namekit.io/stories/Namekit/DisplayedPrice.stories.tsx @@ -1,10 +1,6 @@ -import { Currency, PriceSymbology } from "@namehash/ens-utils"; -import { - DisplayedPrice, - PriceDisplaySize, - CurrencySymbolPosition, -} from "@namehash/namekit-react"; +import { DisplayedPrice, PriceDisplaySize } from "@namehash/namekit-react"; import type { Meta, StoryObj } from "@storybook/react"; +import { Currency } from "@namehash/ens-utils"; import React from "react"; const meta: Meta = { @@ -18,14 +14,6 @@ const meta: Meta = { options: Object.keys(PriceDisplaySize), control: { type: "select" }, }, - symbolPosition: { - options: Object.keys(CurrencySymbolPosition), - control: { type: "select" }, - }, - currencySymbology: { - options: Object.keys(PriceSymbology), - control: { type: "select" }, - }, tooltipTriggerToDisplayPriceInTooltip: { control: "text", }, @@ -46,7 +34,7 @@ export default meta; type Story = StoryObj; -export const EthPriceWithSymbol: Story = { +export const EthPrice: Story = { args: { price: { currency: Currency.Eth, @@ -54,57 +42,17 @@ export const EthPriceWithSymbol: Story = { }, }, }; -export const EthPriceWithAcronym: Story = { - args: { - price: { - currency: Currency.Eth, - value: 1000000000000000000n, - }, - currencySymbology: PriceSymbology.Acronym, - }, -}; -export const EthPriceWithSymbolInATooltip: Story = { +export const EthPriceInATooltip: Story = { args: { price: { currency: Currency.Eth, value: 1000000000000000000n, }, - tooltipTriggerToDisplayPriceInTooltip: ( -

My custom trigger

- ), - }, -}; -export const EthPriceWithAcronymInATooltip: Story = { - args: { - price: { - currency: Currency.Eth, - value: 1000000000000000000n, - }, - currencySymbology: PriceSymbology.Acronym, tooltipTriggerToDisplayPriceInTooltip: (

My custom trigger

), }, }; -export const EthPriceWithSymbolWithoutCurrencyTooltip: Story = { - args: { - price: { - currency: Currency.Eth, - value: 1000000000000000000n, - }, - describeCurrencyInTooltip: false, - }, -}; -export const EthPriceWithAcronymWithoutCurrencyTooltip: Story = { - args: { - price: { - currency: Currency.Eth, - value: 1000000000000000000n, - }, - describeCurrencyInTooltip: false, - currencySymbology: PriceSymbology.Acronym, - }, -}; export const UsdPrice: Story = { args: { price: { @@ -185,116 +133,6 @@ export const MicroPriceDisplaySizeForWETH: Story = { displaySize: PriceDisplaySize.Micro, }, }; -export const DisplaySymbologyAtLeft: Story = { - args: { - price: { - currency: Currency.Usd, - value: 198900n, - }, - symbolPosition: CurrencySymbolPosition.Left, - displaySize: PriceDisplaySize.Micro, - }, -}; -export const DisplaySymbologyAtRight: Story = { - args: { - price: { - currency: Currency.Usd, - value: 198900n, - }, - symbolPosition: CurrencySymbolPosition.Right, - displaySize: PriceDisplaySize.Micro, - }, -}; -export const DisplaySymbolSymbologyForETH: Story = { - args: { - price: { - currency: Currency.Eth, - value: 1000000000000000000n, - }, - currencySymbology: PriceSymbology.Symbol, - }, -}; -export const DisplayAcronymSymbologyForETH: Story = { - args: { - price: { - currency: Currency.Eth, - value: 1000000000000000000n, - }, - currencySymbology: PriceSymbology.Acronym, - }, -}; -export const DisplaySymbolSymbologyForUSD: Story = { - args: { - price: { - currency: Currency.Usd, - value: 198900n, - }, - currencySymbology: PriceSymbology.Symbol, - }, -}; -export const DisplayAcronymSymbologyForUSD: Story = { - args: { - price: { - currency: Currency.Usd, - value: 198900n, - }, - currencySymbology: PriceSymbology.Acronym, - }, -}; -export const DisplaySymbolSymbologyForUSDC: Story = { - args: { - price: { - currency: Currency.Usdc, - value: 198900n, - }, - currencySymbology: PriceSymbology.Symbol, - }, -}; -export const DisplayAcronymSymbologyForUSDC: Story = { - args: { - price: { - currency: Currency.Usdc, - value: 198900n, - }, - currencySymbology: PriceSymbology.Acronym, - }, -}; -export const DisplaySymbolSymbologyForDAI: Story = { - args: { - price: { - currency: Currency.Dai, - value: 198900n, - }, - currencySymbology: PriceSymbology.Symbol, - }, -}; -export const DisplayAcronymSymbologyForDAI: Story = { - args: { - price: { - currency: Currency.Dai, - value: 198900n, - }, - currencySymbology: PriceSymbology.Acronym, - }, -}; -export const DisplaySymbolSymbologyForWETH: Story = { - args: { - price: { - currency: Currency.Weth, - value: 198900n, - }, - currencySymbology: PriceSymbology.Symbol, - }, -}; -export const DisplayAcronymSymbologyForWETH: Story = { - args: { - price: { - currency: Currency.Weth, - value: 198900n, - }, - currencySymbology: PriceSymbology.Acronym, - }, -}; export const EthMinDisplayPrice: Story = { args: { price: { @@ -375,23 +213,3 @@ export const WethMaxDisplayPrice: Story = { }, }, }; -export const PrimaryPriceAndTooltipPrice: Story = { - name: "[Prices combination] Text price + Tooltip price", - args: { - price: { - currency: Currency.Usd, - value: 198900n, - }, - displaySize: PriceDisplaySize.Large, - tooltipTriggerToDisplayPriceInTooltip: ( - - ), - }, -}; diff --git a/apps/storybook.namekit.io/stories/Namekit/DisplayedPriceWithSymbol.stories.tsx b/apps/storybook.namekit.io/stories/Namekit/DisplayedPriceWithSymbol.stories.tsx new file mode 100644 index 000000000..19bdb3e28 --- /dev/null +++ b/apps/storybook.namekit.io/stories/Namekit/DisplayedPriceWithSymbol.stories.tsx @@ -0,0 +1,419 @@ +import { Currency, CurrencySymbology } from "@namehash/ens-utils"; +import { + CurrencySymbolPosition, + DisplayedPriceWithSymbol, + PriceDisplaySize, +} from "@namehash/namekit-react"; +import type { Meta, StoryObj } from "@storybook/react"; +import React from "react"; + +const meta: Meta = { + component: DisplayedPriceWithSymbol, + title: "Namekit/DisplayedPriceWithSymbol", + argTypes: { + price: { + control: "object", + }, + displaySize: { + options: Object.keys(PriceDisplaySize), + control: { type: "select" }, + }, + symbolPosition: { + options: Object.keys(CurrencySymbolPosition), + control: { type: "select" }, + }, + currencySymbology: { + options: Object.keys(CurrencySymbology), + control: { type: "select" }, + }, + tooltipTriggerToDisplayPriceInTooltip: { + control: "text", + }, + }, +}; + +declare global { + interface BigInt { + toJSON(): string; + } +} + +BigInt.prototype.toJSON = function () { + return `${this.toString()}n`; +}; + +export default meta; + +type Story = StoryObj; +export const DisplaySymbologyAtLeft: Story = { + args: { + price: { + currency: Currency.Usd, + value: 198900n, + }, + symbolPosition: CurrencySymbolPosition.Left, + displaySize: PriceDisplaySize.Micro, + }, +}; +export const DisplaySymbologyAtRight: Story = { + args: { + price: { + currency: Currency.Usd, + value: 198900n, + }, + symbolPosition: CurrencySymbolPosition.Right, + displaySize: PriceDisplaySize.Micro, + }, +}; +export const DisplaySymbolSymbologyForETH: Story = { + args: { + price: { + currency: Currency.Eth, + value: 1000000000000000000n, + }, + currencySymbology: CurrencySymbology.Symbol, + }, +}; +export const DisplayAcronymSymbologyForETH: Story = { + args: { + price: { + currency: Currency.Eth, + value: 1000000000000000000n, + }, + currencySymbology: CurrencySymbology.Acronym, + }, +}; +export const DisplaySymbolSymbologyForUSD: Story = { + args: { + price: { + currency: Currency.Usd, + value: 198900n, + }, + currencySymbology: CurrencySymbology.Symbol, + }, +}; +export const DisplayAcronymSymbologyForUSD: Story = { + args: { + price: { + currency: Currency.Usd, + value: 198900n, + }, + currencySymbology: CurrencySymbology.Acronym, + }, +}; +export const DisplaySymbolSymbologyForUSDC: Story = { + args: { + price: { + currency: Currency.Usdc, + value: 198900n, + }, + currencySymbology: CurrencySymbology.Symbol, + }, +}; +export const DisplayAcronymSymbologyForUSDC: Story = { + args: { + price: { + currency: Currency.Usdc, + value: 198900n, + }, + currencySymbology: CurrencySymbology.Acronym, + }, +}; +export const DisplaySymbolSymbologyForDAI: Story = { + args: { + price: { + currency: Currency.Dai, + value: 198900n, + }, + currencySymbology: CurrencySymbology.Symbol, + }, +}; +export const DisplayAcronymSymbologyForDAI: Story = { + args: { + price: { + currency: Currency.Dai, + value: 198900n, + }, + currencySymbology: CurrencySymbology.Acronym, + }, +}; +export const DisplaySymbolSymbologyForWETH: Story = { + args: { + price: { + currency: Currency.Weth, + value: 198900n, + }, + currencySymbology: CurrencySymbology.Symbol, + }, +}; +export const DisplayAcronymSymbologyForWETH: Story = { + args: { + price: { + currency: Currency.Weth, + value: 198900n, + }, + currencySymbology: CurrencySymbology.Acronym, + }, +}; +export const EthPriceWithRightAlignedSymbolInATooltip: Story = { + args: { + price: { + currency: Currency.Eth, + value: 1000000000000000000n, + }, + describeCurrencyInTooltip: false, + symbolPosition: CurrencySymbolPosition.Right, + tooltipTriggerToDisplayPriceInTooltip: ( +

My custom trigger

+ ), + }, +}; +export const EthPriceWithLeftAlignedSymbolInATooltip: Story = { + args: { + price: { + currency: Currency.Eth, + value: 1000000000000000000n, + }, + describeCurrencyInTooltip: false, + symbolPosition: CurrencySymbolPosition.Left, + tooltipTriggerToDisplayPriceInTooltip: ( +

My custom trigger

+ ), + }, +}; +export const EthPriceWithRightAlignedAcronymInATooltip: Story = { + args: { + price: { + currency: Currency.Eth, + value: 1000000000000000000n, + }, + describeCurrencyInTooltip: false, + symbolPosition: CurrencySymbolPosition.Right, + currencySymbology: CurrencySymbology.Acronym, + tooltipTriggerToDisplayPriceInTooltip: ( +

My custom trigger

+ ), + }, +}; +export const EthPriceWithLeftAlignedAcronymInATooltip: Story = { + args: { + price: { + currency: Currency.Eth, + value: 1000000000000000000n, + }, + describeCurrencyInTooltip: false, + symbolPosition: CurrencySymbolPosition.Left, + currencySymbology: CurrencySymbology.Acronym, + tooltipTriggerToDisplayPriceInTooltip: ( +

My custom trigger

+ ), + }, +}; +export const EthPriceWithSymbolAndCurrencyTooltip: Story = { + args: { + price: { + currency: Currency.Eth, + value: 1000000000000000000n, + }, + }, +}; +export const EthPriceWithSymbolWithoutCurrencyTooltip: Story = { + args: { + price: { + currency: Currency.Eth, + value: 1000000000000000000n, + }, + describeCurrencyInTooltip: false, + }, +}; +export const EthPriceWithAcronymAndCurrencyTooltip: Story = { + args: { + price: { + currency: Currency.Eth, + value: 1000000000000000000n, + }, + currencySymbology: CurrencySymbology.Acronym, + }, +}; +export const EthPriceWithAcronymWithoutCurrencyTooltip: Story = { + args: { + price: { + currency: Currency.Eth, + value: 1000000000000000000n, + }, + describeCurrencyInTooltip: false, + currencySymbology: CurrencySymbology.Acronym, + }, +}; +export const LargePriceDisplaySizeForUSD: Story = { + args: { + price: { + currency: Currency.Usd, + value: 198900n, + }, + displaySize: PriceDisplaySize.Large, + }, +}; +export const LargePriceDisplaySizeForWETH: Story = { + args: { + price: { + currency: Currency.Weth, + value: 198900n, + }, + displaySize: PriceDisplaySize.Large, + }, +}; +export const MediumPriceDisplaySizeForUSD: Story = { + args: { + price: { + currency: Currency.Usd, + value: 198900n, + }, + displaySize: PriceDisplaySize.Medium, + }, +}; +export const MediumPriceDisplaySizeForWETH: Story = { + args: { + price: { + currency: Currency.Weth, + value: 198900n, + }, + displaySize: PriceDisplaySize.Medium, + }, +}; +export const SmallPriceDisplaySizeForUSD: Story = { + args: { + price: { + currency: Currency.Usd, + value: 198900n, + }, + displaySize: PriceDisplaySize.Small, + }, +}; +export const SmallPriceDisplaySizeForWETH: Story = { + args: { + price: { + currency: Currency.Weth, + value: 198900n, + }, + displaySize: PriceDisplaySize.Small, + }, +}; +export const MicroPriceDisplaySizeForUSD: Story = { + args: { + price: { + currency: Currency.Usd, + value: 198900n, + }, + displaySize: PriceDisplaySize.Micro, + }, +}; +export const MicroPriceDisplaySizeForWETH: Story = { + args: { + price: { + currency: Currency.Weth, + value: 198900n, + }, + displaySize: PriceDisplaySize.Micro, + }, +}; +export const EthMinDisplayPrice: Story = { + args: { + price: { + currency: Currency.Eth, + value: 100000000000000n, + }, + }, +}; +export const EthMaxDisplayPrice: Story = { + args: { + price: { + currency: Currency.Eth, + value: 10000000000000000000000000n, + }, + }, +}; +export const UsdMinDisplayPrice: Story = { + args: { + price: { + currency: Currency.Usd, + value: 1n, + }, + }, +}; +export const UsdMaxDisplayPrice: Story = { + args: { + price: { + currency: Currency.Usd, + value: 1000000000000000000n, + }, + }, +}; +export const UsdcMinDisplayPrice: Story = { + args: { + price: { + currency: Currency.Usdc, + value: 1n, + }, + }, +}; +export const UsdcMaxDisplayPrice: Story = { + args: { + price: { + currency: Currency.Usdc, + value: 1000000000000000000n, + }, + }, +}; +export const DaiMinDisplayPrice: Story = { + args: { + price: { + currency: Currency.Dai, + value: 1n, + }, + }, +}; +export const DaiMaxDisplayPrice: Story = { + args: { + price: { + currency: Currency.Dai, + value: 10000000000000000000000000n, + }, + }, +}; +export const WethMinDisplayPrice: Story = { + args: { + price: { + currency: Currency.Weth, + value: 1n, + }, + }, +}; +export const WethMaxDisplayPrice: Story = { + args: { + price: { + currency: Currency.Weth, + value: 1000000000000000000000000n, + }, + }, +}; +// export const PrimaryPriceAndTooltipPrice: Story = { +// name: "[Prices combination] Text price + Tooltip price", +// args: { +// price: { +// currency: Currency.Usd, +// value: 198900n, +// }, +// displaySize: PriceDisplaySize.Large, +// tooltipTriggerToDisplayPriceInTooltip: ( +// +// ), +// }, +// }; diff --git a/packages/ens-utils/src/price.ts b/packages/ens-utils/src/price.ts index 14de44f0a..69fcfa165 100644 --- a/packages/ens-utils/src/price.ts +++ b/packages/ens-utils/src/price.ts @@ -128,7 +128,7 @@ export const multiplyPriceByNumber = (price1: Price, price2: number): Price => { }; }; -export const PriceSymbology = { +export const CurrencySymbology = { /** * The price will be displayed with the currency's acronym (e.g. USD). */ @@ -138,19 +138,34 @@ export const PriceSymbology = { */ Symbol: "Symbol", } as const; -export type PriceSymbology = - (typeof PriceSymbology)[keyof typeof PriceSymbology]; +export type CurrencySymbology = + (typeof CurrencySymbology)[keyof typeof CurrencySymbology]; + +/** + * Returns a string containing the currency's symbol or acronym. + * @param currency: Currency. The currency to get the symbology for (e.g. Currency.Eth) + * @param symbology: CurrencySymbology. The symbology to use (e.g. CurrencySymbology.Symbol) + * @returns: string. The currency's symbol or acronym (e.g. "$" or "USD") + */ +export const getCurrencySymbology = ( + currency: Currency, + symbology: CurrencySymbology, +): string => { + return symbology === CurrencySymbology.Acronym + ? PriceCurrencyFormat[currency].Acronym + : PriceCurrencyFormat[currency].Symbol; +}; export const formattedPrice = ({ price, - withPrefix = false, withSufix = false, - symbology = PriceSymbology.Symbol, + withPrefix = false, + symbology = CurrencySymbology.Symbol, }: { price: Price; withPrefix?: boolean; withSufix?: boolean; - symbology?: PriceSymbology; + symbology?: CurrencySymbology; }): string => { let formattedAmount = ""; const valueConsideringDecimals = ( @@ -200,14 +215,10 @@ export const formattedPrice = ({ } const prefixUnit = withPrefix - ? symbology === PriceSymbology.Acronym - ? PriceCurrencyFormat[price.currency].Acronym - : PriceCurrencyFormat[price.currency].Symbol + ? getCurrencySymbology(price.currency, symbology) : ""; const postfixUnit = withSufix - ? symbology === PriceSymbology.Acronym - ? PriceCurrencyFormat[price.currency].Acronym - : PriceCurrencyFormat[price.currency].Symbol + ? getCurrencySymbology(price.currency, symbology) : ""; let priceDisplay = diff --git a/packages/namekit-react/src/components/DisplayedPrice.tsx b/packages/namekit-react/src/components/DisplayedPrice.tsx index 7b6c9e833..5ac0f4dc4 100644 --- a/packages/namekit-react/src/components/DisplayedPrice.tsx +++ b/packages/namekit-react/src/components/DisplayedPrice.tsx @@ -1,31 +1,8 @@ -import { - Currency, - type Price, - formattedPrice, - PriceCurrencyFormat, - PriceSymbology, -} from "@namehash/ens-utils"; +import { type Price, formattedPrice } from "@namehash/ens-utils"; import React from "react"; -import { - CurrencySymbol, - CurrencySymbolSize, -} from "./CurrencySymbol/CurrencySymbol"; import cc from "classcat"; import { Tooltip } from "./Tooltip"; -export const CurrencySymbolPosition = { - /** - * Display the currency symbol to the left of the price. (e.g. $1.00) - */ - Left: "nk-mr-1.5", - /** - * Display the currency symbol to the right of the price. (e.g. 1.00$) - */ - Right: "nk-ml-1.5", -} as const; -export type CurrencySymbolPosition = - (typeof CurrencySymbolPosition)[keyof typeof CurrencySymbolPosition]; - export const PriceDisplaySize = { Micro: "nk-text-[12px] md:nk-text-[14px] nk-font-normal", Small: "nk-text-[14px] nk-font-semibold", @@ -35,35 +12,16 @@ export const PriceDisplaySize = { export type PriceDisplaySize = (typeof PriceDisplaySize)[keyof typeof PriceDisplaySize]; -/** - * A mapping from a `PriceDisplaySize` to a `CurrencySymbolSize`. - * This is useful for determining the size of the currency symbol to display - * for a given price display size. e.g. as needed in DisplayedPrice, when a - * currency symbol is displayed alongside a price and the user can define - * the size of the price display. This way both price display size and - * currency symbol size can be controlled by the same prop, always - * guaranteeing that they are displayed with aligned sizes. - * @param priceDisplaySize: PriceDisplaySize. The size of the price display. - * @returns CurrencySymbolSize. The size of the currency symbol to display. - */ -export const getCurrencySymbolSize = ( - priceDisplaySize: PriceDisplaySize, -): CurrencySymbolSize => { - switch (priceDisplaySize) { - case PriceDisplaySize.Micro: - case PriceDisplaySize.Small: - return CurrencySymbolSize.Small; - case PriceDisplaySize.Medium: - case PriceDisplaySize.Large: - return CurrencySymbolSize.Large; - } -}; - export interface DisplayedPriceProps { - // The price to be displayed + /** + * The price to be displayed + * @example { currency: Currency.Eth, value: 1000000000000000000n } + */ price: Price; - // Wether to display a currency symbology as its acronym or symbol - currencySymbology?: PriceSymbology; + /** + * The currency symbol to display alongside the price. + */ + symbol: React.ReactNode; /** * The position of the currency symbol relative to the price. * Defaults to `CurrencySymbolPosition.Left`. @@ -71,26 +29,22 @@ export interface DisplayedPriceProps { * If `CurrencySymbolPosition.Left`, the currency symbol will be displayed to the left of the price. * If `CurrencySymbolPosition.Right`, the currency symbol will be displayed to the right of the price. */ - symbolPosition?: CurrencySymbolPosition; // The size of the price display displaySize?: PriceDisplaySize; - // Wether or not to display the name of the currency in a tooltip when its symbol is hovered - describeCurrencyInTooltip?: boolean; - // Whenever below prop is defined, the price is displayed inside a Tooltip which is triggered by the below content + /** + * Whenever below prop is defined, the price will be + * displayed inside a Tooltip and the below content + * will be the trigger of this Tooltip displaying. + */ tooltipTriggerToDisplayPriceInTooltip?: React.ReactNode; } export const DisplayedPrice = ({ price, - describeCurrencyInTooltip = true, + symbol, displaySize = PriceDisplaySize.Small, tooltipTriggerToDisplayPriceInTooltip, - currencySymbology = PriceSymbology.Symbol, - symbolPosition = CurrencySymbolPosition.Left, }: DisplayedPriceProps) => { - const priceDisplaySizeAsCurrencyDisplaySize = - getCurrencySymbolSize(displaySize); - const displayedPrice = (

{formattedPrice({ price })}

- {currencySymbology === PriceSymbology.Symbol && ( -
- -
- )} - - {currencySymbology === PriceSymbology.Acronym && ( - <> - {describeCurrencyInTooltip ? ( -
- {PriceCurrencyFormat[price.currency].Acronym}

} - > - { - PriceCurrencyFormat[price.currency] - .ExtendedCurrencyNameSingular - } - -
- ) : ( -

- {PriceCurrencyFormat[price.currency].Acronym} -

- )} - - )} + {symbol}
); @@ -152,15 +65,13 @@ export const DisplayedPrice = ({ <> {price ? (
-
-

+

+

{formattedPrice({ - price: price, - symbology: currencySymbology, - withPrefix: currencySymbology === PriceSymbology.Symbol, - withSufix: currencySymbology === PriceSymbology.Acronym, + price, })}

+ {symbol}
) : ( diff --git a/packages/namekit-react/src/components/DisplayedPriceWithSymbol.tsx b/packages/namekit-react/src/components/DisplayedPriceWithSymbol.tsx new file mode 100644 index 000000000..fcc35d56e --- /dev/null +++ b/packages/namekit-react/src/components/DisplayedPriceWithSymbol.tsx @@ -0,0 +1,168 @@ +import { + Currency, + CurrencySymbology, + PriceCurrencyFormat, + getCurrencySymbology, +} from "@namehash/ens-utils"; +import React from "react"; +import { + CurrencySymbol, + CurrencySymbolSize, +} from "./CurrencySymbol/CurrencySymbol"; +import cc from "classcat"; +import { Tooltip } from "./Tooltip"; +import { + DisplayedPrice, + PriceDisplaySize, + DisplayedPriceProps, +} from "./DisplayedPrice"; + +export const CurrencySymbolPosition = { + /** + * Display the currency symbol to the left of the price. (e.g. $1.00) + */ + Left: "nk-mr-1.5", + /** + * Display the currency symbol to the right of the price. (e.g. 1.00$) + */ + Right: "nk-ml-1.5", +} as const; +export type CurrencySymbolPosition = + (typeof CurrencySymbolPosition)[keyof typeof CurrencySymbolPosition]; + +export interface DisplayedPriceWithSymbolProps extends DisplayedPriceProps { + // Wether to display a currency symbology as its acronym or symbol + currencySymbology?: CurrencySymbology; + /** + * The position of the currency symbol relative to the price. + * Defaults to `CurrencySymbolPosition.Left`. + * + * If `CurrencySymbolPosition.Left`, the currency symbol will be displayed to the left of the price. + * If `CurrencySymbolPosition.Right`, the currency symbol will be displayed to the right of the price. + */ + symbolPosition?: CurrencySymbolPosition; + // Wether or not to display the name of the currency in a tooltip when its symbol is hovered + describeCurrencyInTooltip?: boolean; +} + +/** + * A mapping from a `PriceDisplaySize` to a `CurrencySymbolSize`. + * This is useful for determining the size of the currency symbol to display + * for a given price display size. e.g. as needed in DisplayedPrice, when a + * currency symbol is displayed alongside a price and the user can define + * the size of the price display. This way both price display size and + * currency symbol size can be controlled by the same prop, always + * guaranteeing that they are displayed with aligned sizes. + * @param priceDisplaySize: PriceDisplaySize. The size of the price display. + * @returns CurrencySymbolSize. The size of the currency symbol to display. + */ +export const getCurrencySymbolSize = ( + priceDisplaySize: PriceDisplaySize, +): CurrencySymbolSize => { + switch (priceDisplaySize) { + case PriceDisplaySize.Micro: + case PriceDisplaySize.Small: + return CurrencySymbolSize.Small; + case PriceDisplaySize.Medium: + case PriceDisplaySize.Large: + return CurrencySymbolSize.Large; + } +}; + +export const DisplayedPriceWithSymbol = ({ + currencySymbology = CurrencySymbology.Symbol, + symbolPosition = CurrencySymbolPosition.Left, + displaySize = PriceDisplaySize.Small, + describeCurrencyInTooltip = true, + ...props +}: DisplayedPriceWithSymbolProps) => { + const priceDisplaySizeAsCurrencyDisplaySize = + getCurrencySymbolSize(displaySize); + + const displayedPriceWithSymbol = ( + + {currencySymbology === CurrencySymbology.Symbol && ( +
+ +
+ )} + + {currencySymbology === CurrencySymbology.Acronym && ( + <> + {describeCurrencyInTooltip ? ( +
+ {PriceCurrencyFormat[props.price.currency].Acronym}

+ } + > + { + PriceCurrencyFormat[props.price.currency] + .ExtendedCurrencyNameSingular + } + +
+ ) : ( +

+ {PriceCurrencyFormat[props.price.currency].Acronym} +

+ )} + + )} + + } + /> + ); + + const displayedPriceWithSymbolInATooltip = ( + +
+ {getCurrencySymbology(props.price.currency, currencySymbology)} +
+ + } + /> + ); + + return props.tooltipTriggerToDisplayPriceInTooltip + ? displayedPriceWithSymbolInATooltip + : displayedPriceWithSymbol; +}; diff --git a/packages/namekit-react/src/index.ts b/packages/namekit-react/src/index.ts index 1d40d4038..89c93b79b 100644 --- a/packages/namekit-react/src/index.ts +++ b/packages/namekit-react/src/index.ts @@ -16,3 +16,4 @@ export * from "./components/Link"; export * from "./components/Tooltip"; export * from "./components/CurrencySymbol/CurrencySymbol"; export * from "./components/DisplayedPrice"; +export * from "./components/DisplayedPriceWithSymbol"; From 9d082f4221f8fe41ada6b9b60459e3f2714f3c44 Mon Sep 17 00:00:00 2001 From: FrancoAguzzi Date: Sat, 24 Aug 2024 09:31:38 -0300 Subject: [PATCH 10/43] feat: [SC-25297] Refine DisplayedPrice | Create DomainCardPrice --- .../Namekit/DisplayedPrice.stories.tsx | 539 +++++++++++++++++- .../DisplayedPriceWithSymbol.stories.tsx | 419 -------------- .../Namekit/DomainCardPrice.stories.tsx | 90 +++ .../src/components/DisplayedPrice.tsx | 66 +-- .../components/DisplayedPriceWithSymbol.tsx | 168 ------ .../src/components/DomainCardPrice.tsx | 41 ++ packages/namekit-react/src/index.ts | 2 +- 7 files changed, 667 insertions(+), 658 deletions(-) delete mode 100644 apps/storybook.namekit.io/stories/Namekit/DisplayedPriceWithSymbol.stories.tsx create mode 100644 apps/storybook.namekit.io/stories/Namekit/DomainCardPrice.stories.tsx delete mode 100644 packages/namekit-react/src/components/DisplayedPriceWithSymbol.tsx create mode 100644 packages/namekit-react/src/components/DomainCardPrice.tsx diff --git a/apps/storybook.namekit.io/stories/Namekit/DisplayedPrice.stories.tsx b/apps/storybook.namekit.io/stories/Namekit/DisplayedPrice.stories.tsx index 2e100ad65..b78af54b6 100644 --- a/apps/storybook.namekit.io/stories/Namekit/DisplayedPrice.stories.tsx +++ b/apps/storybook.namekit.io/stories/Namekit/DisplayedPrice.stories.tsx @@ -1,6 +1,15 @@ -import { DisplayedPrice, PriceDisplaySize } from "@namehash/namekit-react"; +import { + CurrencySymbol, + CurrencySymbolPosition, + DisplayedPrice, + PriceDisplaySize, +} from "@namehash/namekit-react"; import type { Meta, StoryObj } from "@storybook/react"; -import { Currency } from "@namehash/ens-utils"; +import { + Currency, + CurrencySymbology, + getCurrencySymbology, +} from "@namehash/ens-utils"; import React from "react"; const meta: Meta = { @@ -14,9 +23,6 @@ const meta: Meta = { options: Object.keys(PriceDisplaySize), control: { type: "select" }, }, - tooltipTriggerToDisplayPriceInTooltip: { - control: "text", - }, }, }; @@ -34,26 +40,15 @@ export default meta; type Story = StoryObj; -export const EthPrice: Story = { - args: { - price: { - currency: Currency.Eth, - value: 1000000000000000000n, - }, - }, -}; -export const EthPriceInATooltip: Story = { +export const EthPriceWithoutSymbol: Story = { args: { price: { currency: Currency.Eth, value: 1000000000000000000n, }, - tooltipTriggerToDisplayPriceInTooltip: ( -

My custom trigger

- ), }, }; -export const UsdPrice: Story = { +export const UsdPriceWithoutSymbol: Story = { args: { price: { currency: Currency.Usd, @@ -61,7 +56,7 @@ export const UsdPrice: Story = { }, }, }; -export const LargePriceDisplaySizeForUSD: Story = { +export const LargeUsdPrice: Story = { args: { price: { currency: Currency.Usd, @@ -70,16 +65,16 @@ export const LargePriceDisplaySizeForUSD: Story = { displaySize: PriceDisplaySize.Large, }, }; -export const LargePriceDisplaySizeForWETH: Story = { +export const LargeEthPrice: Story = { args: { price: { - currency: Currency.Weth, + currency: Currency.Eth, value: 198900n, }, displaySize: PriceDisplaySize.Large, }, }; -export const MediumPriceDisplaySizeForUSD: Story = { +export const MediumUsdPrice: Story = { args: { price: { currency: Currency.Usd, @@ -88,16 +83,16 @@ export const MediumPriceDisplaySizeForUSD: Story = { displaySize: PriceDisplaySize.Medium, }, }; -export const MediumPriceDisplaySizeForWETH: Story = { +export const MediumEthPrice: Story = { args: { price: { - currency: Currency.Weth, + currency: Currency.Eth, value: 198900n, }, displaySize: PriceDisplaySize.Medium, }, }; -export const SmallPriceDisplaySizeForUSD: Story = { +export const SmallUsdPrice: Story = { args: { price: { currency: Currency.Usd, @@ -106,16 +101,16 @@ export const SmallPriceDisplaySizeForUSD: Story = { displaySize: PriceDisplaySize.Small, }, }; -export const SmallPriceDisplaySizeForWETH: Story = { +export const SmallEthPrice: Story = { args: { price: { - currency: Currency.Weth, + currency: Currency.Eth, value: 198900n, }, displaySize: PriceDisplaySize.Small, }, }; -export const MicroPriceDisplaySizeForUSD: Story = { +export const MicroUsdPrice: Story = { args: { price: { currency: Currency.Usd, @@ -124,10 +119,10 @@ export const MicroPriceDisplaySizeForUSD: Story = { displaySize: PriceDisplaySize.Micro, }, }; -export const MicroPriceDisplaySizeForWETH: Story = { +export const MicroEthPrice: Story = { args: { price: { - currency: Currency.Weth, + currency: Currency.Eth, value: 198900n, }, displaySize: PriceDisplaySize.Micro, @@ -213,3 +208,487 @@ export const WethMaxDisplayPrice: Story = { }, }, }; +export const UsdPriceAndSymbolExample: Story = { + args: { + price: { + currency: Currency.Usd, + value: 198900n, + }, + symbol: ( +

+ You can define your custom symbology by informing a React.ReactNode to + the "symbol" prop! +

+ ), + }, +}; +export const UsdPriceWithSymbol: Story = { + args: { + price: { + currency: Currency.Usd, + value: 198900n, + }, + symbol: ( + + ), + symbolPosition: CurrencySymbolPosition.Left, + }, +}; +export const UsdPriceWithAcronym: Story = { + args: { + price: { + currency: Currency.Usd, + value: 198900n, + }, + symbol: ( + + {getCurrencySymbology(Currency.Usd, CurrencySymbology.Acronym)} + + ), + symbolPosition: CurrencySymbolPosition.Left, + }, +}; +export const UsdPriceWithSymbolOnRight: Story = { + args: { + price: { + currency: Currency.Usd, + value: 198900n, + }, + symbol: ( + + ), + symbolPosition: CurrencySymbolPosition.Right, + }, +}; +export const UsdPriceWithAcronymOnRight: Story = { + args: { + price: { + currency: Currency.Usd, + value: 198900n, + }, + symbol: ( + + {getCurrencySymbology(Currency.Usd, CurrencySymbology.Acronym)} + + ), + symbolPosition: CurrencySymbolPosition.Right, + }, +}; +export const EthPriceWithSymbol: Story = { + args: { + price: { + currency: Currency.Eth, + value: 1000000000000000000n, + }, + symbol: ( + + ), + symbolPosition: CurrencySymbolPosition.Left, + }, +}; +export const EthPriceWithAcronym: Story = { + args: { + price: { + currency: Currency.Eth, + value: 1000000000000000000n, + }, + symbol: ( + + {getCurrencySymbology(Currency.Eth, CurrencySymbology.Acronym)} + + ), + symbolPosition: CurrencySymbolPosition.Left, + }, +}; +export const EthPriceWithSymbolOnRight: Story = { + args: { + price: { + currency: Currency.Eth, + value: 1000000000000000000n, + }, + symbol: ( + + ), + symbolPosition: CurrencySymbolPosition.Right, + }, +}; +export const EthPriceWithAcronymOnRight: Story = { + args: { + price: { + currency: Currency.Eth, + value: 1000000000000000000n, + }, + symbol: ( + + {getCurrencySymbology(Currency.Eth, CurrencySymbology.Acronym)} + + ), + symbolPosition: CurrencySymbolPosition.Right, + }, +}; +export const EthPriceWithCurrencySymbol: Story = { + args: { + price: { + currency: Currency.Eth, + value: 1000000000000000000n, + }, + symbol: ( + + ), + }, +}; +export const WethPriceWithCurrencySymbol: Story = { + args: { + price: { + currency: Currency.Weth, + value: 1000000000000000000n, + }, + symbol: ( + + ), + }, +}; +export const DaiPriceWithCurrencySymbol: Story = { + args: { + price: { + currency: Currency.Dai, + value: 1000000000000000000n, + }, + symbol: ( + + ), + }, +}; +export const UsdcPriceWithCurrencySymbol: Story = { + args: { + price: { + currency: Currency.Usdc, + value: 198900000n, + }, + symbol: ( + + ), + }, +}; +export const UsdPriceWithCurrencySymbol: Story = { + args: { + price: { + currency: Currency.Usd, + value: 198900n, + }, + symbol: ( + + ), + }, +}; +export const UsdPriceWithCurrencySymbolWithoutTooltipDescription: Story = { + args: { + price: { + currency: Currency.Usd, + value: 198900n, + }, + symbol: ( + + ), + }, +}; +export const EthMinDisplayPriceWithAcronym: Story = { + args: { + price: { + currency: Currency.Eth, + value: 100000000000000n, + }, + symbol: ( + + {getCurrencySymbology(Currency.Eth, CurrencySymbology.Acronym)} + + ), + }, +}; +export const EthMaxDisplayPriceWithAcronym: Story = { + args: { + price: { + currency: Currency.Eth, + value: 10000000000000000000000000n, + }, + symbol: ( + + {getCurrencySymbology(Currency.Eth, CurrencySymbology.Acronym)} + + ), + }, +}; +export const UsdMinDisplayPriceWithAcronym: Story = { + args: { + price: { + currency: Currency.Usd, + value: 1n, + }, + symbol: ( + + {getCurrencySymbology(Currency.Eth, CurrencySymbology.Acronym)} + + ), + }, +}; +export const UsdMaxDisplayPriceWithAcronym: Story = { + args: { + price: { + currency: Currency.Usd, + value: 1000000000000000000n, + }, + symbol: ( + + {getCurrencySymbology(Currency.Eth, CurrencySymbology.Acronym)} + + ), + }, +}; +export const UsdcMinDisplayPriceWithAcronym: Story = { + args: { + price: { + currency: Currency.Usdc, + value: 1n, + }, + symbol: ( + + {getCurrencySymbology(Currency.Eth, CurrencySymbology.Acronym)} + + ), + }, +}; +export const UsdcMaxDisplayPriceWithAcronym: Story = { + args: { + price: { + currency: Currency.Usdc, + value: 1000000000000000000n, + }, + symbol: ( + + {getCurrencySymbology(Currency.Eth, CurrencySymbology.Acronym)} + + ), + }, +}; +export const DaiMinDisplayPriceWithAcronym: Story = { + args: { + price: { + currency: Currency.Dai, + value: 1n, + }, + symbol: ( + + {getCurrencySymbology(Currency.Eth, CurrencySymbology.Acronym)} + + ), + }, +}; +export const DaiMaxDisplayPriceWithAcronym: Story = { + args: { + price: { + currency: Currency.Dai, + value: 10000000000000000000000000n, + }, + symbol: ( + + {getCurrencySymbology(Currency.Eth, CurrencySymbology.Acronym)} + + ), + }, +}; +export const WethMinDisplayPriceWithAcronym: Story = { + args: { + price: { + currency: Currency.Weth, + value: 1n, + }, + symbol: ( + + {getCurrencySymbology(Currency.Eth, CurrencySymbology.Acronym)} + + ), + }, +}; +export const WethMaxDisplayPriceWithAcronym: Story = { + args: { + price: { + currency: Currency.Weth, + value: 1000000000000000000000000n, + }, + symbol: ( + + {getCurrencySymbology(Currency.Eth, CurrencySymbology.Acronym)} + + ), + }, +}; +export const EthMinDisplayPriceWithSymbol: Story = { + args: { + price: { + currency: Currency.Eth, + value: 100000000000000n, + }, + symbol: ( + + ), + }, +}; +export const EthMaxDisplayPriceWithSymbol: Story = { + args: { + price: { + currency: Currency.Eth, + value: 10000000000000000000000000n, + }, + symbol: ( + + ), + }, +}; +export const UsdMinDisplayPriceWithSymbol: Story = { + args: { + price: { + currency: Currency.Usd, + value: 1n, + }, + symbol: ( + + ), + }, +}; +export const UsdMaxDisplayPriceWithSymbol: Story = { + args: { + price: { + currency: Currency.Usd, + value: 1000000000000000000n, + }, + symbol: ( + + ), + }, +}; +export const UsdcMinDisplayPriceWithSymbol: Story = { + args: { + price: { + currency: Currency.Usdc, + value: 1n, + }, + symbol: ( + + ), + }, +}; +export const UsdcMaxDisplayPriceWithSymbol: Story = { + args: { + price: { + currency: Currency.Usdc, + value: 1000000000000000000n, + }, + symbol: ( + + ), + }, +}; +export const DaiMinDisplayPriceWithSymbol: Story = { + args: { + price: { + currency: Currency.Dai, + value: 1n, + }, + symbol: ( + + ), + }, +}; +export const DaiMaxDisplayPriceWithSymbol: Story = { + args: { + price: { + currency: Currency.Dai, + value: 10000000000000000000000000n, + }, + symbol: ( + + ), + }, +}; +export const WethMinDisplayPriceWithSymbol: Story = { + args: { + price: { + currency: Currency.Weth, + value: 1n, + }, + symbol: ( + + ), + }, +}; +export const WethMaxDisplayPriceWithSymbol: Story = { + args: { + price: { + currency: Currency.Weth, + value: 1000000000000000000000000n, + }, + symbol: ( + + ), + }, +}; diff --git a/apps/storybook.namekit.io/stories/Namekit/DisplayedPriceWithSymbol.stories.tsx b/apps/storybook.namekit.io/stories/Namekit/DisplayedPriceWithSymbol.stories.tsx deleted file mode 100644 index 19bdb3e28..000000000 --- a/apps/storybook.namekit.io/stories/Namekit/DisplayedPriceWithSymbol.stories.tsx +++ /dev/null @@ -1,419 +0,0 @@ -import { Currency, CurrencySymbology } from "@namehash/ens-utils"; -import { - CurrencySymbolPosition, - DisplayedPriceWithSymbol, - PriceDisplaySize, -} from "@namehash/namekit-react"; -import type { Meta, StoryObj } from "@storybook/react"; -import React from "react"; - -const meta: Meta = { - component: DisplayedPriceWithSymbol, - title: "Namekit/DisplayedPriceWithSymbol", - argTypes: { - price: { - control: "object", - }, - displaySize: { - options: Object.keys(PriceDisplaySize), - control: { type: "select" }, - }, - symbolPosition: { - options: Object.keys(CurrencySymbolPosition), - control: { type: "select" }, - }, - currencySymbology: { - options: Object.keys(CurrencySymbology), - control: { type: "select" }, - }, - tooltipTriggerToDisplayPriceInTooltip: { - control: "text", - }, - }, -}; - -declare global { - interface BigInt { - toJSON(): string; - } -} - -BigInt.prototype.toJSON = function () { - return `${this.toString()}n`; -}; - -export default meta; - -type Story = StoryObj; -export const DisplaySymbologyAtLeft: Story = { - args: { - price: { - currency: Currency.Usd, - value: 198900n, - }, - symbolPosition: CurrencySymbolPosition.Left, - displaySize: PriceDisplaySize.Micro, - }, -}; -export const DisplaySymbologyAtRight: Story = { - args: { - price: { - currency: Currency.Usd, - value: 198900n, - }, - symbolPosition: CurrencySymbolPosition.Right, - displaySize: PriceDisplaySize.Micro, - }, -}; -export const DisplaySymbolSymbologyForETH: Story = { - args: { - price: { - currency: Currency.Eth, - value: 1000000000000000000n, - }, - currencySymbology: CurrencySymbology.Symbol, - }, -}; -export const DisplayAcronymSymbologyForETH: Story = { - args: { - price: { - currency: Currency.Eth, - value: 1000000000000000000n, - }, - currencySymbology: CurrencySymbology.Acronym, - }, -}; -export const DisplaySymbolSymbologyForUSD: Story = { - args: { - price: { - currency: Currency.Usd, - value: 198900n, - }, - currencySymbology: CurrencySymbology.Symbol, - }, -}; -export const DisplayAcronymSymbologyForUSD: Story = { - args: { - price: { - currency: Currency.Usd, - value: 198900n, - }, - currencySymbology: CurrencySymbology.Acronym, - }, -}; -export const DisplaySymbolSymbologyForUSDC: Story = { - args: { - price: { - currency: Currency.Usdc, - value: 198900n, - }, - currencySymbology: CurrencySymbology.Symbol, - }, -}; -export const DisplayAcronymSymbologyForUSDC: Story = { - args: { - price: { - currency: Currency.Usdc, - value: 198900n, - }, - currencySymbology: CurrencySymbology.Acronym, - }, -}; -export const DisplaySymbolSymbologyForDAI: Story = { - args: { - price: { - currency: Currency.Dai, - value: 198900n, - }, - currencySymbology: CurrencySymbology.Symbol, - }, -}; -export const DisplayAcronymSymbologyForDAI: Story = { - args: { - price: { - currency: Currency.Dai, - value: 198900n, - }, - currencySymbology: CurrencySymbology.Acronym, - }, -}; -export const DisplaySymbolSymbologyForWETH: Story = { - args: { - price: { - currency: Currency.Weth, - value: 198900n, - }, - currencySymbology: CurrencySymbology.Symbol, - }, -}; -export const DisplayAcronymSymbologyForWETH: Story = { - args: { - price: { - currency: Currency.Weth, - value: 198900n, - }, - currencySymbology: CurrencySymbology.Acronym, - }, -}; -export const EthPriceWithRightAlignedSymbolInATooltip: Story = { - args: { - price: { - currency: Currency.Eth, - value: 1000000000000000000n, - }, - describeCurrencyInTooltip: false, - symbolPosition: CurrencySymbolPosition.Right, - tooltipTriggerToDisplayPriceInTooltip: ( -

My custom trigger

- ), - }, -}; -export const EthPriceWithLeftAlignedSymbolInATooltip: Story = { - args: { - price: { - currency: Currency.Eth, - value: 1000000000000000000n, - }, - describeCurrencyInTooltip: false, - symbolPosition: CurrencySymbolPosition.Left, - tooltipTriggerToDisplayPriceInTooltip: ( -

My custom trigger

- ), - }, -}; -export const EthPriceWithRightAlignedAcronymInATooltip: Story = { - args: { - price: { - currency: Currency.Eth, - value: 1000000000000000000n, - }, - describeCurrencyInTooltip: false, - symbolPosition: CurrencySymbolPosition.Right, - currencySymbology: CurrencySymbology.Acronym, - tooltipTriggerToDisplayPriceInTooltip: ( -

My custom trigger

- ), - }, -}; -export const EthPriceWithLeftAlignedAcronymInATooltip: Story = { - args: { - price: { - currency: Currency.Eth, - value: 1000000000000000000n, - }, - describeCurrencyInTooltip: false, - symbolPosition: CurrencySymbolPosition.Left, - currencySymbology: CurrencySymbology.Acronym, - tooltipTriggerToDisplayPriceInTooltip: ( -

My custom trigger

- ), - }, -}; -export const EthPriceWithSymbolAndCurrencyTooltip: Story = { - args: { - price: { - currency: Currency.Eth, - value: 1000000000000000000n, - }, - }, -}; -export const EthPriceWithSymbolWithoutCurrencyTooltip: Story = { - args: { - price: { - currency: Currency.Eth, - value: 1000000000000000000n, - }, - describeCurrencyInTooltip: false, - }, -}; -export const EthPriceWithAcronymAndCurrencyTooltip: Story = { - args: { - price: { - currency: Currency.Eth, - value: 1000000000000000000n, - }, - currencySymbology: CurrencySymbology.Acronym, - }, -}; -export const EthPriceWithAcronymWithoutCurrencyTooltip: Story = { - args: { - price: { - currency: Currency.Eth, - value: 1000000000000000000n, - }, - describeCurrencyInTooltip: false, - currencySymbology: CurrencySymbology.Acronym, - }, -}; -export const LargePriceDisplaySizeForUSD: Story = { - args: { - price: { - currency: Currency.Usd, - value: 198900n, - }, - displaySize: PriceDisplaySize.Large, - }, -}; -export const LargePriceDisplaySizeForWETH: Story = { - args: { - price: { - currency: Currency.Weth, - value: 198900n, - }, - displaySize: PriceDisplaySize.Large, - }, -}; -export const MediumPriceDisplaySizeForUSD: Story = { - args: { - price: { - currency: Currency.Usd, - value: 198900n, - }, - displaySize: PriceDisplaySize.Medium, - }, -}; -export const MediumPriceDisplaySizeForWETH: Story = { - args: { - price: { - currency: Currency.Weth, - value: 198900n, - }, - displaySize: PriceDisplaySize.Medium, - }, -}; -export const SmallPriceDisplaySizeForUSD: Story = { - args: { - price: { - currency: Currency.Usd, - value: 198900n, - }, - displaySize: PriceDisplaySize.Small, - }, -}; -export const SmallPriceDisplaySizeForWETH: Story = { - args: { - price: { - currency: Currency.Weth, - value: 198900n, - }, - displaySize: PriceDisplaySize.Small, - }, -}; -export const MicroPriceDisplaySizeForUSD: Story = { - args: { - price: { - currency: Currency.Usd, - value: 198900n, - }, - displaySize: PriceDisplaySize.Micro, - }, -}; -export const MicroPriceDisplaySizeForWETH: Story = { - args: { - price: { - currency: Currency.Weth, - value: 198900n, - }, - displaySize: PriceDisplaySize.Micro, - }, -}; -export const EthMinDisplayPrice: Story = { - args: { - price: { - currency: Currency.Eth, - value: 100000000000000n, - }, - }, -}; -export const EthMaxDisplayPrice: Story = { - args: { - price: { - currency: Currency.Eth, - value: 10000000000000000000000000n, - }, - }, -}; -export const UsdMinDisplayPrice: Story = { - args: { - price: { - currency: Currency.Usd, - value: 1n, - }, - }, -}; -export const UsdMaxDisplayPrice: Story = { - args: { - price: { - currency: Currency.Usd, - value: 1000000000000000000n, - }, - }, -}; -export const UsdcMinDisplayPrice: Story = { - args: { - price: { - currency: Currency.Usdc, - value: 1n, - }, - }, -}; -export const UsdcMaxDisplayPrice: Story = { - args: { - price: { - currency: Currency.Usdc, - value: 1000000000000000000n, - }, - }, -}; -export const DaiMinDisplayPrice: Story = { - args: { - price: { - currency: Currency.Dai, - value: 1n, - }, - }, -}; -export const DaiMaxDisplayPrice: Story = { - args: { - price: { - currency: Currency.Dai, - value: 10000000000000000000000000n, - }, - }, -}; -export const WethMinDisplayPrice: Story = { - args: { - price: { - currency: Currency.Weth, - value: 1n, - }, - }, -}; -export const WethMaxDisplayPrice: Story = { - args: { - price: { - currency: Currency.Weth, - value: 1000000000000000000000000n, - }, - }, -}; -// export const PrimaryPriceAndTooltipPrice: Story = { -// name: "[Prices combination] Text price + Tooltip price", -// args: { -// price: { -// currency: Currency.Usd, -// value: 198900n, -// }, -// displaySize: PriceDisplaySize.Large, -// tooltipTriggerToDisplayPriceInTooltip: ( -// -// ), -// }, -// }; diff --git a/apps/storybook.namekit.io/stories/Namekit/DomainCardPrice.stories.tsx b/apps/storybook.namekit.io/stories/Namekit/DomainCardPrice.stories.tsx new file mode 100644 index 000000000..3ebcb7845 --- /dev/null +++ b/apps/storybook.namekit.io/stories/Namekit/DomainCardPrice.stories.tsx @@ -0,0 +1,90 @@ +import { + Currency, + CurrencySymbology, + getCurrencySymbology, + PriceCurrencyFormat, +} from "@namehash/ens-utils"; +import { CurrencySymbol, DomainCardPrice } from "@namehash/namekit-react"; +import type { Meta, StoryObj } from "@storybook/react"; +import React from "react"; + +const meta: Meta = { + component: DomainCardPrice, + title: "Namekit/DomainCardPrice", + argTypes: { + altPrice: { + control: "object", + }, + altPriceSymbology: { + options: Object.keys(CurrencySymbology), + control: { type: "select" }, + }, + }, +}; + +declare global { + interface BigInt { + toJSON(): string; + } +} + +BigInt.prototype.toJSON = function () { + return `${this.toString()}n`; +}; + +export default meta; + +type Story = StoryObj; + +export const EthPriceWithCurrencySymbolAndAnUsdAltPriceWithSymbolSymbology: Story = + { + args: { + price: { currency: Currency.Eth, value: 1000000000000000000n }, + symbol: ( + + ), + altPrice: { currency: Currency.Usd, value: 198900n }, + altPriceSymbology: CurrencySymbology.Symbol, + }, + }; +export const EthPriceWithCurrencySymbolAndAnUsdAltPriceWithAcronymSymbology: Story = + { + args: { + price: { currency: Currency.Eth, value: 1000000000000000000n }, + symbol: ( + + ), + altPrice: { currency: Currency.Usd, value: 198900n }, + altPriceSymbology: CurrencySymbology.Acronym, + }, + }; +export const EthPriceWithAcronymAndAnUsdAltPriceWithAcronymSymbology: Story = { + args: { + price: { currency: Currency.Eth, value: 1000000000000000000n }, + symbol: ( + + {getCurrencySymbology(Currency.Eth, CurrencySymbology.Acronym)} + + ), + altPrice: { currency: Currency.Usd, value: 198900n }, + altPriceSymbology: CurrencySymbology.Acronym, + }, +}; +export const EthPriceWithAcronymAndAnUsdAltPriceWithSymbolSymbology: Story = { + args: { + price: { currency: Currency.Eth, value: 1000000000000000000n }, + symbol: ( + + {getCurrencySymbology(Currency.Eth, CurrencySymbology.Acronym)} + + ), + altPrice: { currency: Currency.Usd, value: 198900n }, + altPriceSymbology: CurrencySymbology.Symbol, + }, +}; diff --git a/packages/namekit-react/src/components/DisplayedPrice.tsx b/packages/namekit-react/src/components/DisplayedPrice.tsx index 5ac0f4dc4..dfa09462c 100644 --- a/packages/namekit-react/src/components/DisplayedPrice.tsx +++ b/packages/namekit-react/src/components/DisplayedPrice.tsx @@ -1,7 +1,6 @@ import { type Price, formattedPrice } from "@namehash/ens-utils"; import React from "react"; import cc from "classcat"; -import { Tooltip } from "./Tooltip"; export const PriceDisplaySize = { Micro: "nk-text-[12px] md:nk-text-[14px] nk-font-normal", @@ -12,6 +11,19 @@ export const PriceDisplaySize = { export type PriceDisplaySize = (typeof PriceDisplaySize)[keyof typeof PriceDisplaySize]; +export const CurrencySymbolPosition = { + /** + * Display the currency symbol to the left of the price. (e.g. $1.00) + */ + Left: "nk-mr-1.5", + /** + * Display the currency symbol to the right of the price. (e.g. 1.00$) + */ + Right: "nk-ml-1.5", +} as const; +export type CurrencySymbolPosition = + (typeof CurrencySymbolPosition)[keyof typeof CurrencySymbolPosition]; + export interface DisplayedPriceProps { /** * The price to be displayed @@ -29,61 +41,35 @@ export interface DisplayedPriceProps { * If `CurrencySymbolPosition.Left`, the currency symbol will be displayed to the left of the price. * If `CurrencySymbolPosition.Right`, the currency symbol will be displayed to the right of the price. */ - // The size of the price display - displaySize?: PriceDisplaySize; + symbolPosition?: CurrencySymbolPosition; /** - * Whenever below prop is defined, the price will be - * displayed inside a Tooltip and the below content - * will be the trigger of this Tooltip displaying. + * The position of the currency symbol relative to the price. + * Defaults to `CurrencySymbolPosition.Left`. + * + * If `CurrencySymbolPosition.Left`, the currency symbol will be displayed to the left of the price. + * If `CurrencySymbolPosition.Right`, the currency symbol will be displayed to the right of the price. */ - tooltipTriggerToDisplayPriceInTooltip?: React.ReactNode; + displaySize?: PriceDisplaySize; } export const DisplayedPrice = ({ price, symbol, displaySize = PriceDisplaySize.Small, - tooltipTriggerToDisplayPriceInTooltip, + symbolPosition = CurrencySymbolPosition.Left, }: DisplayedPriceProps) => { const displayedPrice = (
-

{formattedPrice({ price })}

- - {symbol} -
- ); - - const displayedPriceInATooltip = ( -
-
- - <> - {price ? ( -
-
-

- {formattedPrice({ - price, - })} -

- {symbol} -
-
- ) : ( - <> - )} - - -
+ {symbolPosition === CurrencySymbolPosition.Left && symbol} +

{formattedPrice({ price })}

+ {symbolPosition === CurrencySymbolPosition.Right && symbol}
); - return tooltipTriggerToDisplayPriceInTooltip - ? displayedPriceInATooltip - : displayedPrice; + return displayedPrice; }; diff --git a/packages/namekit-react/src/components/DisplayedPriceWithSymbol.tsx b/packages/namekit-react/src/components/DisplayedPriceWithSymbol.tsx deleted file mode 100644 index fcc35d56e..000000000 --- a/packages/namekit-react/src/components/DisplayedPriceWithSymbol.tsx +++ /dev/null @@ -1,168 +0,0 @@ -import { - Currency, - CurrencySymbology, - PriceCurrencyFormat, - getCurrencySymbology, -} from "@namehash/ens-utils"; -import React from "react"; -import { - CurrencySymbol, - CurrencySymbolSize, -} from "./CurrencySymbol/CurrencySymbol"; -import cc from "classcat"; -import { Tooltip } from "./Tooltip"; -import { - DisplayedPrice, - PriceDisplaySize, - DisplayedPriceProps, -} from "./DisplayedPrice"; - -export const CurrencySymbolPosition = { - /** - * Display the currency symbol to the left of the price. (e.g. $1.00) - */ - Left: "nk-mr-1.5", - /** - * Display the currency symbol to the right of the price. (e.g. 1.00$) - */ - Right: "nk-ml-1.5", -} as const; -export type CurrencySymbolPosition = - (typeof CurrencySymbolPosition)[keyof typeof CurrencySymbolPosition]; - -export interface DisplayedPriceWithSymbolProps extends DisplayedPriceProps { - // Wether to display a currency symbology as its acronym or symbol - currencySymbology?: CurrencySymbology; - /** - * The position of the currency symbol relative to the price. - * Defaults to `CurrencySymbolPosition.Left`. - * - * If `CurrencySymbolPosition.Left`, the currency symbol will be displayed to the left of the price. - * If `CurrencySymbolPosition.Right`, the currency symbol will be displayed to the right of the price. - */ - symbolPosition?: CurrencySymbolPosition; - // Wether or not to display the name of the currency in a tooltip when its symbol is hovered - describeCurrencyInTooltip?: boolean; -} - -/** - * A mapping from a `PriceDisplaySize` to a `CurrencySymbolSize`. - * This is useful for determining the size of the currency symbol to display - * for a given price display size. e.g. as needed in DisplayedPrice, when a - * currency symbol is displayed alongside a price and the user can define - * the size of the price display. This way both price display size and - * currency symbol size can be controlled by the same prop, always - * guaranteeing that they are displayed with aligned sizes. - * @param priceDisplaySize: PriceDisplaySize. The size of the price display. - * @returns CurrencySymbolSize. The size of the currency symbol to display. - */ -export const getCurrencySymbolSize = ( - priceDisplaySize: PriceDisplaySize, -): CurrencySymbolSize => { - switch (priceDisplaySize) { - case PriceDisplaySize.Micro: - case PriceDisplaySize.Small: - return CurrencySymbolSize.Small; - case PriceDisplaySize.Medium: - case PriceDisplaySize.Large: - return CurrencySymbolSize.Large; - } -}; - -export const DisplayedPriceWithSymbol = ({ - currencySymbology = CurrencySymbology.Symbol, - symbolPosition = CurrencySymbolPosition.Left, - displaySize = PriceDisplaySize.Small, - describeCurrencyInTooltip = true, - ...props -}: DisplayedPriceWithSymbolProps) => { - const priceDisplaySizeAsCurrencyDisplaySize = - getCurrencySymbolSize(displaySize); - - const displayedPriceWithSymbol = ( - - {currencySymbology === CurrencySymbology.Symbol && ( -
- -
- )} - - {currencySymbology === CurrencySymbology.Acronym && ( - <> - {describeCurrencyInTooltip ? ( -
- {PriceCurrencyFormat[props.price.currency].Acronym}

- } - > - { - PriceCurrencyFormat[props.price.currency] - .ExtendedCurrencyNameSingular - } - -
- ) : ( -

- {PriceCurrencyFormat[props.price.currency].Acronym} -

- )} - - )} - - } - /> - ); - - const displayedPriceWithSymbolInATooltip = ( - -
- {getCurrencySymbology(props.price.currency, currencySymbology)} -
- - } - /> - ); - - return props.tooltipTriggerToDisplayPriceInTooltip - ? displayedPriceWithSymbolInATooltip - : displayedPriceWithSymbol; -}; diff --git a/packages/namekit-react/src/components/DomainCardPrice.tsx b/packages/namekit-react/src/components/DomainCardPrice.tsx new file mode 100644 index 000000000..9096a875a --- /dev/null +++ b/packages/namekit-react/src/components/DomainCardPrice.tsx @@ -0,0 +1,41 @@ +import { DisplayedPrice, DisplayedPriceProps } from "./DisplayedPrice"; +import { + CurrencySymbology, + getCurrencySymbology, + Price, +} from "@namehash/ens-utils"; +import { Tooltip } from "./Tooltip"; +import React from "react"; + +interface DomainCardPriceProps extends DisplayedPriceProps { + altPrice: Price; + altPriceSymbology: CurrencySymbology; +} + +export const DomainCardPrice = ({ + altPriceSymbology = CurrencySymbology.Symbol, + altPrice, + ...props +}: DomainCardPriceProps) => { + return ( + + } + > + + {getCurrencySymbology(altPrice.currency, altPriceSymbology)} + + } + /> + + ); +}; diff --git a/packages/namekit-react/src/index.ts b/packages/namekit-react/src/index.ts index 89c93b79b..b2838e8a9 100644 --- a/packages/namekit-react/src/index.ts +++ b/packages/namekit-react/src/index.ts @@ -16,4 +16,4 @@ export * from "./components/Link"; export * from "./components/Tooltip"; export * from "./components/CurrencySymbol/CurrencySymbol"; export * from "./components/DisplayedPrice"; -export * from "./components/DisplayedPriceWithSymbol"; +export * from "./components/DomainCardPrice"; From 3518c5fd872bb38316ece9f0cd0d882ad3678314 Mon Sep 17 00:00:00 2001 From: "caco.eth" <49823133+FrancoAguzzi@users.noreply.github.com> Date: Tue, 27 Aug 2024 14:51:37 -0300 Subject: [PATCH 11/43] Update packages/namekit-react/src/components/DisplayedPrice.tsx Co-authored-by: lightwalker.eth <126201998+lightwalker-eth@users.noreply.github.com> --- packages/namekit-react/src/components/DisplayedPrice.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/namekit-react/src/components/DisplayedPrice.tsx b/packages/namekit-react/src/components/DisplayedPrice.tsx index dfa09462c..ba32e5fde 100644 --- a/packages/namekit-react/src/components/DisplayedPrice.tsx +++ b/packages/namekit-react/src/components/DisplayedPrice.tsx @@ -31,7 +31,7 @@ export interface DisplayedPriceProps { */ price: Price; /** - * The currency symbol to display alongside the price. + * The `CurrencySymbol` to display alongside the `Price`. */ symbol: React.ReactNode; /** From 6d43526a668650f168be510b51449040e740fca4 Mon Sep 17 00:00:00 2001 From: "caco.eth" <49823133+FrancoAguzzi@users.noreply.github.com> Date: Tue, 27 Aug 2024 14:54:12 -0300 Subject: [PATCH 12/43] Update packages/namekit-react/src/components/DisplayedPrice.tsx Co-authored-by: lightwalker.eth <126201998+lightwalker-eth@users.noreply.github.com> --- packages/namekit-react/src/components/DisplayedPrice.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/namekit-react/src/components/DisplayedPrice.tsx b/packages/namekit-react/src/components/DisplayedPrice.tsx index ba32e5fde..2f3b4b0a8 100644 --- a/packages/namekit-react/src/components/DisplayedPrice.tsx +++ b/packages/namekit-react/src/components/DisplayedPrice.tsx @@ -26,7 +26,7 @@ export type CurrencySymbolPosition = export interface DisplayedPriceProps { /** - * The price to be displayed + * The price value to be displayed * @example { currency: Currency.Eth, value: 1000000000000000000n } */ price: Price; From 1bc48fea2bb9d3b1a458d9812b5979b1d49b27c6 Mon Sep 17 00:00:00 2001 From: FrancoAguzzi Date: Tue, 27 Aug 2024 15:11:38 -0300 Subject: [PATCH 13/43] feat: optimized props config of DisplayedPrice and CurrencySymbol --- .../CurrencySymbol/CurrencySymbol.tsx | 52 ++++++------------- .../src/components/DisplayedPrice.tsx | 13 ++--- 2 files changed, 18 insertions(+), 47 deletions(-) diff --git a/packages/namekit-react/src/components/CurrencySymbol/CurrencySymbol.tsx b/packages/namekit-react/src/components/CurrencySymbol/CurrencySymbol.tsx index 862647077..ffe18504d 100644 --- a/packages/namekit-react/src/components/CurrencySymbol/CurrencySymbol.tsx +++ b/packages/namekit-react/src/components/CurrencySymbol/CurrencySymbol.tsx @@ -40,7 +40,7 @@ interface CurrencySymbolProps extends React.ComponentProps { * * Defaults to `true`. */ - describeCurrencyInTooltip: boolean; + describeCurrencyInTooltip?: boolean; } export const CurrencySymbol = ({ @@ -53,49 +53,19 @@ export const CurrencySymbol = ({ switch (currency) { case Currency.Usd: - symbol = ( - - - - ); + symbol = ; break; case Currency.Usdc: - symbol = ( - - - - ); + symbol = ; break; case Currency.Dai: - symbol = ( - - - - ); + symbol = ; break; case Currency.Weth: - symbol = ( - - - - ); + symbol = ; break; case Currency.Eth: - symbol = ( - - - - ); + symbol = ; break; default: // TODO: We haven't created symbols for `Currency.Gas` yet. @@ -107,7 +77,15 @@ export const CurrencySymbol = ({ if (!describeCurrencyInTooltip) return symbol; return ( - + + {symbol} + + } + > <>{PriceCurrencyFormat[currency].ExtendedCurrencyNameSingular} ); diff --git a/packages/namekit-react/src/components/DisplayedPrice.tsx b/packages/namekit-react/src/components/DisplayedPrice.tsx index dfa09462c..de4a1dc82 100644 --- a/packages/namekit-react/src/components/DisplayedPrice.tsx +++ b/packages/namekit-react/src/components/DisplayedPrice.tsx @@ -33,7 +33,7 @@ export interface DisplayedPriceProps { /** * The currency symbol to display alongside the price. */ - symbol: React.ReactNode; + symbol?: React.ReactNode; /** * The position of the currency symbol relative to the price. * Defaults to `CurrencySymbolPosition.Left`. @@ -42,21 +42,14 @@ export interface DisplayedPriceProps { * If `CurrencySymbolPosition.Right`, the currency symbol will be displayed to the right of the price. */ symbolPosition?: CurrencySymbolPosition; - /** - * The position of the currency symbol relative to the price. - * Defaults to `CurrencySymbolPosition.Left`. - * - * If `CurrencySymbolPosition.Left`, the currency symbol will be displayed to the left of the price. - * If `CurrencySymbolPosition.Right`, the currency symbol will be displayed to the right of the price. - */ displaySize?: PriceDisplaySize; } export const DisplayedPrice = ({ price, - symbol, - displaySize = PriceDisplaySize.Small, + symbol = <>, symbolPosition = CurrencySymbolPosition.Left, + displaySize = PriceDisplaySize.Small, }: DisplayedPriceProps) => { const displayedPrice = (
Date: Thu, 29 Aug 2024 19:59:30 -0300 Subject: [PATCH 14/43] feat: [SC-25297] Optimized DisplayedPrice and DisplayedPriceConversion docs | Migrate Acronym and Symbol to CurrencySymbology --- .../Namekit/CurrencySymbol.stories.tsx | 49 +- .../Namekit/DisplayedPrice.stories.tsx | 629 ++++-------------- .../DisplayedPriceConversion.stories.tsx | 134 ++++ .../Namekit/DomainCardPrice.stories.tsx | 90 --- packages/ens-utils/src/price.ts | 36 +- .../CurrencySymbol/CurrencySymbol.tsx | 107 ++- .../src/components/DisplayedPrice.tsx | 49 +- .../components/DisplayedPriceConversion.tsx | 44 ++ .../src/components/DomainCardPrice.tsx | 41 -- packages/namekit-react/src/index.ts | 2 +- 10 files changed, 444 insertions(+), 737 deletions(-) create mode 100644 apps/storybook.namekit.io/stories/Namekit/DisplayedPriceConversion.stories.tsx delete mode 100644 apps/storybook.namekit.io/stories/Namekit/DomainCardPrice.stories.tsx create mode 100644 packages/namekit-react/src/components/DisplayedPriceConversion.tsx delete mode 100644 packages/namekit-react/src/components/DomainCardPrice.tsx diff --git a/apps/storybook.namekit.io/stories/Namekit/CurrencySymbol.stories.tsx b/apps/storybook.namekit.io/stories/Namekit/CurrencySymbol.stories.tsx index 87e6f7469..734f6e019 100644 --- a/apps/storybook.namekit.io/stories/Namekit/CurrencySymbol.stories.tsx +++ b/apps/storybook.namekit.io/stories/Namekit/CurrencySymbol.stories.tsx @@ -1,46 +1,36 @@ import { Currency } from "@namehash/ens-utils"; -import { CurrencySymbol, CurrencySymbolSize } from "@namehash/namekit-react"; +import { + CurrencySymbol, + CurrencySymbology, + CurrencySymbolSize, +} from "@namehash/namekit-react"; import type { Meta, StoryObj } from "@storybook/react"; -export const ETH: Story = { +export const AsAnAcronym: Story = { args: { currency: Currency.Eth, + symbology: CurrencySymbology.Acronym, size: CurrencySymbolSize.Large, }, }; -export const USD: Story = { +export const AsASymbol: Story = { args: { - currency: Currency.Usd, - size: CurrencySymbolSize.Large, - }, -}; -export const USDC: Story = { - args: { - currency: Currency.Usdc, - size: CurrencySymbolSize.Large, - }, -}; -export const WETH: Story = { - args: { - currency: Currency.Weth, + currency: Currency.Eth, + symbology: CurrencySymbology.Symbol, size: CurrencySymbolSize.Large, }, }; -export const DAI: Story = { +export const AsAnIcon: Story = { args: { - currency: Currency.Dai, + currency: Currency.Eth, + symbology: CurrencySymbology.Icon, size: CurrencySymbolSize.Large, }, }; export const SmallSize: Story = { args: { size: CurrencySymbolSize.Small, - currency: Currency.Eth, - }, -}; -export const LargeSize: Story = { - args: { - size: CurrencySymbolSize.Large, + symbology: CurrencySymbology.Icon, currency: Currency.Eth, }, }; @@ -48,13 +38,7 @@ export const WithCustomSymbolColor: Story = { args: { fill: "#007bff", size: CurrencySymbolSize.Large, - currency: Currency.Eth, - }, -}; -export const ShowingTooltipDescription: Story = { - args: { - describeCurrencyInTooltip: true, - size: CurrencySymbolSize.Large, + symbology: CurrencySymbology.Icon, currency: Currency.Eth, }, }; @@ -88,6 +72,9 @@ const meta: Meta = { }, describeCurrencyInTooltip: { control: { type: "boolean" } }, }, + args: { + describeCurrencyInTooltip: true, + }, }; export default meta; diff --git a/apps/storybook.namekit.io/stories/Namekit/DisplayedPrice.stories.tsx b/apps/storybook.namekit.io/stories/Namekit/DisplayedPrice.stories.tsx index b78af54b6..1f268b5d6 100644 --- a/apps/storybook.namekit.io/stories/Namekit/DisplayedPrice.stories.tsx +++ b/apps/storybook.namekit.io/stories/Namekit/DisplayedPrice.stories.tsx @@ -1,15 +1,12 @@ import { CurrencySymbol, - CurrencySymbolPosition, DisplayedPrice, PriceDisplaySize, + CurrencySymbology, + CurrencySymbolPosition, } from "@namehash/namekit-react"; import type { Meta, StoryObj } from "@storybook/react"; -import { - Currency, - CurrencySymbology, - getCurrencySymbology, -} from "@namehash/ens-utils"; +import { Currency, numberAsPrice, type Price } from "@namehash/ens-utils"; import React from "react"; const meta: Meta = { @@ -17,11 +14,60 @@ const meta: Meta = { title: "Namekit/DisplayedPrice", argTypes: { price: { - control: "object", + options: ["OneETH", "OneUSD", "OneUSDC", "OneWETH", "OneDAI"], + mapping: { + OneETH: numberAsPrice(1, Currency.Eth), + OneUSD: numberAsPrice(1, Currency.Usd), + OneUSDC: numberAsPrice(1, Currency.Usdc), + OneWETH: numberAsPrice(1, Currency.Weth), + OneDAI: numberAsPrice(1, Currency.Dai), + }, + }, + symbol: { + options: [ + "ParagraphElm", + "EmptyDivElm", + "undefined", + "null", + "CustomEthIconSymbol", + "CustomEthAcronymSymbol", + ], + mapping: { + ParagraphElm:

Whatever you want

, + EmptyDivElm:
, + CustomEthIconSymbol: ( + + ), + CustomEthAcronymSymbol: ( + + ), + undefined: undefined, + null: null, + }, }, displaySize: { - options: Object.keys(PriceDisplaySize), control: { type: "select" }, + options: ["Large", "Medium", "Small", "Micro"], + mapping: { + Large: PriceDisplaySize.Large, + Medium: PriceDisplaySize.Medium, + Small: PriceDisplaySize.Small, + Micro: PriceDisplaySize.Micro, + }, + }, + symbolPosition: { + control: { type: "select" }, + options: ["Left", "Right"], + mapping: { + Left: CurrencySymbolPosition.Left, + Right: CurrencySymbolPosition.Right, + }, }, }, }; @@ -40,654 +86,201 @@ export default meta; type Story = StoryObj; -export const EthPriceWithoutSymbol: Story = { +export const LargeDisplaySize: Story = { args: { - price: { - currency: Currency.Eth, - value: 1000000000000000000n, - }, - }, -}; -export const UsdPriceWithoutSymbol: Story = { - args: { - price: { - currency: Currency.Usd, - value: 198900n, - }, - }, -}; -export const LargeUsdPrice: Story = { - args: { - price: { - currency: Currency.Usd, - value: 198900n, - }, + price: numberAsPrice(2000, Currency.Usd), displaySize: PriceDisplaySize.Large, }, }; -export const LargeEthPrice: Story = { +export const MediumDisplaySize: Story = { args: { - price: { - currency: Currency.Eth, - value: 198900n, - }, - displaySize: PriceDisplaySize.Large, - }, -}; -export const MediumUsdPrice: Story = { - args: { - price: { - currency: Currency.Usd, - value: 198900n, - }, - displaySize: PriceDisplaySize.Medium, - }, -}; -export const MediumEthPrice: Story = { - args: { - price: { - currency: Currency.Eth, - value: 198900n, - }, + price: numberAsPrice(2000, Currency.Usd), displaySize: PriceDisplaySize.Medium, }, }; -export const SmallUsdPrice: Story = { +export const SmallDisplaySize: Story = { args: { - price: { - currency: Currency.Usd, - value: 198900n, - }, + price: numberAsPrice(2000, Currency.Usd), displaySize: PriceDisplaySize.Small, }, }; -export const SmallEthPrice: Story = { +export const MicroDisplaySize: Story = { args: { - price: { - currency: Currency.Eth, - value: 198900n, - }, - displaySize: PriceDisplaySize.Small, - }, -}; -export const MicroUsdPrice: Story = { - args: { - price: { - currency: Currency.Usd, - value: 198900n, - }, - displaySize: PriceDisplaySize.Micro, - }, -}; -export const MicroEthPrice: Story = { - args: { - price: { - currency: Currency.Eth, - value: 198900n, - }, + price: numberAsPrice(2000, Currency.Usd), displaySize: PriceDisplaySize.Micro, }, }; -export const EthMinDisplayPrice: Story = { - args: { - price: { - currency: Currency.Eth, - value: 100000000000000n, - }, - }, -}; -export const EthMaxDisplayPrice: Story = { - args: { - price: { - currency: Currency.Eth, - value: 10000000000000000000000000n, - }, - }, -}; -export const UsdMinDisplayPrice: Story = { - args: { - price: { - currency: Currency.Usd, - value: 1n, - }, - }, -}; -export const UsdMaxDisplayPrice: Story = { - args: { - price: { - currency: Currency.Usd, - value: 1000000000000000000n, - }, - }, -}; -export const UsdcMinDisplayPrice: Story = { - args: { - price: { - currency: Currency.Usdc, - value: 1n, - }, - }, -}; -export const UsdcMaxDisplayPrice: Story = { +export const DefaultSymbol: Story = { args: { - price: { - currency: Currency.Usdc, - value: 1000000000000000000n, - }, - }, -}; -export const DaiMinDisplayPrice: Story = { - args: { - price: { - currency: Currency.Dai, - value: 1n, - }, - }, -}; -export const DaiMaxDisplayPrice: Story = { - args: { - price: { - currency: Currency.Dai, - value: 10000000000000000000000000n, - }, - }, -}; -export const WethMinDisplayPrice: Story = { - args: { - price: { - currency: Currency.Weth, - value: 1n, - }, - }, -}; -export const WethMaxDisplayPrice: Story = { - args: { - price: { - currency: Currency.Weth, - value: 1000000000000000000000000n, - }, - }, -}; -export const UsdPriceAndSymbolExample: Story = { - args: { - price: { - currency: Currency.Usd, - value: 198900n, - }, - symbol: ( -

- You can define your custom symbology by informing a React.ReactNode to - the "symbol" prop! -

- ), - }, -}; -export const UsdPriceWithSymbol: Story = { - args: { - price: { - currency: Currency.Usd, - value: 198900n, - }, - symbol: ( - - ), - symbolPosition: CurrencySymbolPosition.Left, - }, -}; -export const UsdPriceWithAcronym: Story = { - args: { - price: { - currency: Currency.Usd, - value: 198900n, - }, - symbol: ( - - {getCurrencySymbology(Currency.Usd, CurrencySymbology.Acronym)} - - ), + price: numberAsPrice(1, Currency.Eth), symbolPosition: CurrencySymbolPosition.Left, }, }; -export const UsdPriceWithSymbolOnRight: Story = { +export const CustomSymbolUsingOurCurrencySymbol: Story = { args: { - price: { - currency: Currency.Usd, - value: 198900n, - }, + price: numberAsPrice(1, Currency.Eth), symbol: ( ), - symbolPosition: CurrencySymbolPosition.Right, - }, -}; -export const UsdPriceWithAcronymOnRight: Story = { - args: { - price: { - currency: Currency.Usd, - value: 198900n, - }, - symbol: ( - - {getCurrencySymbology(Currency.Usd, CurrencySymbology.Acronym)} - - ), - symbolPosition: CurrencySymbolPosition.Right, }, }; -export const EthPriceWithSymbol: Story = { +export const CustomSymbolUsingCustomAcronymSymbology: Story = { args: { - price: { - currency: Currency.Eth, - value: 1000000000000000000n, - }, + price: numberAsPrice(1, Currency.Eth), symbol: ( ), - symbolPosition: CurrencySymbolPosition.Left, }, }; -export const EthPriceWithAcronym: Story = { +export const CustomSymbolDoingWhateverYouWant: Story = { args: { - price: { - currency: Currency.Eth, - value: 1000000000000000000n, - }, - symbol: ( - - {getCurrencySymbology(Currency.Eth, CurrencySymbology.Acronym)} - - ), - symbolPosition: CurrencySymbolPosition.Left, + price: numberAsPrice(1, Currency.Eth), + symbol:

Whatever you want

, }, }; -export const EthPriceWithSymbolOnRight: Story = { +export const CurrencyWithSymbolAtTheRight: Story = { args: { - price: { - currency: Currency.Eth, - value: 1000000000000000000n, - }, - symbol: ( - - ), - symbolPosition: CurrencySymbolPosition.Right, - }, -}; -export const EthPriceWithAcronymOnRight: Story = { - args: { - price: { - currency: Currency.Eth, - value: 1000000000000000000n, - }, - symbol: ( - - {getCurrencySymbology(Currency.Eth, CurrencySymbology.Acronym)} - - ), + price: numberAsPrice(1, Currency.Eth), symbolPosition: CurrencySymbolPosition.Right, }, }; export const EthPriceWithCurrencySymbol: Story = { args: { - price: { - currency: Currency.Eth, - value: 1000000000000000000n, - }, - symbol: ( - - ), + price: numberAsPrice(1, Currency.Eth), }, }; export const WethPriceWithCurrencySymbol: Story = { args: { - price: { - currency: Currency.Weth, - value: 1000000000000000000n, - }, - symbol: ( - - ), + price: numberAsPrice(1, Currency.Weth), }, }; export const DaiPriceWithCurrencySymbol: Story = { args: { - price: { - currency: Currency.Dai, - value: 1000000000000000000n, - }, - symbol: ( - - ), + price: numberAsPrice(1, Currency.Dai), }, }; export const UsdcPriceWithCurrencySymbol: Story = { args: { - price: { - currency: Currency.Usdc, - value: 198900000n, - }, - symbol: ( - - ), + price: numberAsPrice(1, Currency.Usdc), }, }; export const UsdPriceWithCurrencySymbol: Story = { args: { - price: { - currency: Currency.Usd, - value: 198900n, - }, - symbol: ( - - ), + price: numberAsPrice(1, Currency.Usd), }, }; -export const UsdPriceWithCurrencySymbolWithoutTooltipDescription: Story = { +export const EthMinDisplayPriceWithCustomCurrencyIcon: Story = { args: { - price: { - currency: Currency.Usd, - value: 198900n, - }, - symbol: ( - - ), - }, -}; -export const EthMinDisplayPriceWithAcronym: Story = { - args: { - price: { - currency: Currency.Eth, - value: 100000000000000n, - }, - symbol: ( - - {getCurrencySymbology(Currency.Eth, CurrencySymbology.Acronym)} - - ), - }, -}; -export const EthMaxDisplayPriceWithAcronym: Story = { - args: { - price: { - currency: Currency.Eth, - value: 10000000000000000000000000n, - }, - symbol: ( - - {getCurrencySymbology(Currency.Eth, CurrencySymbology.Acronym)} - - ), - }, -}; -export const UsdMinDisplayPriceWithAcronym: Story = { - args: { - price: { - currency: Currency.Usd, - value: 1n, - }, - symbol: ( - - {getCurrencySymbology(Currency.Eth, CurrencySymbology.Acronym)} - - ), - }, -}; -export const UsdMaxDisplayPriceWithAcronym: Story = { - args: { - price: { - currency: Currency.Usd, - value: 1000000000000000000n, - }, - symbol: ( - - {getCurrencySymbology(Currency.Eth, CurrencySymbology.Acronym)} - - ), - }, -}; -export const UsdcMinDisplayPriceWithAcronym: Story = { - args: { - price: { - currency: Currency.Usdc, - value: 1n, - }, - symbol: ( - - {getCurrencySymbology(Currency.Eth, CurrencySymbology.Acronym)} - - ), - }, -}; -export const UsdcMaxDisplayPriceWithAcronym: Story = { - args: { - price: { - currency: Currency.Usdc, - value: 1000000000000000000n, - }, - symbol: ( - - {getCurrencySymbology(Currency.Eth, CurrencySymbology.Acronym)} - - ), - }, -}; -export const DaiMinDisplayPriceWithAcronym: Story = { - args: { - price: { - currency: Currency.Dai, - value: 1n, - }, - symbol: ( - - {getCurrencySymbology(Currency.Eth, CurrencySymbology.Acronym)} - - ), - }, -}; -export const DaiMaxDisplayPriceWithAcronym: Story = { - args: { - price: { - currency: Currency.Dai, - value: 10000000000000000000000000n, - }, - symbol: ( - - {getCurrencySymbology(Currency.Eth, CurrencySymbology.Acronym)} - - ), - }, -}; -export const WethMinDisplayPriceWithAcronym: Story = { - args: { - price: { - currency: Currency.Weth, - value: 1n, - }, - symbol: ( - - {getCurrencySymbology(Currency.Eth, CurrencySymbology.Acronym)} - - ), - }, -}; -export const WethMaxDisplayPriceWithAcronym: Story = { - args: { - price: { - currency: Currency.Weth, - value: 1000000000000000000000000n, - }, - symbol: ( - - {getCurrencySymbology(Currency.Eth, CurrencySymbology.Acronym)} - - ), - }, -}; -export const EthMinDisplayPriceWithSymbol: Story = { - args: { - price: { - currency: Currency.Eth, - value: 100000000000000n, - }, + price: numberAsPrice(0.001, Currency.Eth), symbol: ( ), }, }; -export const EthMaxDisplayPriceWithSymbol: Story = { +export const EthMaxDisplayPriceWithCustomCurrencyIcon: Story = { args: { - price: { - currency: Currency.Eth, - value: 10000000000000000000000000n, - }, + price: numberAsPrice(1000000, Currency.Eth), symbol: ( ), }, }; -export const UsdMinDisplayPriceWithSymbol: Story = { +export const UsdMinDisplayPriceWithCustomCurrencyIcon: Story = { args: { - price: { - currency: Currency.Usd, - value: 1n, - }, + price: numberAsPrice(0.01, Currency.Usd), symbol: ( ), }, }; -export const UsdMaxDisplayPriceWithSymbol: Story = { +export const UsdMaxDisplayPriceWithCustomCurrencyIcon: Story = { args: { - price: { - currency: Currency.Usd, - value: 1000000000000000000n, - }, + price: numberAsPrice(100000000, Currency.Usd), symbol: ( ), }, }; -export const UsdcMinDisplayPriceWithSymbol: Story = { +export const UsdcMinDisplayPriceWithCustomCurrencyIcon: Story = { args: { - price: { - currency: Currency.Usdc, - value: 1n, - }, + price: numberAsPrice(0.01, Currency.Usdc), symbol: ( ), }, }; -export const UsdcMaxDisplayPriceWithSymbol: Story = { +export const UsdcMaxDisplayPriceWithCustomCurrencyIcon: Story = { args: { - price: { - currency: Currency.Usdc, - value: 1000000000000000000n, - }, + price: numberAsPrice(100000000, Currency.Usdc), symbol: ( ), }, }; -export const DaiMinDisplayPriceWithSymbol: Story = { +export const DaiMinDisplayPriceWithCustomCurrencyIcon: Story = { args: { - price: { - currency: Currency.Dai, - value: 1n, - }, + price: numberAsPrice(0.01, Currency.Dai), symbol: ( ), }, }; -export const DaiMaxDisplayPriceWithSymbol: Story = { +export const DaiMaxDisplayPriceWithCustomCurrencyIcon: Story = { args: { - price: { - currency: Currency.Dai, - value: 10000000000000000000000000n, - }, + price: numberAsPrice(100000000, Currency.Dai), symbol: ( ), }, }; -export const WethMinDisplayPriceWithSymbol: Story = { +export const WethMinDisplayPriceWithCustomCurrencyIcon: Story = { args: { - price: { - currency: Currency.Weth, - value: 1n, - }, + price: numberAsPrice(0.001, Currency.Weth), symbol: ( ), }, }; -export const WethMaxDisplayPriceWithSymbol: Story = { +export const WethMaxDisplayPriceWithCustomCurrencyIcon: Story = { args: { - price: { - currency: Currency.Weth, - value: 1000000000000000000000000n, - }, + price: numberAsPrice(1000000, Currency.Weth), symbol: ( ), }, diff --git a/apps/storybook.namekit.io/stories/Namekit/DisplayedPriceConversion.stories.tsx b/apps/storybook.namekit.io/stories/Namekit/DisplayedPriceConversion.stories.tsx new file mode 100644 index 000000000..cf4b7e78d --- /dev/null +++ b/apps/storybook.namekit.io/stories/Namekit/DisplayedPriceConversion.stories.tsx @@ -0,0 +1,134 @@ +import { Currency, numberAsPrice } from "@namehash/ens-utils"; +import { + CurrencySymbol, + CurrencySymbology, + CurrencySymbolPosition, + DisplayedPriceConversion, + PriceDisplaySize, +} from "@namehash/namekit-react"; +import type { Meta, StoryObj } from "@storybook/react"; +import React from "react"; + +const meta: Meta = { + component: DisplayedPriceConversion, + title: "Namekit/DisplayedPriceConversion", + argTypes: { + price: { + options: ["OneETH", "OneUSD", "OneUSDC", "OneWETH", "OneDAI"], + mapping: { + OneETH: numberAsPrice(1, Currency.Eth), + OneUSD: numberAsPrice(1, Currency.Usd), + OneUSDC: numberAsPrice(1, Currency.Usdc), + OneWETH: numberAsPrice(1, Currency.Weth), + OneDAI: numberAsPrice(1, Currency.Dai), + }, + }, + convertedPrice: { + options: ["OneETH", "OneUSD", "OneUSDC", "OneWETH", "OneDAI"], + mapping: { + OneETH: numberAsPrice(1, Currency.Eth), + OneUSD: numberAsPrice(1, Currency.Usd), + OneUSDC: numberAsPrice(1, Currency.Usdc), + OneWETH: numberAsPrice(1, Currency.Weth), + OneDAI: numberAsPrice(1, Currency.Dai), + }, + }, + symbol: { + control: { type: "select" }, + options: [ + "ParagraphElm", + "EmptyDivElm", + "undefined", + "null", + "CustomEthIconSymbol", + "CustomEthAcronymSymbol", + ], + mapping: { + ParagraphElm:

Whatever you want

, + EmptyDivElm:
, + CustomEthIconSymbol: ( + + ), + CustomEthAcronymSymbol: ( + + ), + undefined: undefined, + null: null, + }, + }, + convertedPriceSymbology: { + options: Object.keys(CurrencySymbology), + control: { type: "select" }, + }, + displaySize: { + control: { type: "select" }, + options: ["Large", "Medium", "Small", "Micro"], + mapping: { + Large: PriceDisplaySize.Large, + Medium: PriceDisplaySize.Medium, + Small: PriceDisplaySize.Small, + Micro: PriceDisplaySize.Micro, + }, + }, + symbolPosition: { + control: { type: "select" }, + options: ["Left", "Right"], + mapping: { + Left: CurrencySymbolPosition.Left, + Right: CurrencySymbolPosition.Right, + }, + }, + }, + args: { + displaySize: PriceDisplaySize.Medium, + symbolPosition: CurrencySymbolPosition.Left, + }, +}; + +declare global { + interface BigInt { + toJSON(): string; + } +} + +BigInt.prototype.toJSON = function () { + return `${this.toString()}n`; +}; + +export default meta; + +type Story = StoryObj; + +export const ConvertedPriceWithSymbolSymbology: Story = { + args: { + price: numberAsPrice(1, Currency.Eth), + convertedPrice: numberAsPrice(1, Currency.Weth), + convertedPriceSymbology: CurrencySymbology.Symbol, + }, +}; +export const ConvertedPriceWithAcronymSymbology: Story = { + args: { + price: numberAsPrice(1, Currency.Eth), + convertedPrice: numberAsPrice(1, Currency.Weth), + convertedPriceSymbology: CurrencySymbology.Acronym, + }, +}; +export const ConvertedPriceWithIconSymbology: Story = { + args: { + price: numberAsPrice(1, Currency.Eth), + symbol: ( + + ), + convertedPrice: numberAsPrice(1, Currency.Weth), + convertedPriceSymbology: CurrencySymbology.Icon, + }, +}; diff --git a/apps/storybook.namekit.io/stories/Namekit/DomainCardPrice.stories.tsx b/apps/storybook.namekit.io/stories/Namekit/DomainCardPrice.stories.tsx deleted file mode 100644 index 3ebcb7845..000000000 --- a/apps/storybook.namekit.io/stories/Namekit/DomainCardPrice.stories.tsx +++ /dev/null @@ -1,90 +0,0 @@ -import { - Currency, - CurrencySymbology, - getCurrencySymbology, - PriceCurrencyFormat, -} from "@namehash/ens-utils"; -import { CurrencySymbol, DomainCardPrice } from "@namehash/namekit-react"; -import type { Meta, StoryObj } from "@storybook/react"; -import React from "react"; - -const meta: Meta = { - component: DomainCardPrice, - title: "Namekit/DomainCardPrice", - argTypes: { - altPrice: { - control: "object", - }, - altPriceSymbology: { - options: Object.keys(CurrencySymbology), - control: { type: "select" }, - }, - }, -}; - -declare global { - interface BigInt { - toJSON(): string; - } -} - -BigInt.prototype.toJSON = function () { - return `${this.toString()}n`; -}; - -export default meta; - -type Story = StoryObj; - -export const EthPriceWithCurrencySymbolAndAnUsdAltPriceWithSymbolSymbology: Story = - { - args: { - price: { currency: Currency.Eth, value: 1000000000000000000n }, - symbol: ( - - ), - altPrice: { currency: Currency.Usd, value: 198900n }, - altPriceSymbology: CurrencySymbology.Symbol, - }, - }; -export const EthPriceWithCurrencySymbolAndAnUsdAltPriceWithAcronymSymbology: Story = - { - args: { - price: { currency: Currency.Eth, value: 1000000000000000000n }, - symbol: ( - - ), - altPrice: { currency: Currency.Usd, value: 198900n }, - altPriceSymbology: CurrencySymbology.Acronym, - }, - }; -export const EthPriceWithAcronymAndAnUsdAltPriceWithAcronymSymbology: Story = { - args: { - price: { currency: Currency.Eth, value: 1000000000000000000n }, - symbol: ( - - {getCurrencySymbology(Currency.Eth, CurrencySymbology.Acronym)} - - ), - altPrice: { currency: Currency.Usd, value: 198900n }, - altPriceSymbology: CurrencySymbology.Acronym, - }, -}; -export const EthPriceWithAcronymAndAnUsdAltPriceWithSymbolSymbology: Story = { - args: { - price: { currency: Currency.Eth, value: 1000000000000000000n }, - symbol: ( - - {getCurrencySymbology(Currency.Eth, CurrencySymbology.Acronym)} - - ), - altPrice: { currency: Currency.Usd, value: 198900n }, - altPriceSymbology: CurrencySymbology.Symbol, - }, -}; diff --git a/packages/ens-utils/src/price.ts b/packages/ens-utils/src/price.ts index 69fcfa165..62642e4e5 100644 --- a/packages/ens-utils/src/price.ts +++ b/packages/ens-utils/src/price.ts @@ -128,44 +128,14 @@ export const multiplyPriceByNumber = (price1: Price, price2: number): Price => { }; }; -export const CurrencySymbology = { - /** - * The price will be displayed with the currency's acronym (e.g. USD). - */ - Acronym: "Acronym", - /** - * The price will be displayed with the currency's symbol (e.g. $). - */ - Symbol: "Symbol", -} as const; -export type CurrencySymbology = - (typeof CurrencySymbology)[keyof typeof CurrencySymbology]; - -/** - * Returns a string containing the currency's symbol or acronym. - * @param currency: Currency. The currency to get the symbology for (e.g. Currency.Eth) - * @param symbology: CurrencySymbology. The symbology to use (e.g. CurrencySymbology.Symbol) - * @returns: string. The currency's symbol or acronym (e.g. "$" or "USD") - */ -export const getCurrencySymbology = ( - currency: Currency, - symbology: CurrencySymbology, -): string => { - return symbology === CurrencySymbology.Acronym - ? PriceCurrencyFormat[currency].Acronym - : PriceCurrencyFormat[currency].Symbol; -}; - export const formattedPrice = ({ price, - withSufix = false, withPrefix = false, - symbology = CurrencySymbology.Symbol, + withSufix = false, }: { price: Price; withPrefix?: boolean; withSufix?: boolean; - symbology?: CurrencySymbology; }): string => { let formattedAmount = ""; const valueConsideringDecimals = ( @@ -215,10 +185,10 @@ export const formattedPrice = ({ } const prefixUnit = withPrefix - ? getCurrencySymbology(price.currency, symbology) + ? PriceCurrencyFormat[price.currency].Symbol : ""; const postfixUnit = withSufix - ? getCurrencySymbology(price.currency, symbology) + ? PriceCurrencyFormat[price.currency].Acronym : ""; let priceDisplay = diff --git a/packages/namekit-react/src/components/CurrencySymbol/CurrencySymbol.tsx b/packages/namekit-react/src/components/CurrencySymbol/CurrencySymbol.tsx index ffe18504d..2f6612dde 100644 --- a/packages/namekit-react/src/components/CurrencySymbol/CurrencySymbol.tsx +++ b/packages/namekit-react/src/components/CurrencySymbol/CurrencySymbol.tsx @@ -11,7 +11,7 @@ import React from "react"; /** * The size of the `CurrencySymbol`. * This is defined as a mapping from a `CurrencySymbolSize` to a number. - * This number represents the size a `CurrencySymbol` should be displayed at, in pixels. + * This number represents the size (width and height) a `CurrencySymbol` should be displayed at, in pixels. */ export const CurrencySymbolSize = { Small: 16, @@ -20,6 +20,23 @@ export const CurrencySymbolSize = { export type CurrencySymbolSize = (typeof CurrencySymbolSize)[keyof typeof CurrencySymbolSize]; +export const CurrencySymbology = { + /** + * The price will be displayed with the currency's acronym (e.g. USD). + */ + Acronym: "Acronym", + /** + * The price will be displayed with the currency's symbol (e.g. $). + */ + Symbol: "Symbol", + /** + * The price will be displayed with the currency's icon (e.g. the Ethereum Icon as an SVG). + */ + Icon: "Icon", +} as const; +export type CurrencySymbology = + (typeof CurrencySymbology)[keyof typeof CurrencySymbology]; + interface CurrencySymbolProps extends React.ComponentProps { /** * The `Currency` to display the symbol for. @@ -41,40 +58,92 @@ interface CurrencySymbolProps extends React.ComponentProps { * Defaults to `true`. */ describeCurrencyInTooltip?: boolean; + + /** + * The symbology to use when displaying the currency. + * If `CurrencySymbology.Acronym`, the currency's acronym will be displayed (e.g. USD). + * If `CurrencySymbology.Symbol`, the currency's symbol will be displayed (e.g. $). + */ + symbology?: CurrencySymbology; } -export const CurrencySymbol = ({ - size = CurrencySymbolSize.Small, - describeCurrencyInTooltip = true, +/** + * + * @param currency: Currency. The currency to get the Icon for (e.g. Currency.Eth) + * @param size: CurrencySymbolSize. The Icon size (width and height), in pixels. + * @returns + */ +const getCurrencyIcon = ({ currency, + size, ...props -}: CurrencySymbolProps): JSX.Element => { - let symbol: JSX.Element; - +}: { + size: CurrencySymbolSize; + currency: Currency; +}): JSX.Element => { switch (currency) { case Currency.Usd: - symbol = ; - break; + return ; case Currency.Usdc: - symbol = ; - break; + return ; case Currency.Dai: - symbol = ; - break; + return ; case Currency.Weth: - symbol = ; - break; + return ; case Currency.Eth: - symbol = ; - break; + return ; default: // TODO: We haven't created symbols for `Currency.Gas` yet. throw new Error( `Error creating CurrencySymbol: unsupported Currency: "${currency}".`, ); } +}; + +/** + * Returns a string containing the currency's symbol or acronym. + * @param currency: Currency. The currency to get the symbology for (e.g. Currency.Eth) + * @param symbology: CurrencySymbolSize. The size to use for Icon Symbology. + * For other symbologies it is ignored. We suggest you use props to define + * other symbologies sizes, as these are not SVGs but texts, instead. (e.g. className="myCustomClassForTextSize") + * @param symbology: CurrencySymbology. The symbology to use (e.g. CurrencySymbology.Symbol) + * @returns: string. The currency's symbol or acronym (e.g. "$" or "USD") + */ +export const getCurrencySymbology = ({ + currency, + size = CurrencySymbolSize.Small, + symbology, + ...props +}: { + currency: Currency; + size?: CurrencySymbolSize; + symbology: CurrencySymbology; +}): JSX.Element => { + switch (symbology) { + case CurrencySymbology.Acronym: + return

{PriceCurrencyFormat[currency].Acronym}

; + case CurrencySymbology.Symbol: + return

{PriceCurrencyFormat[currency].Symbol}

; + case CurrencySymbology.Icon: + return getCurrencyIcon({ currency, size, ...props }); + } +}; + +export const CurrencySymbol = ({ + currency, + size = CurrencySymbolSize.Small, + describeCurrencyInTooltip = true, + symbology = CurrencySymbology.Symbol, + ...props +}: CurrencySymbolProps): JSX.Element => { + const symbologyToDisplay = getCurrencySymbology({ + currency, + size, + symbology, + ...props, + }); - if (!describeCurrencyInTooltip) return symbol; + if (!describeCurrencyInTooltip) return symbologyToDisplay; return ( - {symbol} + {symbologyToDisplay} } > diff --git a/packages/namekit-react/src/components/DisplayedPrice.tsx b/packages/namekit-react/src/components/DisplayedPrice.tsx index 491bfb360..c358626ce 100644 --- a/packages/namekit-react/src/components/DisplayedPrice.tsx +++ b/packages/namekit-react/src/components/DisplayedPrice.tsx @@ -1,6 +1,11 @@ import { type Price, formattedPrice } from "@namehash/ens-utils"; import React from "react"; import cc from "classcat"; +import { + CurrencySymbol, + CurrencySymbology, + CurrencySymbolSize, +} from "./CurrencySymbol/CurrencySymbol"; export const PriceDisplaySize = { Micro: "nk-text-[12px] md:nk-text-[14px] nk-font-normal", @@ -32,8 +37,11 @@ export interface DisplayedPriceProps { price: Price; /** * The `CurrencySymbol` to display alongside the `Price`. + * + * Whenever symbol is defined as null, no symbol is displayed. + * Whenever no symbol is defined, the default symbol is displayed. */ - symbol?: React.ReactNode; + symbol?: React.ReactNode | null; /** * The position of the currency symbol relative to the price. * Defaults to `CurrencySymbolPosition.Left`. @@ -45,12 +53,45 @@ export interface DisplayedPriceProps { displaySize?: PriceDisplaySize; } +/** + * Below function makes possible to render a symbol sized according to the price display size. + * @param displaySize PriceDisplaySize. The size the price will be displayed at. + * @returns CurrencySymbolSize. The size the currency symbol should be displayed at. + */ +const fromPriceDisplaySizeToCurrencySymbolSize = ( + displaySize: PriceDisplaySize, +): CurrencySymbolSize => { + switch (displaySize) { + case PriceDisplaySize.Micro: + return CurrencySymbolSize.Small; + case PriceDisplaySize.Small: + return CurrencySymbolSize.Small; + case PriceDisplaySize.Medium: + return CurrencySymbolSize.Large; + case PriceDisplaySize.Large: + return CurrencySymbolSize.Large; + } +}; + export const DisplayedPrice = ({ price, - symbol = <>, + symbol, symbolPosition = CurrencySymbolPosition.Left, displaySize = PriceDisplaySize.Small, }: DisplayedPriceProps) => { + const displayDefaultSymbol = typeof symbol === "undefined"; + + const symbolToDisplay = displayDefaultSymbol ? ( + + ) : ( + symbol + ); + const displayedPrice = (
- {symbolPosition === CurrencySymbolPosition.Left && symbol} + {symbolPosition === CurrencySymbolPosition.Left && symbolToDisplay}

{formattedPrice({ price })}

- {symbolPosition === CurrencySymbolPosition.Right && symbol} + {symbolPosition === CurrencySymbolPosition.Right && symbolToDisplay}
); diff --git a/packages/namekit-react/src/components/DisplayedPriceConversion.tsx b/packages/namekit-react/src/components/DisplayedPriceConversion.tsx new file mode 100644 index 000000000..bf6830ed6 --- /dev/null +++ b/packages/namekit-react/src/components/DisplayedPriceConversion.tsx @@ -0,0 +1,44 @@ +import { DisplayedPrice, DisplayedPriceProps } from "./DisplayedPrice"; +import { Price } from "@namehash/ens-utils"; +import { Tooltip } from "./Tooltip"; +import React from "react"; +import { + CurrencySymbol, + CurrencySymbology, +} from "./CurrencySymbol/CurrencySymbol"; + +interface DisplayedPriceConversionProps extends DisplayedPriceProps { + convertedPrice: Price; + convertedPriceSymbology: CurrencySymbology; +} + +export const DisplayedPriceConversion = ({ + convertedPriceSymbology = CurrencySymbology.Symbol, + convertedPrice, + ...props +}: DisplayedPriceConversionProps) => { + return ( + + } + > + + } + /> + + ); +}; diff --git a/packages/namekit-react/src/components/DomainCardPrice.tsx b/packages/namekit-react/src/components/DomainCardPrice.tsx deleted file mode 100644 index 9096a875a..000000000 --- a/packages/namekit-react/src/components/DomainCardPrice.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import { DisplayedPrice, DisplayedPriceProps } from "./DisplayedPrice"; -import { - CurrencySymbology, - getCurrencySymbology, - Price, -} from "@namehash/ens-utils"; -import { Tooltip } from "./Tooltip"; -import React from "react"; - -interface DomainCardPriceProps extends DisplayedPriceProps { - altPrice: Price; - altPriceSymbology: CurrencySymbology; -} - -export const DomainCardPrice = ({ - altPriceSymbology = CurrencySymbology.Symbol, - altPrice, - ...props -}: DomainCardPriceProps) => { - return ( - - } - > - - {getCurrencySymbology(altPrice.currency, altPriceSymbology)} - - } - /> - - ); -}; diff --git a/packages/namekit-react/src/index.ts b/packages/namekit-react/src/index.ts index b2838e8a9..2749f7398 100644 --- a/packages/namekit-react/src/index.ts +++ b/packages/namekit-react/src/index.ts @@ -16,4 +16,4 @@ export * from "./components/Link"; export * from "./components/Tooltip"; export * from "./components/CurrencySymbol/CurrencySymbol"; export * from "./components/DisplayedPrice"; -export * from "./components/DomainCardPrice"; +export * from "./components/DisplayedPriceConversion"; From 5d9f8f1d2ae3e562875b505a21d03494fb40cac2 Mon Sep 17 00:00:00 2001 From: "caco.eth" <49823133+FrancoAguzzi@users.noreply.github.com> Date: Sat, 31 Aug 2024 12:06:03 -0300 Subject: [PATCH 15/43] Update packages/namekit-react/src/components/CurrencySymbol/CurrencySymbol.tsx Co-authored-by: lightwalker.eth <126201998+lightwalker-eth@users.noreply.github.com> --- .../src/components/CurrencySymbol/CurrencySymbol.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/namekit-react/src/components/CurrencySymbol/CurrencySymbol.tsx b/packages/namekit-react/src/components/CurrencySymbol/CurrencySymbol.tsx index 2f6612dde..4bef03344 100644 --- a/packages/namekit-react/src/components/CurrencySymbol/CurrencySymbol.tsx +++ b/packages/namekit-react/src/components/CurrencySymbol/CurrencySymbol.tsx @@ -30,7 +30,7 @@ export const CurrencySymbology = { */ Symbol: "Symbol", /** - * The price will be displayed with the currency's icon (e.g. the Ethereum Icon as an SVG). + * The symbol displayed for `Currency` will be its graphical icon (e.g. the Ethereum Icon as an SVG). */ Icon: "Icon", } as const; From 7e1ff7209475e52bd316fcc6cb175862010e18cf Mon Sep 17 00:00:00 2001 From: "caco.eth" <49823133+FrancoAguzzi@users.noreply.github.com> Date: Sat, 31 Aug 2024 12:06:11 -0300 Subject: [PATCH 16/43] Update packages/namekit-react/src/components/CurrencySymbol/CurrencySymbol.tsx Co-authored-by: lightwalker.eth <126201998+lightwalker-eth@users.noreply.github.com> --- .../src/components/CurrencySymbol/CurrencySymbol.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/namekit-react/src/components/CurrencySymbol/CurrencySymbol.tsx b/packages/namekit-react/src/components/CurrencySymbol/CurrencySymbol.tsx index 4bef03344..30c650708 100644 --- a/packages/namekit-react/src/components/CurrencySymbol/CurrencySymbol.tsx +++ b/packages/namekit-react/src/components/CurrencySymbol/CurrencySymbol.tsx @@ -22,7 +22,7 @@ export type CurrencySymbolSize = export const CurrencySymbology = { /** - * The price will be displayed with the currency's acronym (e.g. USD). + * The symbol displayed for `Currency` will be its acronym as text. (e.g. "USD"). */ Acronym: "Acronym", /** From b4102dfcf8d4d13b1242ea689070c9a162bcf214 Mon Sep 17 00:00:00 2001 From: "caco.eth" <49823133+FrancoAguzzi@users.noreply.github.com> Date: Sat, 31 Aug 2024 12:06:19 -0300 Subject: [PATCH 17/43] Update packages/namekit-react/src/components/CurrencySymbol/CurrencySymbol.tsx Co-authored-by: lightwalker.eth <126201998+lightwalker-eth@users.noreply.github.com> --- .../src/components/CurrencySymbol/CurrencySymbol.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/namekit-react/src/components/CurrencySymbol/CurrencySymbol.tsx b/packages/namekit-react/src/components/CurrencySymbol/CurrencySymbol.tsx index 30c650708..0cf380e17 100644 --- a/packages/namekit-react/src/components/CurrencySymbol/CurrencySymbol.tsx +++ b/packages/namekit-react/src/components/CurrencySymbol/CurrencySymbol.tsx @@ -26,7 +26,7 @@ export const CurrencySymbology = { */ Acronym: "Acronym", /** - * The price will be displayed with the currency's symbol (e.g. $). + * The symbol displayed for `Currency` will be its text-based symbol (e.g. "$"). */ Symbol: "Symbol", /** From 638108ef7e2eb0001c319a3a76e25070223455d8 Mon Sep 17 00:00:00 2001 From: "caco.eth" <49823133+FrancoAguzzi@users.noreply.github.com> Date: Sat, 31 Aug 2024 12:06:32 -0300 Subject: [PATCH 18/43] Update packages/namekit-react/src/components/DisplayedPrice.tsx Co-authored-by: lightwalker.eth <126201998+lightwalker-eth@users.noreply.github.com> --- packages/namekit-react/src/components/DisplayedPrice.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/namekit-react/src/components/DisplayedPrice.tsx b/packages/namekit-react/src/components/DisplayedPrice.tsx index c358626ce..9b00d8381 100644 --- a/packages/namekit-react/src/components/DisplayedPrice.tsx +++ b/packages/namekit-react/src/components/DisplayedPrice.tsx @@ -36,7 +36,7 @@ export interface DisplayedPriceProps { */ price: Price; /** - * The `CurrencySymbol` to display alongside the `Price`. + * The symbol for the `Currency` of `price`. to display alongside the `Price` value. * * Whenever symbol is defined as null, no symbol is displayed. * Whenever no symbol is defined, the default symbol is displayed. From ac9d1a5da13b1f417c4a1d33e5b063e72b6e268e Mon Sep 17 00:00:00 2001 From: FrancoAguzzi Date: Mon, 2 Sep 2024 23:18:33 -0300 Subject: [PATCH 19/43] feat: [SC-25297] Move CurrencySymbol related components in namekit-react --- .../{CurrencySymbol => }/CurrencySymbol.tsx | 68 +++++++++---------- .../{CurrencySymbol => }/icons/DaiSymbol.tsx | 0 .../{CurrencySymbol => }/icons/EthSymbol.tsx | 0 .../{CurrencySymbol => }/icons/UsdSymbol.tsx | 0 .../{CurrencySymbol => }/icons/UsdcSymbol.tsx | 0 .../{CurrencySymbol => }/icons/WethSymbol.tsx | 0 6 files changed, 34 insertions(+), 34 deletions(-) rename packages/namekit-react/src/components/{CurrencySymbol => }/CurrencySymbol.tsx (70%) rename packages/namekit-react/src/components/{CurrencySymbol => }/icons/DaiSymbol.tsx (100%) rename packages/namekit-react/src/components/{CurrencySymbol => }/icons/EthSymbol.tsx (100%) rename packages/namekit-react/src/components/{CurrencySymbol => }/icons/UsdSymbol.tsx (100%) rename packages/namekit-react/src/components/{CurrencySymbol => }/icons/UsdcSymbol.tsx (100%) rename packages/namekit-react/src/components/{CurrencySymbol => }/icons/WethSymbol.tsx (100%) diff --git a/packages/namekit-react/src/components/CurrencySymbol/CurrencySymbol.tsx b/packages/namekit-react/src/components/CurrencySymbol.tsx similarity index 70% rename from packages/namekit-react/src/components/CurrencySymbol/CurrencySymbol.tsx rename to packages/namekit-react/src/components/CurrencySymbol.tsx index 0cf380e17..432b60823 100644 --- a/packages/namekit-react/src/components/CurrencySymbol/CurrencySymbol.tsx +++ b/packages/namekit-react/src/components/CurrencySymbol.tsx @@ -44,11 +44,13 @@ interface CurrencySymbolProps extends React.ComponentProps { currency: Currency; /** - * The size of the `CurrencySymbol`. + * The size of the `CurrencySymbol` icon. * * Defaults to `CurrencySymbolSize.Small`. + * Only applicable when `symbology` is `CurrencySymbology.Icon`. + * If you want to set a custom size for other symbologies, use props to define it (e.g. className="myCustomClassForTextSize") */ - size?: CurrencySymbolSize; + iconSize?: CurrencySymbolSize; /** * If `true`, hovering over the `CurrencySymbol` will display the @@ -61,8 +63,8 @@ interface CurrencySymbolProps extends React.ComponentProps { /** * The symbology to use when displaying the currency. - * If `CurrencySymbology.Acronym`, the currency's acronym will be displayed (e.g. USD). - * If `CurrencySymbology.Symbol`, the currency's symbol will be displayed (e.g. $). + * + * Defaults to `CurrencySymbology.Symbol`. */ symbology?: CurrencySymbology; } @@ -70,28 +72,28 @@ interface CurrencySymbolProps extends React.ComponentProps { /** * * @param currency: Currency. The currency to get the Icon for (e.g. Currency.Eth) - * @param size: CurrencySymbolSize. The Icon size (width and height), in pixels. + * @param iconSize: CurrencySymbolSize. The Icon size (width and height), in pixels. * @returns */ const getCurrencyIcon = ({ currency, - size, + iconSize = CurrencySymbolSize.Small, ...props }: { - size: CurrencySymbolSize; + iconSize: CurrencySymbolSize; currency: Currency; }): JSX.Element => { switch (currency) { case Currency.Usd: return ; case Currency.Usdc: - return ; + return ; case Currency.Dai: - return ; + return ; case Currency.Weth: - return ; + return ; case Currency.Eth: - return ; + return ; default: // TODO: We haven't created symbols for `Currency.Gas` yet. throw new Error( @@ -101,22 +103,22 @@ const getCurrencyIcon = ({ }; /** - * Returns a string containing the currency's symbol or acronym. + * Returns a JSX.Element containing the currency's symbol, acronym or icon. * @param currency: Currency. The currency to get the symbology for (e.g. Currency.Eth) * @param symbology: CurrencySymbolSize. The size to use for Icon Symbology. * For other symbologies it is ignored. We suggest you use props to define * other symbologies sizes, as these are not SVGs but texts, instead. (e.g. className="myCustomClassForTextSize") * @param symbology: CurrencySymbology. The symbology to use (e.g. CurrencySymbology.Symbol) - * @returns: string. The currency's symbol or acronym (e.g. "$" or "USD") + * @returns: JSX.Element. The currency's symbol, acronym or icon inside a JSX.Element where all extra props will be applied. */ -export const getCurrencySymbology = ({ +const getCurrencySymbology = ({ currency, - size = CurrencySymbolSize.Small, - symbology, + iconSize = CurrencySymbolSize.Small, + symbology = CurrencySymbology.Symbol, ...props }: { currency: Currency; - size?: CurrencySymbolSize; + iconSize?: CurrencySymbolSize; symbology: CurrencySymbology; }): JSX.Element => { switch (symbology) { @@ -125,36 +127,34 @@ export const getCurrencySymbology = ({ case CurrencySymbology.Symbol: return

{PriceCurrencyFormat[currency].Symbol}

; case CurrencySymbology.Icon: - return getCurrencyIcon({ currency, size, ...props }); + return getCurrencyIcon({ currency, iconSize, ...props }); } }; export const CurrencySymbol = ({ currency, - size = CurrencySymbolSize.Small, + iconSize = CurrencySymbolSize.Small, describeCurrencyInTooltip = true, symbology = CurrencySymbology.Symbol, ...props }: CurrencySymbolProps): JSX.Element => { - const symbologyToDisplay = getCurrencySymbology({ - currency, - size, - symbology, - ...props, - }); + const symbologyToDisplay = ( + + {getCurrencySymbology({ + currency, + iconSize, + symbology, + ...props, + })} + + ); if (!describeCurrencyInTooltip) return symbologyToDisplay; return ( - - {symbologyToDisplay} - - } - > + <>{PriceCurrencyFormat[currency].ExtendedCurrencyNameSingular} ); diff --git a/packages/namekit-react/src/components/CurrencySymbol/icons/DaiSymbol.tsx b/packages/namekit-react/src/components/icons/DaiSymbol.tsx similarity index 100% rename from packages/namekit-react/src/components/CurrencySymbol/icons/DaiSymbol.tsx rename to packages/namekit-react/src/components/icons/DaiSymbol.tsx diff --git a/packages/namekit-react/src/components/CurrencySymbol/icons/EthSymbol.tsx b/packages/namekit-react/src/components/icons/EthSymbol.tsx similarity index 100% rename from packages/namekit-react/src/components/CurrencySymbol/icons/EthSymbol.tsx rename to packages/namekit-react/src/components/icons/EthSymbol.tsx diff --git a/packages/namekit-react/src/components/CurrencySymbol/icons/UsdSymbol.tsx b/packages/namekit-react/src/components/icons/UsdSymbol.tsx similarity index 100% rename from packages/namekit-react/src/components/CurrencySymbol/icons/UsdSymbol.tsx rename to packages/namekit-react/src/components/icons/UsdSymbol.tsx diff --git a/packages/namekit-react/src/components/CurrencySymbol/icons/UsdcSymbol.tsx b/packages/namekit-react/src/components/icons/UsdcSymbol.tsx similarity index 100% rename from packages/namekit-react/src/components/CurrencySymbol/icons/UsdcSymbol.tsx rename to packages/namekit-react/src/components/icons/UsdcSymbol.tsx diff --git a/packages/namekit-react/src/components/CurrencySymbol/icons/WethSymbol.tsx b/packages/namekit-react/src/components/icons/WethSymbol.tsx similarity index 100% rename from packages/namekit-react/src/components/CurrencySymbol/icons/WethSymbol.tsx rename to packages/namekit-react/src/components/icons/WethSymbol.tsx From 96e891461cd17875c96a71c8c0f2608ecc621414 Mon Sep 17 00:00:00 2001 From: FrancoAguzzi Date: Mon, 2 Sep 2024 23:19:24 -0300 Subject: [PATCH 20/43] feat: [SC-25297] Optimize DisplayedPrice const defining in namekit-react --- .../src/components/DisplayedPrice.tsx | 30 ++++--------------- 1 file changed, 5 insertions(+), 25 deletions(-) diff --git a/packages/namekit-react/src/components/DisplayedPrice.tsx b/packages/namekit-react/src/components/DisplayedPrice.tsx index 9b00d8381..3a58369ea 100644 --- a/packages/namekit-react/src/components/DisplayedPrice.tsx +++ b/packages/namekit-react/src/components/DisplayedPrice.tsx @@ -3,7 +3,6 @@ import React from "react"; import cc from "classcat"; import { CurrencySymbol, - CurrencySymbology, CurrencySymbolSize, } from "./CurrencySymbol/CurrencySymbol"; @@ -38,8 +37,9 @@ export interface DisplayedPriceProps { /** * The symbol for the `Currency` of `price`. to display alongside the `Price` value. * - * Whenever symbol is defined as null, no symbol is displayed. - * Whenever no symbol is defined, the default symbol is displayed. + * If `symbol` is `undefined`: a default `CurrencySymbol` is displayed alongside the `Price` value. + * If `symbol` is `null`: no symbol is displayed alongside the `Price` value. + * Else: the custom `symbol` is displayed alongside the `Price` value. */ symbol?: React.ReactNode | null; /** @@ -53,39 +53,19 @@ export interface DisplayedPriceProps { displaySize?: PriceDisplaySize; } -/** - * Below function makes possible to render a symbol sized according to the price display size. - * @param displaySize PriceDisplaySize. The size the price will be displayed at. - * @returns CurrencySymbolSize. The size the currency symbol should be displayed at. - */ -const fromPriceDisplaySizeToCurrencySymbolSize = ( - displaySize: PriceDisplaySize, -): CurrencySymbolSize => { - switch (displaySize) { - case PriceDisplaySize.Micro: - return CurrencySymbolSize.Small; - case PriceDisplaySize.Small: - return CurrencySymbolSize.Small; - case PriceDisplaySize.Medium: - return CurrencySymbolSize.Large; - case PriceDisplaySize.Large: - return CurrencySymbolSize.Large; - } -}; - export const DisplayedPrice = ({ price, symbol, symbolPosition = CurrencySymbolPosition.Left, displaySize = PriceDisplaySize.Small, }: DisplayedPriceProps) => { - const displayDefaultSymbol = typeof symbol === "undefined"; + const displayDefaultSymbol = symbol === undefined; const symbolToDisplay = displayDefaultSymbol ? ( ) : ( From 577f5c352c80d642075254a3ddb3ecc5bf9e85d2 Mon Sep 17 00:00:00 2001 From: FrancoAguzzi Date: Mon, 2 Sep 2024 23:19:49 -0300 Subject: [PATCH 21/43] feat: [SC-25297] Update namekit-react Storybook stories --- .../Namekit/CurrencySymbol.stories.tsx | 101 +++++---- .../Namekit/DisplayedPrice.stories.tsx | 197 ++++++++++++++---- .../DisplayedPriceConversion.stories.tsx | 64 ++---- 3 files changed, 235 insertions(+), 127 deletions(-) diff --git a/apps/storybook.namekit.io/stories/Namekit/CurrencySymbol.stories.tsx b/apps/storybook.namekit.io/stories/Namekit/CurrencySymbol.stories.tsx index 734f6e019..0b59f7027 100644 --- a/apps/storybook.namekit.io/stories/Namekit/CurrencySymbol.stories.tsx +++ b/apps/storybook.namekit.io/stories/Namekit/CurrencySymbol.stories.tsx @@ -6,77 +6,98 @@ import { } from "@namehash/namekit-react"; import type { Meta, StoryObj } from "@storybook/react"; +const meta: Meta = { + component: CurrencySymbol, + title: "Namekit/CurrencySymbol", + argTypes: { + currency: { + options: [ + Currency.Eth, + Currency.Usd, + Currency.Usdc, + Currency.Weth, + Currency.Dai, + ], + control: { type: "select" }, + }, + iconSize: { + options: [CurrencySymbolSize.Large, CurrencySymbolSize.Small], + control: { + type: "select", + labels: { + [CurrencySymbolSize.Large]: "Large (20px)", + [CurrencySymbolSize.Small]: "Small (16px)", + }, + }, + }, + symbology: { + options: Object.keys(CurrencySymbology), + control: { type: "select" }, + }, + describeCurrencyInTooltip: { control: { type: "boolean" } }, + }, + args: { + currency: Currency.Eth, + iconSize: CurrencySymbolSize.Small, + symbology: CurrencySymbology.Symbol, + describeCurrencyInTooltip: true, + }, +}; + +export default meta; + +type Story = StoryObj; + export const AsAnAcronym: Story = { args: { + iconSize: CurrencySymbolSize.Small, currency: Currency.Eth, symbology: CurrencySymbology.Acronym, - size: CurrencySymbolSize.Large, }, }; export const AsASymbol: Story = { args: { currency: Currency.Eth, symbology: CurrencySymbology.Symbol, - size: CurrencySymbolSize.Large, }, }; export const AsAnIcon: Story = { args: { currency: Currency.Eth, + iconSize: CurrencySymbolSize.Large, symbology: CurrencySymbology.Icon, - size: CurrencySymbolSize.Large, }, }; export const SmallSize: Story = { args: { - size: CurrencySymbolSize.Small, - symbology: CurrencySymbology.Icon, currency: Currency.Eth, + iconSize: CurrencySymbolSize.Small, + symbology: CurrencySymbology.Icon, }, }; export const WithCustomSymbolColor: Story = { - args: { - fill: "#007bff", - size: CurrencySymbolSize.Large, - symbology: CurrencySymbology.Icon, - currency: Currency.Eth, + argTypes: { + fill: { control: { type: "color" } }, }, -}; -export const NotShowingTooltipDescription: Story = { args: { - describeCurrencyInTooltip: false, - size: CurrencySymbolSize.Large, currency: Currency.Eth, + iconSize: CurrencySymbolSize.Large, + symbology: CurrencySymbology.Icon, + fill: "#007bff", }, }; - -const meta: Meta = { - component: CurrencySymbol, - title: "Namekit/CurrencySymbol", +export const WithCustomFontSize: Story = { argTypes: { - fill: { control: "color" }, - currency: { - options: [ - Currency.Eth, - Currency.Usd, - Currency.Usdc, - Currency.Weth, - Currency.Dai, - ], - control: { type: "select" }, - }, - size: { - options: Object.keys(CurrencySymbolSize), - mapping: CurrencySymbolSize, - control: { type: "select" }, - }, - describeCurrencyInTooltip: { control: { type: "boolean" } }, + className: { control: { type: "text" } }, }, args: { - describeCurrencyInTooltip: true, + className: "nk-text-3xl", + }, +}; +export const NotShowingTooltipDescription: Story = { + args: { + currency: Currency.Eth, + iconSize: CurrencySymbolSize.Large, + describeCurrencyInTooltip: false, }, }; - -export default meta; - -type Story = StoryObj; diff --git a/apps/storybook.namekit.io/stories/Namekit/DisplayedPrice.stories.tsx b/apps/storybook.namekit.io/stories/Namekit/DisplayedPrice.stories.tsx index 1f268b5d6..19192c3ee 100644 --- a/apps/storybook.namekit.io/stories/Namekit/DisplayedPrice.stories.tsx +++ b/apps/storybook.namekit.io/stories/Namekit/DisplayedPrice.stories.tsx @@ -6,35 +6,73 @@ import { CurrencySymbolPosition, } from "@namehash/namekit-react"; import type { Meta, StoryObj } from "@storybook/react"; -import { Currency, numberAsPrice, type Price } from "@namehash/ens-utils"; -import React from "react"; +import { + convertCurrencyWithRates, + Currency, + numberAsPrice, + Price, +} from "@namehash/ens-utils"; +import React, { useEffect } from "react"; const meta: Meta = { component: DisplayedPrice, title: "Namekit/DisplayedPrice", argTypes: { + /** + * `price` options definition for storybook's UI visitors: + * + * Storybook does not provide a straigh-forward way of customizing typed objects + * properties. Since we want to provide storie's docs visitors a way of testing + * multiple `Price` typed objects as `price` values of `DisplayedName` config, + * + * A set of examples are defined as `options` and `mapping` properties. The + * number of stories that are commonly used by applications was finger-picked to be + * these examples. If you want to further test and customize this component, please + * consider installing @namehash/namekit-react dependency and using it locally! + */ price: { - options: ["OneETH", "OneUSD", "OneUSDC", "OneWETH", "OneDAI"], + options: [ + "Example With ETH price", + "Example With WETH price", + "Example With USD price", + "Example With USDC price", + "Example With DAI price", + ], mapping: { - OneETH: numberAsPrice(1, Currency.Eth), - OneUSD: numberAsPrice(1, Currency.Usd), - OneUSDC: numberAsPrice(1, Currency.Usdc), - OneWETH: numberAsPrice(1, Currency.Weth), - OneDAI: numberAsPrice(1, Currency.Dai), + ["Example With ETH price"]: numberAsPrice(1, Currency.Eth), + ["Example With WETH price"]: numberAsPrice(1, Currency.Weth), + ["Example With USD price"]: numberAsPrice(1, Currency.Usd), + ["Example With USDC price"]: numberAsPrice(1, Currency.Usdc), + ["Example With DAI price"]: numberAsPrice(1, Currency.Dai), }, }, + /** + * `symbol` options definition for storybook's UI visitors: + * + * Building JSX components out of the box 🧠 is not an ability all have, so, + * we provide a set of examples for `symbol` property. + * + * + * P.S.: For those that have the necessary abilities please note how you could set + * any text, any HTML element, or even React components you want as this prop's value! + * + * ParagraphElm: a simple paragraph element with a text "Whatever you want" + * EmptyDivElm: an empty div element + * CustomEthIconSymbol: the `@namehash/namekit-react`'s `CurrencySymbol` as a Symbol + * CustomEthAcronymSymbol: the `@namehash/namekit-react`'s `CurrencySymbol` as an Acronym + * undefined: undefined value, which results in`@namehash/namekit-react`'s default symbology + * null: null value, which results in no symbol + */ symbol: { options: [ + "CustomEthAcronymSymbol", + "CustomEthIconSymbol", "ParagraphElm", "EmptyDivElm", "undefined", "null", - "CustomEthIconSymbol", - "CustomEthAcronymSymbol", ], mapping: { - ParagraphElm:

Whatever you want

, - EmptyDivElm:
, CustomEthIconSymbol: ( = { symbology={CurrencySymbology.Acronym} /> ), + ParagraphElm:

Whatever you want

, + EmptyDivElm:
, undefined: undefined, null: null, }, }, + /** + * The possible `displaySize` values for `DisplayedPrice` component. + */ displaySize: { - control: { type: "select" }, - options: ["Large", "Medium", "Small", "Micro"], - mapping: { - Large: PriceDisplaySize.Large, - Medium: PriceDisplaySize.Medium, - Small: PriceDisplaySize.Small, - Micro: PriceDisplaySize.Micro, + options: [ + PriceDisplaySize.Large, + PriceDisplaySize.Medium, + PriceDisplaySize.Small, + PriceDisplaySize.Micro, + ], + control: { + type: "select", + labels: { + [PriceDisplaySize.Large]: "Large (24px)", + [PriceDisplaySize.Medium]: "Medium (20px)", + [PriceDisplaySize.Small]: "Small (14px)", + [PriceDisplaySize.Micro]: "Micro (12px for mobile, 14px for desktop)", + }, }, }, + /** + * The possible `symbolPosition` values for `DisplayedPrice` component. + */ symbolPosition: { - control: { type: "select" }, - options: ["Left", "Right"], - mapping: { - Left: CurrencySymbolPosition.Left, - Right: CurrencySymbolPosition.Right, + options: [CurrencySymbolPosition.Left, CurrencySymbolPosition.Right], + control: { + type: "select", + labels: { + [CurrencySymbolPosition.Left]: "Left", + [CurrencySymbolPosition.Right]: "Right", + }, }, }, }, + args: { + price: numberAsPrice(1, Currency.Eth), + symbolPosition: CurrencySymbolPosition.Left, + displaySize: PriceDisplaySize.Medium, + }, }; declare global { @@ -86,11 +146,56 @@ export default meta; type Story = StoryObj; +const defaultStoriesPrice = numberAsPrice(1, Currency.Eth); + +const exchangeRatesRecord = { + [Currency.Weth]: 2277.56570676, + [Currency.Eth]: 2277.56570676, + [Currency.Usd]: 1, + [Currency.Dai]: 1, + [Currency.Usdc]: 1, +}; + export const LargeDisplaySize: Story = { args: { - price: numberAsPrice(2000, Currency.Usd), displaySize: PriceDisplaySize.Large, }, + render: (args, ctx) => { + /** + * Gather existing pre-defined `DisplayedPrice` stories + * configuration and gets `options` and `mapping` values + * in order to set the first element of `options` as default `price` + * (a `DisplayedPrice`) property value. + * + * This enhances storybook's storie's documentation UI (through a select dropdown, + * the story is now able to set one of the `options` as the default `option` of `select`). + */ + const defaultPriceArgTypesOptions = ctx.argTypes.price.options; + const defaultPriceArgTypesMapping = ctx.argTypes.price.mapping; + + let price: Price; + if (!!defaultPriceArgTypesOptions && defaultPriceArgTypesMapping) { + price = defaultPriceArgTypesMapping[defaultPriceArgTypesOptions[0]]; + } + + /** + * Below there is a conversion of the `price` value to the `args.price.currency` + * currency. This is done by using the `convertCurrencyWithRates` function from + * `@namehash/ens-utils` package. Why we do this? Because we want to show the + * `price` value in a different currency than the one it was defined, with + * the exchange rates defined in `exchangeRatesRecord`. + * + * Please refer to the definition of `price` argTypes to understand why + * we contraint the `price` value to be one of the `options` defined. + */ + const convertedPrice = convertCurrencyWithRates( + defaultStoriesPrice, + args.price.currency, + exchangeRatesRecord, + ); + + return ; + }, }; export const MediumDisplaySize: Story = { args: { @@ -175,9 +280,9 @@ export const UsdPriceWithCurrencySymbol: Story = { price: numberAsPrice(1, Currency.Usd), }, }; -export const EthMinDisplayPriceWithCustomCurrencyIcon: Story = { +export const EthWithCustomCurrencyIcon: Story = { args: { - price: numberAsPrice(0.001, Currency.Eth), + price: numberAsPrice(1.234, Currency.Eth), symbol: ( ), }, }; -export const UsdMinDisplayPriceWithCustomCurrencyIcon: Story = { +export const EthUnderflowDisplayPrice: Story = { + args: { + price: numberAsPrice(0.001, Currency.Eth), + }, +}; +export const UsdUnderflowDisplayPrice: Story = { args: { price: numberAsPrice(0.01, Currency.Usd), - symbol: ( - - ), }, }; -export const UsdMaxDisplayPriceWithCustomCurrencyIcon: Story = { +export const EthOverflowDisplayPrice: Story = { + args: { + price: numberAsPrice(1000000, Currency.Eth), + }, +}; +export const UsdOverflowDisplayPriceWithCustomCurrencyIcon: Story = { args: { price: numberAsPrice(100000000, Currency.Usd), symbol: ( @@ -219,7 +328,7 @@ export const UsdMaxDisplayPriceWithCustomCurrencyIcon: Story = { ), }, }; -export const UsdcMinDisplayPriceWithCustomCurrencyIcon: Story = { +export const UsdcUnderflowDisplayPriceWithCustomCurrencyIcon: Story = { args: { price: numberAsPrice(0.01, Currency.Usdc), symbol: ( @@ -230,7 +339,7 @@ export const UsdcMinDisplayPriceWithCustomCurrencyIcon: Story = { ), }, }; -export const UsdcMaxDisplayPriceWithCustomCurrencyIcon: Story = { +export const UsdcOverflowDisplayPriceWithCustomCurrencyIcon: Story = { args: { price: numberAsPrice(100000000, Currency.Usdc), symbol: ( @@ -241,7 +350,7 @@ export const UsdcMaxDisplayPriceWithCustomCurrencyIcon: Story = { ), }, }; -export const DaiMinDisplayPriceWithCustomCurrencyIcon: Story = { +export const DaiUnderflowDisplayPriceWithCustomCurrencyIcon: Story = { args: { price: numberAsPrice(0.01, Currency.Dai), symbol: ( @@ -252,7 +361,7 @@ export const DaiMinDisplayPriceWithCustomCurrencyIcon: Story = { ), }, }; -export const DaiMaxDisplayPriceWithCustomCurrencyIcon: Story = { +export const DaiOverflowDisplayPriceWithCustomCurrencyIcon: Story = { args: { price: numberAsPrice(100000000, Currency.Dai), symbol: ( @@ -263,7 +372,7 @@ export const DaiMaxDisplayPriceWithCustomCurrencyIcon: Story = { ), }, }; -export const WethMinDisplayPriceWithCustomCurrencyIcon: Story = { +export const WethUnderflowDisplayPriceWithCustomCurrencyIcon: Story = { args: { price: numberAsPrice(0.001, Currency.Weth), symbol: ( @@ -274,7 +383,7 @@ export const WethMinDisplayPriceWithCustomCurrencyIcon: Story = { ), }, }; -export const WethMaxDisplayPriceWithCustomCurrencyIcon: Story = { +export const WethOverflowDisplayPriceWithCustomCurrencyIcon: Story = { args: { price: numberAsPrice(1000000, Currency.Weth), symbol: ( diff --git a/apps/storybook.namekit.io/stories/Namekit/DisplayedPriceConversion.stories.tsx b/apps/storybook.namekit.io/stories/Namekit/DisplayedPriceConversion.stories.tsx index cf4b7e78d..30d272505 100644 --- a/apps/storybook.namekit.io/stories/Namekit/DisplayedPriceConversion.stories.tsx +++ b/apps/storybook.namekit.io/stories/Namekit/DisplayedPriceConversion.stories.tsx @@ -3,6 +3,7 @@ import { CurrencySymbol, CurrencySymbology, CurrencySymbolPosition, + CurrencySymbolSize, DisplayedPriceConversion, PriceDisplaySize, } from "@namehash/namekit-react"; @@ -14,50 +15,32 @@ const meta: Meta = { title: "Namekit/DisplayedPriceConversion", argTypes: { price: { - options: ["OneETH", "OneUSD", "OneUSDC", "OneWETH", "OneDAI"], + options: ["OneETH"], mapping: { OneETH: numberAsPrice(1, Currency.Eth), - OneUSD: numberAsPrice(1, Currency.Usd), - OneUSDC: numberAsPrice(1, Currency.Usdc), - OneWETH: numberAsPrice(1, Currency.Weth), - OneDAI: numberAsPrice(1, Currency.Dai), }, }, convertedPrice: { - options: ["OneETH", "OneUSD", "OneUSDC", "OneWETH", "OneDAI"], + options: ["ToUSD", "ToUSDC", "ToWETH", "ToDAI"], mapping: { - OneETH: numberAsPrice(1, Currency.Eth), - OneUSD: numberAsPrice(1, Currency.Usd), - OneUSDC: numberAsPrice(1, Currency.Usdc), - OneWETH: numberAsPrice(1, Currency.Weth), - OneDAI: numberAsPrice(1, Currency.Dai), + ToUSD: numberAsPrice(2000, Currency.Usd), + ToUSDC: numberAsPrice(2000, Currency.Usdc), + ToWETH: numberAsPrice(1, Currency.Weth), + ToDAI: numberAsPrice(2000, Currency.Dai), }, }, symbol: { - control: { type: "select" }, - options: [ - "ParagraphElm", - "EmptyDivElm", - "undefined", - "null", - "CustomEthIconSymbol", - "CustomEthAcronymSymbol", - ], + control: { + type: "select", + labels: { + WhateverJSX: "Whatever JSX you want", + undefined: "undefined (uses default symbology)", + null: "null", + }, + }, + options: ["WhateverJSX", "undefined", "null"], mapping: { - ParagraphElm:

Whatever you want

, - EmptyDivElm:
, - CustomEthIconSymbol: ( - - ), - CustomEthAcronymSymbol: ( - - ), + WhateverJSX:

Whatever JSX you want

, undefined: undefined, null: null, }, @@ -86,6 +69,7 @@ const meta: Meta = { }, }, args: { + price: numberAsPrice(1, Currency.Eth), displaySize: PriceDisplaySize.Medium, symbolPosition: CurrencySymbolPosition.Left, }, @@ -108,27 +92,21 @@ type Story = StoryObj; export const ConvertedPriceWithSymbolSymbology: Story = { args: { price: numberAsPrice(1, Currency.Eth), - convertedPrice: numberAsPrice(1, Currency.Weth), + convertedPrice: numberAsPrice(2000, Currency.Usdc), convertedPriceSymbology: CurrencySymbology.Symbol, }, }; export const ConvertedPriceWithAcronymSymbology: Story = { args: { price: numberAsPrice(1, Currency.Eth), - convertedPrice: numberAsPrice(1, Currency.Weth), + convertedPrice: numberAsPrice(2000, Currency.Usdc), convertedPriceSymbology: CurrencySymbology.Acronym, }, }; export const ConvertedPriceWithIconSymbology: Story = { args: { price: numberAsPrice(1, Currency.Eth), - symbol: ( - - ), - convertedPrice: numberAsPrice(1, Currency.Weth), + convertedPrice: numberAsPrice(2000, Currency.Usdc), convertedPriceSymbology: CurrencySymbology.Icon, }, }; From ba90eeaa61984f7e0aef6e256b085249c40a766b Mon Sep 17 00:00:00 2001 From: FrancoAguzzi Date: Thu, 5 Sep 2024 22:25:22 -0300 Subject: [PATCH 22/43] feat: [SC-25297] Update exporting of Price components to reside in client.ts --- .../stories/Namekit/DisplayedPrice.stories.tsx | 4 ++-- .../stories/Namekit/DisplayedPriceConversion.stories.tsx | 4 +--- packages/namekit-react/src/client.ts | 9 ++++++++- packages/namekit-react/src/components/CurrencySymbol.tsx | 2 +- packages/namekit-react/src/components/DisplayedPrice.tsx | 5 +---- .../src/components/DisplayedPriceConversion.tsx | 5 +---- 6 files changed, 14 insertions(+), 15 deletions(-) diff --git a/apps/storybook.namekit.io/stories/Namekit/DisplayedPrice.stories.tsx b/apps/storybook.namekit.io/stories/Namekit/DisplayedPrice.stories.tsx index 19192c3ee..cf44304e7 100644 --- a/apps/storybook.namekit.io/stories/Namekit/DisplayedPrice.stories.tsx +++ b/apps/storybook.namekit.io/stories/Namekit/DisplayedPrice.stories.tsx @@ -1,10 +1,10 @@ import { CurrencySymbol, DisplayedPrice, - PriceDisplaySize, CurrencySymbology, + PriceDisplaySize, CurrencySymbolPosition, -} from "@namehash/namekit-react"; +} from "@namehash/namekit-react/client"; import type { Meta, StoryObj } from "@storybook/react"; import { convertCurrencyWithRates, diff --git a/apps/storybook.namekit.io/stories/Namekit/DisplayedPriceConversion.stories.tsx b/apps/storybook.namekit.io/stories/Namekit/DisplayedPriceConversion.stories.tsx index 30d272505..02cd20c25 100644 --- a/apps/storybook.namekit.io/stories/Namekit/DisplayedPriceConversion.stories.tsx +++ b/apps/storybook.namekit.io/stories/Namekit/DisplayedPriceConversion.stories.tsx @@ -1,12 +1,10 @@ import { Currency, numberAsPrice } from "@namehash/ens-utils"; import { - CurrencySymbol, CurrencySymbology, CurrencySymbolPosition, - CurrencySymbolSize, DisplayedPriceConversion, PriceDisplaySize, -} from "@namehash/namekit-react"; +} from "@namehash/namekit-react/client"; import type { Meta, StoryObj } from "@storybook/react"; import React from "react"; diff --git a/packages/namekit-react/src/client.ts b/packages/namekit-react/src/client.ts index beb03fe4a..4bf7bbcae 100644 --- a/packages/namekit-react/src/client.ts +++ b/packages/namekit-react/src/client.ts @@ -4,5 +4,12 @@ import "./styles.css"; export { Tooltip } from "./components/Tooltip"; export { CurrencySymbol, + CurrencySymbology, CurrencySymbolSize, -} from "./components/CurrencySymbol/CurrencySymbol"; +} from "./components/CurrencySymbol"; +export { + DisplayedPrice, + PriceDisplaySize, + CurrencySymbolPosition, +} from "./components/DisplayedPrice"; +export { DisplayedPriceConversion } from "./components/DisplayedPriceConversion"; diff --git a/packages/namekit-react/src/components/CurrencySymbol.tsx b/packages/namekit-react/src/components/CurrencySymbol.tsx index 432b60823..56d181b25 100644 --- a/packages/namekit-react/src/components/CurrencySymbol.tsx +++ b/packages/namekit-react/src/components/CurrencySymbol.tsx @@ -1,5 +1,5 @@ import { PriceCurrencyFormat, Currency } from "@namehash/ens-utils"; -import { Tooltip } from "../Tooltip"; +import { Tooltip } from "./Tooltip"; import { UsdSymbol } from "./icons/UsdSymbol"; import { UsdcSymbol } from "./icons/UsdcSymbol"; diff --git a/packages/namekit-react/src/components/DisplayedPrice.tsx b/packages/namekit-react/src/components/DisplayedPrice.tsx index 3a58369ea..451cca0ba 100644 --- a/packages/namekit-react/src/components/DisplayedPrice.tsx +++ b/packages/namekit-react/src/components/DisplayedPrice.tsx @@ -1,10 +1,7 @@ import { type Price, formattedPrice } from "@namehash/ens-utils"; import React from "react"; import cc from "classcat"; -import { - CurrencySymbol, - CurrencySymbolSize, -} from "./CurrencySymbol/CurrencySymbol"; +import { CurrencySymbol } from "./CurrencySymbol"; export const PriceDisplaySize = { Micro: "nk-text-[12px] md:nk-text-[14px] nk-font-normal", diff --git a/packages/namekit-react/src/components/DisplayedPriceConversion.tsx b/packages/namekit-react/src/components/DisplayedPriceConversion.tsx index bf6830ed6..e54bf65b5 100644 --- a/packages/namekit-react/src/components/DisplayedPriceConversion.tsx +++ b/packages/namekit-react/src/components/DisplayedPriceConversion.tsx @@ -2,10 +2,7 @@ import { DisplayedPrice, DisplayedPriceProps } from "./DisplayedPrice"; import { Price } from "@namehash/ens-utils"; import { Tooltip } from "./Tooltip"; import React from "react"; -import { - CurrencySymbol, - CurrencySymbology, -} from "./CurrencySymbol/CurrencySymbol"; +import { CurrencySymbol, CurrencySymbology } from "./CurrencySymbol"; interface DisplayedPriceConversionProps extends DisplayedPriceProps { convertedPrice: Price; From cbde6b60d19dda53456d8568d2fb07ae2b110303 Mon Sep 17 00:00:00 2001 From: FrancoAguzzi Date: Thu, 5 Sep 2024 23:10:22 -0300 Subject: [PATCH 23/43] feat: [SC-25297] Update namekit-react Price comps. docs. --- .../Namekit/CurrencySymbol.stories.tsx | 15 +- .../Namekit/DisplayedPrice.stories.tsx | 296 ++++++++---------- .../DisplayedPriceConversion.stories.tsx | 59 +++- 3 files changed, 195 insertions(+), 175 deletions(-) diff --git a/apps/storybook.namekit.io/stories/Namekit/CurrencySymbol.stories.tsx b/apps/storybook.namekit.io/stories/Namekit/CurrencySymbol.stories.tsx index 00a5167ad..ea3dc78db 100644 --- a/apps/storybook.namekit.io/stories/Namekit/CurrencySymbol.stories.tsx +++ b/apps/storybook.namekit.io/stories/Namekit/CurrencySymbol.stories.tsx @@ -1,5 +1,8 @@ import { Currency } from "@namehash/ens-utils"; -import { CurrencySymbol } from "@namehash/namekit-react/client"; +import { + CurrencySymbol, + CurrencySymbology, +} from "@namehash/namekit-react/client"; import { CurrencySymbolSize } from "@namehash/namekit-react/client"; import type { Meta, StoryObj } from "@storybook/react"; @@ -22,22 +25,24 @@ const meta: Meta = { control: { type: "select", labels: { - [CurrencySymbolSize.Large]: "Large (20px)", - [CurrencySymbolSize.Small]: "Small (16px)", + [CurrencySymbolSize.Large]: + "Large (20px) (only applicable for Icon symbology)", + [CurrencySymbolSize.Small]: + "Small (16px) (only applicable for Icon symbology)", }, }, }, + describeCurrencyInTooltip: { control: { type: "boolean" } }, symbology: { options: Object.keys(CurrencySymbology), control: { type: "select" }, }, - describeCurrencyInTooltip: { control: { type: "boolean" } }, }, args: { currency: Currency.Eth, iconSize: CurrencySymbolSize.Small, - symbology: CurrencySymbology.Symbol, describeCurrencyInTooltip: true, + symbology: CurrencySymbology.Symbol, }, }; diff --git a/apps/storybook.namekit.io/stories/Namekit/DisplayedPrice.stories.tsx b/apps/storybook.namekit.io/stories/Namekit/DisplayedPrice.stories.tsx index cf44304e7..6149045d3 100644 --- a/apps/storybook.namekit.io/stories/Namekit/DisplayedPrice.stories.tsx +++ b/apps/storybook.namekit.io/stories/Namekit/DisplayedPrice.stories.tsx @@ -4,6 +4,7 @@ import { CurrencySymbology, PriceDisplaySize, CurrencySymbolPosition, + CurrencySymbolSize, } from "@namehash/namekit-react/client"; import type { Meta, StoryObj } from "@storybook/react"; import { @@ -11,8 +12,26 @@ import { Currency, numberAsPrice, Price, + PriceCurrencyFormat, } from "@namehash/ens-utils"; -import React, { useEffect } from "react"; +import React, { useEffect, useState } from "react"; + +const getCurrencySymbolSizeBasedOnPriceDisplaySize = ( + displaySize: PriceDisplaySize | undefined, +) => { + switch (displaySize) { + case PriceDisplaySize.Large: + return CurrencySymbolSize.Large; + case PriceDisplaySize.Medium: + return CurrencySymbolSize.Large; + case PriceDisplaySize.Small: + return CurrencySymbolSize.Small; + case PriceDisplaySize.Micro: + return CurrencySymbolSize.Small; + default: + return CurrencySymbolSize.Large; + } +}; const meta: Meta = { component: DisplayedPrice, @@ -56,37 +75,22 @@ const meta: Meta = { * P.S.: For those that have the necessary abilities please note how you could set * any text, any HTML element, or even React components you want as this prop's value! * - * ParagraphElm: a simple paragraph element with a text "Whatever you want" - * EmptyDivElm: an empty div element - * CustomEthIconSymbol: the `@namehash/namekit-react`'s `CurrencySymbol` as a Symbol - * CustomEthAcronymSymbol: the `@namehash/namekit-react`'s `CurrencySymbol` as an Acronym + * WhateverJSX: a simple JSX with a text saying "Whatever JSX you want" * undefined: undefined value, which results in`@namehash/namekit-react`'s default symbology * null: null value, which results in no symbol */ symbol: { - options: [ - "CustomEthAcronymSymbol", - "CustomEthIconSymbol", - "ParagraphElm", - "EmptyDivElm", - "undefined", - "null", - ], + control: { + type: "select", + labels: { + WhateverJSX: "Whatever JSX you want", + undefined: "undefined (uses default symbology)", + null: "null", + }, + }, + options: ["WhateverJSX", "undefined", "null"], mapping: { - CustomEthIconSymbol: ( - - ), - CustomEthAcronymSymbol: ( - - ), - ParagraphElm:

Whatever you want

, - EmptyDivElm:
, + WhateverJSX:

Whatever JSX you want

, undefined: undefined, null: null, }, @@ -127,8 +131,9 @@ const meta: Meta = { }, args: { price: numberAsPrice(1, Currency.Eth), - symbolPosition: CurrencySymbolPosition.Left, + symbol: undefined, displaySize: PriceDisplaySize.Medium, + symbolPosition: CurrencySymbolPosition.Left, }, }; @@ -231,6 +236,42 @@ export const CustomSymbolUsingOurCurrencySymbol: Story = { /> ), }, + render: (args) => { + const [currency, setCurrency] = useState(args.price.currency); + const [currencySize, setCurrencySize] = useState( + CurrencySymbolSize.Large, + ); + + useEffect(() => { + setCurrencySize( + getCurrencySymbolSizeBasedOnPriceDisplaySize(args.displaySize), + ); + }, [args.displaySize]); + + useEffect(() => { + setCurrency(args.price.currency); + }, [args.price.currency]); + + return ( + + +
+ } + > + ); + }, }; export const CustomSymbolUsingCustomAcronymSymbology: Story = { args: { @@ -255,142 +296,81 @@ export const CurrencyWithSymbolAtTheRight: Story = { symbolPosition: CurrencySymbolPosition.Right, }, }; -export const EthPriceWithCurrencySymbol: Story = { - args: { - price: numberAsPrice(1, Currency.Eth), - }, -}; -export const WethPriceWithCurrencySymbol: Story = { - args: { - price: numberAsPrice(1, Currency.Weth), - }, -}; -export const DaiPriceWithCurrencySymbol: Story = { - args: { - price: numberAsPrice(1, Currency.Dai), - }, -}; -export const UsdcPriceWithCurrencySymbol: Story = { - args: { - price: numberAsPrice(1, Currency.Usdc), - }, -}; -export const UsdPriceWithCurrencySymbol: Story = { - args: { - price: numberAsPrice(1, Currency.Usd), - }, -}; -export const EthWithCustomCurrencyIcon: Story = { - args: { - price: numberAsPrice(1.234, Currency.Eth), - symbol: ( - - ), - }, -}; -export const UsdWithCustomCurrencyIcon: Story = { - args: { - price: numberAsPrice(1.23, Currency.Usd), - symbol: ( - - ), - }, -}; -export const EthUnderflowDisplayPrice: Story = { - args: { - price: numberAsPrice(0.001, Currency.Eth), - }, -}; -export const UsdUnderflowDisplayPrice: Story = { - args: { - price: numberAsPrice(0.01, Currency.Usd), - }, -}; -export const EthOverflowDisplayPrice: Story = { - args: { - price: numberAsPrice(1000000, Currency.Eth), - }, -}; -export const UsdOverflowDisplayPriceWithCustomCurrencyIcon: Story = { +export const OverflowDisplayPriceWithCustomCurrencyIcon: Story = { args: { price: numberAsPrice(100000000, Currency.Usd), - symbol: ( - - ), - }, -}; -export const UsdcUnderflowDisplayPriceWithCustomCurrencyIcon: Story = { - args: { - price: numberAsPrice(0.01, Currency.Usdc), - symbol: ( - - ), - }, -}; -export const UsdcOverflowDisplayPriceWithCustomCurrencyIcon: Story = { - args: { - price: numberAsPrice(100000000, Currency.Usdc), - symbol: ( - - ), - }, -}; -export const DaiUnderflowDisplayPriceWithCustomCurrencyIcon: Story = { - args: { - price: numberAsPrice(0.01, Currency.Dai), - symbol: ( - - ), + displaySize: PriceDisplaySize.Small, }, -}; -export const DaiOverflowDisplayPriceWithCustomCurrencyIcon: Story = { - args: { - price: numberAsPrice(100000000, Currency.Dai), - symbol: ( - - ), + render: (args) => { + const [currency, setCurrency] = useState(args.price.currency); + const [currencySize, setCurrencySize] = useState(); + + useEffect(() => { + setCurrencySize( + getCurrencySymbolSizeBasedOnPriceDisplaySize(args.displaySize), + ); + }, [args.displaySize]); + + useEffect(() => { + setCurrency(args.price.currency); + }, [args.price.currency]); + + return ( + + ) + } + > + ); }, }; -export const WethUnderflowDisplayPriceWithCustomCurrencyIcon: Story = { +export const UnderflowDisplayPriceWithCustomCurrencyIcon: Story = { args: { - price: numberAsPrice(0.001, Currency.Weth), - symbol: ( - - ), + price: numberAsPrice(0.01, Currency.Usdc), + displaySize: PriceDisplaySize.Small, }, -}; -export const WethOverflowDisplayPriceWithCustomCurrencyIcon: Story = { - args: { - price: numberAsPrice(1000000, Currency.Weth), - symbol: ( - - ), + render: (args) => { + const [currency, setCurrency] = useState(args.price.currency); + const [currencySize, setCurrencySize] = useState(); + + useEffect(() => { + setCurrencySize( + getCurrencySymbolSizeBasedOnPriceDisplaySize(args.displaySize), + ); + }, [args.displaySize]); + + useEffect(() => { + setCurrency(args.price.currency); + }, [args.price.currency]); + + return ( + + ) + } + > + ); }, }; diff --git a/apps/storybook.namekit.io/stories/Namekit/DisplayedPriceConversion.stories.tsx b/apps/storybook.namekit.io/stories/Namekit/DisplayedPriceConversion.stories.tsx index 02cd20c25..c2315f4c4 100644 --- a/apps/storybook.namekit.io/stories/Namekit/DisplayedPriceConversion.stories.tsx +++ b/apps/storybook.namekit.io/stories/Namekit/DisplayedPriceConversion.stories.tsx @@ -12,12 +12,23 @@ const meta: Meta = { component: DisplayedPriceConversion, title: "Namekit/DisplayedPriceConversion", argTypes: { + /** + * In this story the default price is OneETH + * + * This was done so we can ensure that price conversions + * are nicely set. Please refer to the `convertedPrice` + * prop to see the converted price options. + */ price: { options: ["OneETH"], mapping: { OneETH: numberAsPrice(1, Currency.Eth), }, }, + /** + * Below values give visitors the ability to + * convert OneETH to any of the currencies below: + */ convertedPrice: { options: ["ToUSD", "ToUSDC", "ToWETH", "ToDAI"], mapping: { @@ -47,27 +58,45 @@ const meta: Meta = { options: Object.keys(CurrencySymbology), control: { type: "select" }, }, + /** + * The possible `displaySize` values for `DisplayedPrice` component. + */ displaySize: { - control: { type: "select" }, - options: ["Large", "Medium", "Small", "Micro"], - mapping: { - Large: PriceDisplaySize.Large, - Medium: PriceDisplaySize.Medium, - Small: PriceDisplaySize.Small, - Micro: PriceDisplaySize.Micro, + options: [ + PriceDisplaySize.Large, + PriceDisplaySize.Medium, + PriceDisplaySize.Small, + PriceDisplaySize.Micro, + ], + control: { + type: "select", + labels: { + [PriceDisplaySize.Large]: "Large (24px)", + [PriceDisplaySize.Medium]: "Medium (20px)", + [PriceDisplaySize.Small]: "Small (14px)", + [PriceDisplaySize.Micro]: "Micro (12px for mobile, 14px for desktop)", + }, }, }, + /** + * The possible `symbolPosition` values for `DisplayedPrice` component. + */ symbolPosition: { - control: { type: "select" }, - options: ["Left", "Right"], - mapping: { - Left: CurrencySymbolPosition.Left, - Right: CurrencySymbolPosition.Right, + options: [CurrencySymbolPosition.Left, CurrencySymbolPosition.Right], + control: { + type: "select", + labels: { + [CurrencySymbolPosition.Left]: "Left", + [CurrencySymbolPosition.Right]: "Right", + }, }, }, }, args: { price: numberAsPrice(1, Currency.Eth), + convertedPrice: numberAsPrice(2000, Currency.Usdc), + symbol: undefined, + convertedPriceSymbology: CurrencySymbology.Symbol, displaySize: PriceDisplaySize.Medium, symbolPosition: CurrencySymbolPosition.Left, }, @@ -92,6 +121,8 @@ export const ConvertedPriceWithSymbolSymbology: Story = { price: numberAsPrice(1, Currency.Eth), convertedPrice: numberAsPrice(2000, Currency.Usdc), convertedPriceSymbology: CurrencySymbology.Symbol, + displaySize: PriceDisplaySize.Medium, + symbolPosition: CurrencySymbolPosition.Left, }, }; export const ConvertedPriceWithAcronymSymbology: Story = { @@ -99,6 +130,8 @@ export const ConvertedPriceWithAcronymSymbology: Story = { price: numberAsPrice(1, Currency.Eth), convertedPrice: numberAsPrice(2000, Currency.Usdc), convertedPriceSymbology: CurrencySymbology.Acronym, + displaySize: PriceDisplaySize.Medium, + symbolPosition: CurrencySymbolPosition.Left, }, }; export const ConvertedPriceWithIconSymbology: Story = { @@ -106,5 +139,7 @@ export const ConvertedPriceWithIconSymbology: Story = { price: numberAsPrice(1, Currency.Eth), convertedPrice: numberAsPrice(2000, Currency.Usdc), convertedPriceSymbology: CurrencySymbology.Icon, + displaySize: PriceDisplaySize.Medium, + symbolPosition: CurrencySymbolPosition.Left, }, }; From af9334eb74b5b83c8cca345d8105c7367f44365c Mon Sep 17 00:00:00 2001 From: "caco.eth" <49823133+FrancoAguzzi@users.noreply.github.com> Date: Sun, 8 Sep 2024 17:23:46 -0300 Subject: [PATCH 24/43] Update packages/namekit-react/src/components/CurrencySymbol.tsx Co-authored-by: lightwalker.eth <126201998+lightwalker-eth@users.noreply.github.com> --- packages/namekit-react/src/components/CurrencySymbol.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/namekit-react/src/components/CurrencySymbol.tsx b/packages/namekit-react/src/components/CurrencySymbol.tsx index 56d181b25..fad5c46d0 100644 --- a/packages/namekit-react/src/components/CurrencySymbol.tsx +++ b/packages/namekit-react/src/components/CurrencySymbol.tsx @@ -9,7 +9,7 @@ import { DaiSymbol } from "./icons/DaiSymbol"; import React from "react"; /** - * The size of the `CurrencySymbol`. + * The size of the `CurrencySymbol` icon. * This is defined as a mapping from a `CurrencySymbolSize` to a number. * This number represents the size (width and height) a `CurrencySymbol` should be displayed at, in pixels. */ From 1965f32231bfc2a683c9f60ac895374b14fe6914 Mon Sep 17 00:00:00 2001 From: "caco.eth" <49823133+FrancoAguzzi@users.noreply.github.com> Date: Sun, 8 Sep 2024 17:23:54 -0300 Subject: [PATCH 25/43] Update packages/namekit-react/src/components/CurrencySymbol.tsx Co-authored-by: lightwalker.eth <126201998+lightwalker-eth@users.noreply.github.com> --- packages/namekit-react/src/components/CurrencySymbol.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/namekit-react/src/components/CurrencySymbol.tsx b/packages/namekit-react/src/components/CurrencySymbol.tsx index fad5c46d0..e4223cf6b 100644 --- a/packages/namekit-react/src/components/CurrencySymbol.tsx +++ b/packages/namekit-react/src/components/CurrencySymbol.tsx @@ -11,7 +11,7 @@ import React from "react"; /** * The size of the `CurrencySymbol` icon. * This is defined as a mapping from a `CurrencySymbolSize` to a number. - * This number represents the size (width and height) a `CurrencySymbol` should be displayed at, in pixels. + * This number represents the size (width and height) that the icon for a `CurrencySymbol` should be displayed at, in pixels. */ export const CurrencySymbolSize = { Small: 16, From 7db62372408adbb5f804b6a467690cd29e8a8c89 Mon Sep 17 00:00:00 2001 From: "caco.eth" <49823133+FrancoAguzzi@users.noreply.github.com> Date: Tue, 10 Sep 2024 11:36:27 -0300 Subject: [PATCH 26/43] Update packages/namekit-react/src/components/CurrencySymbol.tsx Co-authored-by: lightwalker.eth <126201998+lightwalker-eth@users.noreply.github.com> --- packages/namekit-react/src/components/CurrencySymbol.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/namekit-react/src/components/CurrencySymbol.tsx b/packages/namekit-react/src/components/CurrencySymbol.tsx index e4223cf6b..2f8b19012 100644 --- a/packages/namekit-react/src/components/CurrencySymbol.tsx +++ b/packages/namekit-react/src/components/CurrencySymbol.tsx @@ -105,7 +105,7 @@ const getCurrencyIcon = ({ /** * Returns a JSX.Element containing the currency's symbol, acronym or icon. * @param currency: Currency. The currency to get the symbology for (e.g. Currency.Eth) - * @param symbology: CurrencySymbolSize. The size to use for Icon Symbology. + * @param iconSize: CurrencySymbolSize. The size to use for Icon Symbology. * For other symbologies it is ignored. We suggest you use props to define * other symbologies sizes, as these are not SVGs but texts, instead. (e.g. className="myCustomClassForTextSize") * @param symbology: CurrencySymbology. The symbology to use (e.g. CurrencySymbology.Symbol) From 12be939116ea4cb7e1f17dbd3207927a8338314f Mon Sep 17 00:00:00 2001 From: "caco.eth" <49823133+FrancoAguzzi@users.noreply.github.com> Date: Tue, 10 Sep 2024 11:36:39 -0300 Subject: [PATCH 27/43] Update .changeset/quick-ads-pretend.md Co-authored-by: lightwalker.eth <126201998+lightwalker-eth@users.noreply.github.com> --- .changeset/quick-ads-pretend.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/quick-ads-pretend.md b/.changeset/quick-ads-pretend.md index cce0898f9..2d65685da 100644 --- a/.changeset/quick-ads-pretend.md +++ b/.changeset/quick-ads-pretend.md @@ -3,4 +3,4 @@ "@namehash/ens-utils": minor --- -Create DisplayedPrice and DisplayedPriceWithSymbol components + new price utilities +Create DisplayedPrice and DisplayedPriceConversion components + new price utilities From 7514805505979adc91eb812d49b3ddbf4f0f9433 Mon Sep 17 00:00:00 2001 From: FrancoAguzzi Date: Tue, 10 Sep 2024 12:31:01 -0300 Subject: [PATCH 28/43] feat: [SC-25297] Refine DisplayedConversionPrice Storybook stories --- .../Namekit/DisplayedPrice.stories.tsx | 2 +- .../DisplayedPriceConversion.stories.tsx | 28 ++++++++++++++----- 2 files changed, 22 insertions(+), 8 deletions(-) diff --git a/apps/storybook.namekit.io/stories/Namekit/DisplayedPrice.stories.tsx b/apps/storybook.namekit.io/stories/Namekit/DisplayedPrice.stories.tsx index 6149045d3..2c23bcf2c 100644 --- a/apps/storybook.namekit.io/stories/Namekit/DisplayedPrice.stories.tsx +++ b/apps/storybook.namekit.io/stories/Namekit/DisplayedPrice.stories.tsx @@ -364,8 +364,8 @@ export const UnderflowDisplayPriceWithCustomCurrencyIcon: Story = { symbol={ args.symbol || ( ) diff --git a/apps/storybook.namekit.io/stories/Namekit/DisplayedPriceConversion.stories.tsx b/apps/storybook.namekit.io/stories/Namekit/DisplayedPriceConversion.stories.tsx index c2315f4c4..7b239629d 100644 --- a/apps/storybook.namekit.io/stories/Namekit/DisplayedPriceConversion.stories.tsx +++ b/apps/storybook.namekit.io/stories/Namekit/DisplayedPriceConversion.stories.tsx @@ -1,12 +1,19 @@ -import { Currency, numberAsPrice } from "@namehash/ens-utils"; import { + Currency, + numberAsPrice, + PriceCurrencyFormat, +} from "@namehash/ens-utils"; +import { + CurrencySymbol, CurrencySymbology, CurrencySymbolPosition, + CurrencySymbolSize, + DisplayedPrice, DisplayedPriceConversion, PriceDisplaySize, } from "@namehash/namekit-react/client"; import type { Meta, StoryObj } from "@storybook/react"; -import React from "react"; +import React, { useEffect, useState } from "react"; const meta: Meta = { component: DisplayedPriceConversion, @@ -94,7 +101,7 @@ const meta: Meta = { }, args: { price: numberAsPrice(1, Currency.Eth), - convertedPrice: numberAsPrice(2000, Currency.Usdc), + convertedPrice: numberAsPrice(2000, Currency.Usd), symbol: undefined, convertedPriceSymbology: CurrencySymbology.Symbol, displaySize: PriceDisplaySize.Medium, @@ -119,7 +126,7 @@ type Story = StoryObj; export const ConvertedPriceWithSymbolSymbology: Story = { args: { price: numberAsPrice(1, Currency.Eth), - convertedPrice: numberAsPrice(2000, Currency.Usdc), + convertedPrice: numberAsPrice(2000, Currency.Usd), convertedPriceSymbology: CurrencySymbology.Symbol, displaySize: PriceDisplaySize.Medium, symbolPosition: CurrencySymbolPosition.Left, @@ -128,18 +135,25 @@ export const ConvertedPriceWithSymbolSymbology: Story = { export const ConvertedPriceWithAcronymSymbology: Story = { args: { price: numberAsPrice(1, Currency.Eth), - convertedPrice: numberAsPrice(2000, Currency.Usdc), + convertedPrice: numberAsPrice(2000, Currency.Usd), convertedPriceSymbology: CurrencySymbology.Acronym, displaySize: PriceDisplaySize.Medium, symbolPosition: CurrencySymbolPosition.Left, }, }; -export const ConvertedPriceWithIconSymbology: Story = { +export const PriceWithIconSymbology: Story = { args: { price: numberAsPrice(1, Currency.Eth), - convertedPrice: numberAsPrice(2000, Currency.Usdc), + convertedPrice: numberAsPrice(2000, Currency.Usd), convertedPriceSymbology: CurrencySymbology.Icon, displaySize: PriceDisplaySize.Medium, symbolPosition: CurrencySymbolPosition.Left, + symbol: ( + + ), }, }; From 31ee390ad173a48879cdade414d077fb1be58d60 Mon Sep 17 00:00:00 2001 From: FrancoAguzzi Date: Tue, 10 Sep 2024 12:31:38 -0300 Subject: [PATCH 29/43] feat: Update `CurrencySymbol` default prop --- packages/namekit-react/src/components/CurrencySymbol.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/namekit-react/src/components/CurrencySymbol.tsx b/packages/namekit-react/src/components/CurrencySymbol.tsx index 2f8b19012..81413acac 100644 --- a/packages/namekit-react/src/components/CurrencySymbol.tsx +++ b/packages/namekit-react/src/components/CurrencySymbol.tsx @@ -134,7 +134,7 @@ const getCurrencySymbology = ({ export const CurrencySymbol = ({ currency, iconSize = CurrencySymbolSize.Small, - describeCurrencyInTooltip = true, + describeCurrencyInTooltip = false, symbology = CurrencySymbology.Symbol, ...props }: CurrencySymbolProps): JSX.Element => { From e83797bb44a392f2329e50502ca04ff7b8fb3d74 Mon Sep 17 00:00:00 2001 From: "caco.eth" <49823133+FrancoAguzzi@users.noreply.github.com> Date: Tue, 10 Sep 2024 14:48:36 -0300 Subject: [PATCH 30/43] Update apps/storybook.namekit.io/stories/Namekit/CurrencySymbol.stories.tsx Co-authored-by: lightwalker.eth <126201998+lightwalker-eth@users.noreply.github.com> --- .../stories/Namekit/CurrencySymbol.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/storybook.namekit.io/stories/Namekit/CurrencySymbol.stories.tsx b/apps/storybook.namekit.io/stories/Namekit/CurrencySymbol.stories.tsx index ea3dc78db..fa9b32e79 100644 --- a/apps/storybook.namekit.io/stories/Namekit/CurrencySymbol.stories.tsx +++ b/apps/storybook.namekit.io/stories/Namekit/CurrencySymbol.stories.tsx @@ -77,7 +77,7 @@ export const SmallSize: Story = { symbology: CurrencySymbology.Icon, }, }; -export const WithCustomSymbolColor: Story = { +export const WithCustomIconColor: Story = { argTypes: { fill: { control: { type: "color" } }, }, From f6805574b95ec9bfa7a19fe6584446353f5c6b37 Mon Sep 17 00:00:00 2001 From: "caco.eth" <49823133+FrancoAguzzi@users.noreply.github.com> Date: Tue, 10 Sep 2024 14:50:23 -0300 Subject: [PATCH 31/43] Update packages/namekit-react/src/components/CurrencySymbol.tsx Co-authored-by: lightwalker.eth <126201998+lightwalker-eth@users.noreply.github.com> --- packages/namekit-react/src/components/CurrencySymbol.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/namekit-react/src/components/CurrencySymbol.tsx b/packages/namekit-react/src/components/CurrencySymbol.tsx index 81413acac..3280a4c26 100644 --- a/packages/namekit-react/src/components/CurrencySymbol.tsx +++ b/packages/namekit-react/src/components/CurrencySymbol.tsx @@ -62,7 +62,7 @@ interface CurrencySymbolProps extends React.ComponentProps { describeCurrencyInTooltip?: boolean; /** - * The symbology to use when displaying the currency. + * The symbology to use when displaying `currency`. * * Defaults to `CurrencySymbology.Symbol`. */ From 2b3e62f1e90e654c09476044903981b6ebde829d Mon Sep 17 00:00:00 2001 From: "caco.eth" <49823133+FrancoAguzzi@users.noreply.github.com> Date: Tue, 10 Sep 2024 14:50:38 -0300 Subject: [PATCH 32/43] Update packages/namekit-react/src/components/CurrencySymbol.tsx Co-authored-by: lightwalker.eth <126201998+lightwalker-eth@users.noreply.github.com> --- packages/namekit-react/src/components/CurrencySymbol.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/namekit-react/src/components/CurrencySymbol.tsx b/packages/namekit-react/src/components/CurrencySymbol.tsx index 3280a4c26..13ad29016 100644 --- a/packages/namekit-react/src/components/CurrencySymbol.tsx +++ b/packages/namekit-react/src/components/CurrencySymbol.tsx @@ -48,7 +48,7 @@ interface CurrencySymbolProps extends React.ComponentProps { * * Defaults to `CurrencySymbolSize.Small`. * Only applicable when `symbology` is `CurrencySymbology.Icon`. - * If you want to set a custom size for other symbologies, use props to define it (e.g. className="myCustomClassForTextSize") + * If you want to set a custom appearance for other text-based symbologies, use the `className` prop to define it (e.g. className="myCustomClassForTextSize") */ iconSize?: CurrencySymbolSize; From b8e2cbe6916fe368c2377ed149e5c34bb34bc293 Mon Sep 17 00:00:00 2001 From: FrancoAguzzi Date: Tue, 10 Sep 2024 18:09:46 -0300 Subject: [PATCH 33/43] feat: [SC-25297] Create GasIcon --- .../src/components/CurrencySymbol.tsx | 70 ++++++++++--------- .../src/components/icons/GasSymbol.tsx | 27 +++++++ 2 files changed, 63 insertions(+), 34 deletions(-) create mode 100644 packages/namekit-react/src/components/icons/GasSymbol.tsx diff --git a/packages/namekit-react/src/components/CurrencySymbol.tsx b/packages/namekit-react/src/components/CurrencySymbol.tsx index 81413acac..df821eef8 100644 --- a/packages/namekit-react/src/components/CurrencySymbol.tsx +++ b/packages/namekit-react/src/components/CurrencySymbol.tsx @@ -1,24 +1,26 @@ import { PriceCurrencyFormat, Currency } from "@namehash/ens-utils"; import { Tooltip } from "./Tooltip"; -import { UsdSymbol } from "./icons/UsdSymbol"; -import { UsdcSymbol } from "./icons/UsdcSymbol"; -import { WethSymbol } from "./icons/WethSymbol"; -import { EthSymbol } from "./icons/EthSymbol"; -import { DaiSymbol } from "./icons/DaiSymbol"; +import { UsdTextSymbol } from "./icons/UsdTextSymbol"; +import { UsdcIcon } from "./icons/UsdcIcon"; +import { WethIcon } from "./icons/WethIcon"; +import { EthIcon } from "./icons/EthIcon"; +import { DaiIcon } from "./icons/DaiIcon"; +import { GasIcon } from "./icons/GasIcon"; + import React from "react"; /** * The size of the `CurrencySymbol` icon. - * This is defined as a mapping from a `CurrencySymbolSize` to a number. + * This is defined as a mapping from a `CurrencyIconSize` to a number. * This number represents the size (width and height) that the icon for a `CurrencySymbol` should be displayed at, in pixels. */ -export const CurrencySymbolSize = { +export const CurrencyIconSize = { Small: 16, Large: 20, } as const; -export type CurrencySymbolSize = - (typeof CurrencySymbolSize)[keyof typeof CurrencySymbolSize]; +export type CurrencyIconSize = + (typeof CurrencyIconSize)[keyof typeof CurrencyIconSize]; export const CurrencySymbology = { /** @@ -28,7 +30,7 @@ export const CurrencySymbology = { /** * The symbol displayed for `Currency` will be its text-based symbol (e.g. "$"). */ - Symbol: "Symbol", + TextSymbol: "TextSymbol", /** * The symbol displayed for `Currency` will be its graphical icon (e.g. the Ethereum Icon as an SVG). */ @@ -46,11 +48,11 @@ interface CurrencySymbolProps extends React.ComponentProps { /** * The size of the `CurrencySymbol` icon. * - * Defaults to `CurrencySymbolSize.Small`. + * Defaults to `CurrencyIconSize.Small`. * Only applicable when `symbology` is `CurrencySymbology.Icon`. * If you want to set a custom size for other symbologies, use props to define it (e.g. className="myCustomClassForTextSize") */ - iconSize?: CurrencySymbolSize; + iconSize?: CurrencyIconSize; /** * If `true`, hovering over the `CurrencySymbol` will display the @@ -64,7 +66,7 @@ interface CurrencySymbolProps extends React.ComponentProps { /** * The symbology to use when displaying the currency. * - * Defaults to `CurrencySymbology.Symbol`. + * Defaults to `CurrencySymbology.TextSymbol`. */ symbology?: CurrencySymbology; } @@ -72,59 +74,59 @@ interface CurrencySymbolProps extends React.ComponentProps { /** * * @param currency: Currency. The currency to get the Icon for (e.g. Currency.Eth) - * @param iconSize: CurrencySymbolSize. The Icon size (width and height), in pixels. + * @param iconSize: CurrencyIconSize. The Icon size (width and height), in pixels. * @returns */ const getCurrencyIcon = ({ currency, - iconSize = CurrencySymbolSize.Small, + iconSize = CurrencyIconSize.Small, ...props }: { - iconSize: CurrencySymbolSize; currency: Currency; + iconSize: CurrencyIconSize; }): JSX.Element => { switch (currency) { case Currency.Usd: - return ; + /** + * USD is always displayed as a text symbol, never being represented as a SVG icon. + */ + return ; case Currency.Usdc: - return ; + return ; case Currency.Dai: - return ; + return ; case Currency.Weth: - return ; + return ; case Currency.Eth: - return ; - default: - // TODO: We haven't created symbols for `Currency.Gas` yet. - throw new Error( - `Error creating CurrencySymbol: unsupported Currency: "${currency}".`, - ); + return ; + case Currency.Gas: + return ; } }; /** * Returns a JSX.Element containing the currency's symbol, acronym or icon. * @param currency: Currency. The currency to get the symbology for (e.g. Currency.Eth) - * @param iconSize: CurrencySymbolSize. The size to use for Icon Symbology. + * @param iconSize: CurrencyIconSize. The size to use for Icon Symbology. * For other symbologies it is ignored. We suggest you use props to define * other symbologies sizes, as these are not SVGs but texts, instead. (e.g. className="myCustomClassForTextSize") - * @param symbology: CurrencySymbology. The symbology to use (e.g. CurrencySymbology.Symbol) + * @param symbology: CurrencySymbology. The symbology to use (e.g. CurrencySymbology.TextSymbol) * @returns: JSX.Element. The currency's symbol, acronym or icon inside a JSX.Element where all extra props will be applied. */ const getCurrencySymbology = ({ currency, - iconSize = CurrencySymbolSize.Small, - symbology = CurrencySymbology.Symbol, + symbology = CurrencySymbology.TextSymbol, + iconSize = CurrencyIconSize.Small, ...props }: { currency: Currency; - iconSize?: CurrencySymbolSize; symbology: CurrencySymbology; + iconSize?: CurrencyIconSize; }): JSX.Element => { switch (symbology) { case CurrencySymbology.Acronym: return

{PriceCurrencyFormat[currency].Acronym}

; - case CurrencySymbology.Symbol: + case CurrencySymbology.TextSymbol: return

{PriceCurrencyFormat[currency].Symbol}

; case CurrencySymbology.Icon: return getCurrencyIcon({ currency, iconSize, ...props }); @@ -133,9 +135,9 @@ const getCurrencySymbology = ({ export const CurrencySymbol = ({ currency, - iconSize = CurrencySymbolSize.Small, + iconSize = CurrencyIconSize.Small, describeCurrencyInTooltip = false, - symbology = CurrencySymbology.Symbol, + symbology = CurrencySymbology.TextSymbol, ...props }: CurrencySymbolProps): JSX.Element => { const symbologyToDisplay = ( diff --git a/packages/namekit-react/src/components/icons/GasSymbol.tsx b/packages/namekit-react/src/components/icons/GasSymbol.tsx new file mode 100644 index 000000000..afdc5ce15 --- /dev/null +++ b/packages/namekit-react/src/components/icons/GasSymbol.tsx @@ -0,0 +1,27 @@ +import { SVGProps } from "react"; +import React from "react"; + +const GAS_DEFAULT_COLOR = "#272727"; + +export const GasIcon = (props: SVGProps) => { + return ( + + + + + + ); +}; From 5242ef02d682543f6fd980128919e0a5746d97b7 Mon Sep 17 00:00:00 2001 From: FrancoAguzzi Date: Tue, 10 Sep 2024 18:10:30 -0300 Subject: [PATCH 34/43] feat: [SC-25297] Refactor Price related stories examples --- apps/storybook.namekit.io/global.css | 1 - .../Namekit/CurrencySymbol.stories.tsx | 59 +++++------- .../Namekit/DisplayedPrice.stories.tsx | 90 ++++++++----------- .../DisplayedPriceConversion.stories.tsx | 36 +++----- 4 files changed, 73 insertions(+), 113 deletions(-) diff --git a/apps/storybook.namekit.io/global.css b/apps/storybook.namekit.io/global.css index 5deb6578c..d44c17412 100644 --- a/apps/storybook.namekit.io/global.css +++ b/apps/storybook.namekit.io/global.css @@ -5,6 +5,5 @@ .colorful-text { font-weight: 700; - text-decoration: underline; color: lightgreen; } diff --git a/apps/storybook.namekit.io/stories/Namekit/CurrencySymbol.stories.tsx b/apps/storybook.namekit.io/stories/Namekit/CurrencySymbol.stories.tsx index ea3dc78db..2b2f13c16 100644 --- a/apps/storybook.namekit.io/stories/Namekit/CurrencySymbol.stories.tsx +++ b/apps/storybook.namekit.io/stories/Namekit/CurrencySymbol.stories.tsx @@ -3,7 +3,7 @@ import { CurrencySymbol, CurrencySymbology, } from "@namehash/namekit-react/client"; -import { CurrencySymbolSize } from "@namehash/namekit-react/client"; +import { CurrencyIconSize } from "@namehash/namekit-react/client"; import type { Meta, StoryObj } from "@storybook/react"; const meta: Meta = { @@ -11,25 +11,27 @@ const meta: Meta = { title: "Namekit/CurrencySymbol", argTypes: { currency: { - options: [ - Currency.Eth, - Currency.Usd, - Currency.Usdc, - Currency.Weth, - Currency.Dai, - ], - control: { type: "select" }, + options: Object.values(Currency), + control: { + labels: Object.keys(Currency), + type: "select", + }, }, iconSize: { - options: [CurrencySymbolSize.Large, CurrencySymbolSize.Small], + options: Object.values(CurrencyIconSize), + if: { arg: "symbology", eq: CurrencySymbology.Icon }, control: { - type: "select", labels: { - [CurrencySymbolSize.Large]: - "Large (20px) (only applicable for Icon symbology)", - [CurrencySymbolSize.Small]: - "Small (16px) (only applicable for Icon symbology)", + [CurrencyIconSize.Small]: "Small (16px)", + [CurrencyIconSize.Large]: "Large (20px)", }, + type: "select", + }, + }, + className: { + if: { arg: "symbology", neq: CurrencySymbology.Icon }, + control: { + type: "text", }, }, describeCurrencyInTooltip: { control: { type: "boolean" } }, @@ -39,10 +41,9 @@ const meta: Meta = { }, }, args: { - currency: Currency.Eth, - iconSize: CurrencySymbolSize.Small, + iconSize: CurrencyIconSize.Small, describeCurrencyInTooltip: true, - symbology: CurrencySymbology.Symbol, + symbology: CurrencySymbology.TextSymbol, }, }; @@ -52,28 +53,13 @@ type Story = StoryObj; export const AsAnAcronym: Story = { args: { - iconSize: CurrencySymbolSize.Small, currency: Currency.Eth, symbology: CurrencySymbology.Acronym, }, }; -export const AsASymbol: Story = { - args: { - currency: Currency.Eth, - symbology: CurrencySymbology.Symbol, - }, -}; export const AsAnIcon: Story = { args: { currency: Currency.Eth, - iconSize: CurrencySymbolSize.Large, - symbology: CurrencySymbology.Icon, - }, -}; -export const SmallSize: Story = { - args: { - currency: Currency.Eth, - iconSize: CurrencySymbolSize.Small, symbology: CurrencySymbology.Icon, }, }; @@ -83,23 +69,22 @@ export const WithCustomSymbolColor: Story = { }, args: { currency: Currency.Eth, - iconSize: CurrencySymbolSize.Large, symbology: CurrencySymbology.Icon, fill: "#007bff", }, }; -export const WithCustomFontSize: Story = { +export const WithCustomFontStyle: Story = { argTypes: { className: { control: { type: "text" } }, }, args: { - className: "nk-text-3xl", + currency: Currency.Eth, + className: "nk-text-3xl colorful-text", }, }; export const NotShowingTooltipDescription: Story = { args: { currency: Currency.Eth, - iconSize: CurrencySymbolSize.Large, describeCurrencyInTooltip: false, }, }; diff --git a/apps/storybook.namekit.io/stories/Namekit/DisplayedPrice.stories.tsx b/apps/storybook.namekit.io/stories/Namekit/DisplayedPrice.stories.tsx index 2c23bcf2c..f4f56bdc0 100644 --- a/apps/storybook.namekit.io/stories/Namekit/DisplayedPrice.stories.tsx +++ b/apps/storybook.namekit.io/stories/Namekit/DisplayedPrice.stories.tsx @@ -4,7 +4,7 @@ import { CurrencySymbology, PriceDisplaySize, CurrencySymbolPosition, - CurrencySymbolSize, + CurrencyIconSize, } from "@namehash/namekit-react/client"; import type { Meta, StoryObj } from "@storybook/react"; import { @@ -16,20 +16,20 @@ import { } from "@namehash/ens-utils"; import React, { useEffect, useState } from "react"; -const getCurrencySymbolSizeBasedOnPriceDisplaySize = ( +const getCurrencyIconSizeBasedOnPriceDisplaySize = ( displaySize: PriceDisplaySize | undefined, ) => { switch (displaySize) { case PriceDisplaySize.Large: - return CurrencySymbolSize.Large; + return CurrencyIconSize.Large; case PriceDisplaySize.Medium: - return CurrencySymbolSize.Large; + return CurrencyIconSize.Large; case PriceDisplaySize.Small: - return CurrencySymbolSize.Small; + return CurrencyIconSize.Small; case PriceDisplaySize.Micro: - return CurrencySymbolSize.Small; + return CurrencyIconSize.Small; default: - return CurrencySymbolSize.Large; + return CurrencyIconSize.Large; } }; @@ -56,6 +56,7 @@ const meta: Meta = { "Example With USD price", "Example With USDC price", "Example With DAI price", + "Example With GAS price", ], mapping: { ["Example With ETH price"]: numberAsPrice(1, Currency.Eth), @@ -63,6 +64,7 @@ const meta: Meta = { ["Example With USD price"]: numberAsPrice(1, Currency.Usd), ["Example With USDC price"]: numberAsPrice(1, Currency.Usdc), ["Example With DAI price"]: numberAsPrice(1, Currency.Dai), + ["Example With GAS price"]: numberAsPrice(1, Currency.Gas), }, }, /** @@ -96,44 +98,35 @@ const meta: Meta = { }, }, /** - * The possible `displaySize` values for `DisplayedPrice` component. + * The possible `symbolPosition` values for `DisplayedPrice` component. */ - displaySize: { - options: [ - PriceDisplaySize.Large, - PriceDisplaySize.Medium, - PriceDisplaySize.Small, - PriceDisplaySize.Micro, - ], + symbolPosition: { + options: Object.keys(CurrencySymbolPosition), + mapping: CurrencySymbolPosition, control: { type: "select", - labels: { - [PriceDisplaySize.Large]: "Large (24px)", - [PriceDisplaySize.Medium]: "Medium (20px)", - [PriceDisplaySize.Small]: "Small (14px)", - [PriceDisplaySize.Micro]: "Micro (12px for mobile, 14px for desktop)", - }, }, }, /** - * The possible `symbolPosition` values for `DisplayedPrice` component. + * The possible `displaySize` values for `DisplayedPrice` component. */ - symbolPosition: { - options: [CurrencySymbolPosition.Left, CurrencySymbolPosition.Right], + displaySize: { + options: Object.keys(PriceDisplaySize), + mapping: PriceDisplaySize, control: { type: "select", labels: { - [CurrencySymbolPosition.Left]: "Left", - [CurrencySymbolPosition.Right]: "Right", + [PriceDisplaySize.Large]: "Large (24px)", + [PriceDisplaySize.Medium]: "Medium (20px)", + [PriceDisplaySize.Small]: "Small (14px)", + [PriceDisplaySize.Micro]: "Micro (12px for mobile, 14px for desktop)", }, }, }, }, args: { - price: numberAsPrice(1, Currency.Eth), - symbol: undefined, - displaySize: PriceDisplaySize.Medium, symbolPosition: CurrencySymbolPosition.Left, + displaySize: PriceDisplaySize.Medium, }, }; @@ -159,10 +152,12 @@ const exchangeRatesRecord = { [Currency.Usd]: 1, [Currency.Dai]: 1, [Currency.Usdc]: 1, + [Currency.Gas]: 1, }; export const LargeDisplaySize: Story = { args: { + price: numberAsPrice(1, Currency.Eth), displaySize: PriceDisplaySize.Large, }, render: (args, ctx) => { @@ -238,13 +233,13 @@ export const CustomSymbolUsingOurCurrencySymbol: Story = { }, render: (args) => { const [currency, setCurrency] = useState(args.price.currency); - const [currencySize, setCurrencySize] = useState( - CurrencySymbolSize.Large, + const [currencySize, setCurrencySize] = useState( + CurrencyIconSize.Large, ); useEffect(() => { setCurrencySize( - getCurrencySymbolSizeBasedOnPriceDisplaySize(args.displaySize), + getCurrencyIconSizeBasedOnPriceDisplaySize(args.displaySize), ); }, [args.displaySize]); @@ -256,20 +251,13 @@ export const CustomSymbolUsingOurCurrencySymbol: Story = { - -
+ } - > + /> ); }, }; @@ -303,11 +291,11 @@ export const OverflowDisplayPriceWithCustomCurrencyIcon: Story = { }, render: (args) => { const [currency, setCurrency] = useState(args.price.currency); - const [currencySize, setCurrencySize] = useState(); + const [currencySize, setCurrencySize] = useState(); useEffect(() => { setCurrencySize( - getCurrencySymbolSizeBasedOnPriceDisplaySize(args.displaySize), + getCurrencyIconSizeBasedOnPriceDisplaySize(args.displaySize), ); }, [args.displaySize]); @@ -331,7 +319,7 @@ export const OverflowDisplayPriceWithCustomCurrencyIcon: Story = { /> ) } - > + /> ); }, }; @@ -342,11 +330,11 @@ export const UnderflowDisplayPriceWithCustomCurrencyIcon: Story = { }, render: (args) => { const [currency, setCurrency] = useState(args.price.currency); - const [currencySize, setCurrencySize] = useState(); + const [currencySize, setCurrencySize] = useState(); useEffect(() => { setCurrencySize( - getCurrencySymbolSizeBasedOnPriceDisplaySize(args.displaySize), + getCurrencyIconSizeBasedOnPriceDisplaySize(args.displaySize), ); }, [args.displaySize]); @@ -370,7 +358,7 @@ export const UnderflowDisplayPriceWithCustomCurrencyIcon: Story = { /> ) } - > + /> ); }, }; diff --git a/apps/storybook.namekit.io/stories/Namekit/DisplayedPriceConversion.stories.tsx b/apps/storybook.namekit.io/stories/Namekit/DisplayedPriceConversion.stories.tsx index 7b239629d..aab64baf6 100644 --- a/apps/storybook.namekit.io/stories/Namekit/DisplayedPriceConversion.stories.tsx +++ b/apps/storybook.namekit.io/stories/Namekit/DisplayedPriceConversion.stories.tsx @@ -1,14 +1,9 @@ -import { - Currency, - numberAsPrice, - PriceCurrencyFormat, -} from "@namehash/ens-utils"; +import { Currency, numberAsPrice } from "@namehash/ens-utils"; import { CurrencySymbol, CurrencySymbology, CurrencySymbolPosition, - CurrencySymbolSize, - DisplayedPrice, + CurrencyIconSize, DisplayedPriceConversion, PriceDisplaySize, } from "@namehash/namekit-react/client"; @@ -69,12 +64,8 @@ const meta: Meta = { * The possible `displaySize` values for `DisplayedPrice` component. */ displaySize: { - options: [ - PriceDisplaySize.Large, - PriceDisplaySize.Medium, - PriceDisplaySize.Small, - PriceDisplaySize.Micro, - ], + options: Object.keys(PriceDisplaySize), + mapping: PriceDisplaySize, control: { type: "select", labels: { @@ -89,13 +80,10 @@ const meta: Meta = { * The possible `symbolPosition` values for `DisplayedPrice` component. */ symbolPosition: { - options: [CurrencySymbolPosition.Left, CurrencySymbolPosition.Right], + options: Object.keys(CurrencySymbolPosition), + mapping: CurrencySymbolPosition, control: { type: "select", - labels: { - [CurrencySymbolPosition.Left]: "Left", - [CurrencySymbolPosition.Right]: "Right", - }, }, }, }, @@ -103,7 +91,7 @@ const meta: Meta = { price: numberAsPrice(1, Currency.Eth), convertedPrice: numberAsPrice(2000, Currency.Usd), symbol: undefined, - convertedPriceSymbology: CurrencySymbology.Symbol, + convertedPriceSymbology: CurrencySymbology.TextSymbol, displaySize: PriceDisplaySize.Medium, symbolPosition: CurrencySymbolPosition.Left, }, @@ -127,7 +115,7 @@ export const ConvertedPriceWithSymbolSymbology: Story = { args: { price: numberAsPrice(1, Currency.Eth), convertedPrice: numberAsPrice(2000, Currency.Usd), - convertedPriceSymbology: CurrencySymbology.Symbol, + convertedPriceSymbology: CurrencySymbology.TextSymbol, displaySize: PriceDisplaySize.Medium, symbolPosition: CurrencySymbolPosition.Left, }, @@ -145,15 +133,15 @@ export const PriceWithIconSymbology: Story = { args: { price: numberAsPrice(1, Currency.Eth), convertedPrice: numberAsPrice(2000, Currency.Usd), - convertedPriceSymbology: CurrencySymbology.Icon, - displaySize: PriceDisplaySize.Medium, - symbolPosition: CurrencySymbolPosition.Left, symbol: ( ), + convertedPriceSymbology: CurrencySymbology.Icon, + displaySize: PriceDisplaySize.Medium, + symbolPosition: CurrencySymbolPosition.Left, }, }; From f9c7e0291f6627151fcfa2cb6e05bfd80485fa86 Mon Sep 17 00:00:00 2001 From: FrancoAguzzi Date: Tue, 10 Sep 2024 18:11:26 -0300 Subject: [PATCH 35/43] feat: [SC-25297] Rename CurrencySymbology and CurrencySymbolSize props --- packages/ens-utils/src/price.ts | 4 +++- packages/namekit-react/src/client.ts | 2 +- .../namekit-react/src/components/DisplayedPriceConversion.tsx | 2 +- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/ens-utils/src/price.ts b/packages/ens-utils/src/price.ts index 62642e4e5..928a1ae29 100644 --- a/packages/ens-utils/src/price.ts +++ b/packages/ens-utils/src/price.ts @@ -80,7 +80,9 @@ export const numberAsPrice = (number: number, currency: Currency): Price => { */ const numberReadyToBeConvertedToBigInt = Number(numberWithoutDecimals); - // Safely convert the number to BigInt + /* + Safely convert the number to BigInt + */ return { value: BigInt(numberReadyToBeConvertedToBigInt), currency, diff --git a/packages/namekit-react/src/client.ts b/packages/namekit-react/src/client.ts index dd636fbb6..b15e09032 100644 --- a/packages/namekit-react/src/client.ts +++ b/packages/namekit-react/src/client.ts @@ -5,7 +5,7 @@ export { Tooltip } from "./components/Tooltip"; export { CurrencySymbol, CurrencySymbology, - CurrencySymbolSize, + CurrencyIconSize, } from "./components/CurrencySymbol"; export { DisplayedPrice, diff --git a/packages/namekit-react/src/components/DisplayedPriceConversion.tsx b/packages/namekit-react/src/components/DisplayedPriceConversion.tsx index e54bf65b5..b8b2c8c98 100644 --- a/packages/namekit-react/src/components/DisplayedPriceConversion.tsx +++ b/packages/namekit-react/src/components/DisplayedPriceConversion.tsx @@ -10,7 +10,7 @@ interface DisplayedPriceConversionProps extends DisplayedPriceProps { } export const DisplayedPriceConversion = ({ - convertedPriceSymbology = CurrencySymbology.Symbol, + convertedPriceSymbology = CurrencySymbology.TextSymbol, convertedPrice, ...props }: DisplayedPriceConversionProps) => { From a3112ba89a93cfd6bb2834f5bb85c6eb2d997e2f Mon Sep 17 00:00:00 2001 From: FrancoAguzzi Date: Tue, 10 Sep 2024 18:18:27 -0300 Subject: [PATCH 36/43] feat: [SC-25297] Rename namekit-react icons --- .../src/components/icons/{DaiSymbol.tsx => DaiIcon.tsx} | 8 ++++++-- .../src/components/icons/{EthSymbol.tsx => EthIcon.tsx} | 4 ++-- .../src/components/icons/{GasSymbol.tsx => GasIcon.tsx} | 0 packages/namekit-react/src/components/icons/UsdSymbol.tsx | 5 ----- .../namekit-react/src/components/icons/UsdTextSymbol.tsx | 5 +++++ .../src/components/icons/{UsdcSymbol.tsx => UsdcIcon.tsx} | 8 ++++++-- .../src/components/icons/{WethSymbol.tsx => WethIcon.tsx} | 2 +- 7 files changed, 20 insertions(+), 12 deletions(-) rename packages/namekit-react/src/components/icons/{DaiSymbol.tsx => DaiIcon.tsx} (94%) rename packages/namekit-react/src/components/icons/{EthSymbol.tsx => EthIcon.tsx} (91%) rename packages/namekit-react/src/components/icons/{GasSymbol.tsx => GasIcon.tsx} (100%) delete mode 100644 packages/namekit-react/src/components/icons/UsdSymbol.tsx create mode 100644 packages/namekit-react/src/components/icons/UsdTextSymbol.tsx rename packages/namekit-react/src/components/icons/{UsdcSymbol.tsx => UsdcIcon.tsx} (93%) rename packages/namekit-react/src/components/icons/{WethSymbol.tsx => WethIcon.tsx} (96%) diff --git a/packages/namekit-react/src/components/icons/DaiSymbol.tsx b/packages/namekit-react/src/components/icons/DaiIcon.tsx similarity index 94% rename from packages/namekit-react/src/components/icons/DaiSymbol.tsx rename to packages/namekit-react/src/components/icons/DaiIcon.tsx index 7733d7144..c77c83d82 100644 --- a/packages/namekit-react/src/components/icons/DaiSymbol.tsx +++ b/packages/namekit-react/src/components/icons/DaiIcon.tsx @@ -2,7 +2,7 @@ import React, { type SVGProps } from "react"; const DAI_DEFAULT_COLOR = "#F5AC37"; -export const DaiSymbol = (props: SVGProps) => { +export const DaiIcon = (props: SVGProps) => { return ( ) => { - + diff --git a/packages/namekit-react/src/components/icons/EthSymbol.tsx b/packages/namekit-react/src/components/icons/EthIcon.tsx similarity index 91% rename from packages/namekit-react/src/components/icons/EthSymbol.tsx rename to packages/namekit-react/src/components/icons/EthIcon.tsx index f2ea88093..c627a6b30 100644 --- a/packages/namekit-react/src/components/icons/EthSymbol.tsx +++ b/packages/namekit-react/src/components/icons/EthIcon.tsx @@ -2,12 +2,12 @@ import React, { type SVGProps } from "react"; const ETH_DEFAULT_COLOR = "#272727"; -export const EthSymbol = (props: SVGProps) => { +export const EthIcon = (props: SVGProps) => { return ( ) => { - return

$

; -}; diff --git a/packages/namekit-react/src/components/icons/UsdTextSymbol.tsx b/packages/namekit-react/src/components/icons/UsdTextSymbol.tsx new file mode 100644 index 000000000..86cbfd435 --- /dev/null +++ b/packages/namekit-react/src/components/icons/UsdTextSymbol.tsx @@ -0,0 +1,5 @@ +import React from "react"; + +export const UsdTextSymbol = (props: React.ComponentProps<"p">) => { + return

$

; +}; diff --git a/packages/namekit-react/src/components/icons/UsdcSymbol.tsx b/packages/namekit-react/src/components/icons/UsdcIcon.tsx similarity index 93% rename from packages/namekit-react/src/components/icons/UsdcSymbol.tsx rename to packages/namekit-react/src/components/icons/UsdcIcon.tsx index ad305aa76..c52815b1c 100644 --- a/packages/namekit-react/src/components/icons/UsdcSymbol.tsx +++ b/packages/namekit-react/src/components/icons/UsdcIcon.tsx @@ -2,7 +2,7 @@ import React, { type SVGProps } from "react"; const USDC_DEFAULT_COLOR = "#2775CA"; -export const UsdcSymbol = (props: SVGProps) => { +export const UsdcIcon = (props: SVGProps) => { return ( ) => { - + diff --git a/packages/namekit-react/src/components/icons/WethSymbol.tsx b/packages/namekit-react/src/components/icons/WethIcon.tsx similarity index 96% rename from packages/namekit-react/src/components/icons/WethSymbol.tsx rename to packages/namekit-react/src/components/icons/WethIcon.tsx index 481d253f7..3ac360741 100644 --- a/packages/namekit-react/src/components/icons/WethSymbol.tsx +++ b/packages/namekit-react/src/components/icons/WethIcon.tsx @@ -18,7 +18,7 @@ const WETH_DEFAULT_COLORS = [ "#DA3979", ]; -export const WethSymbol = (props: SVGProps) => { +export const WethIcon = (props: SVGProps) => { return ( Date: Wed, 11 Sep 2024 08:57:56 -0300 Subject: [PATCH 37/43] Update packages/namekit-react/src/components/CurrencySymbol.tsx Co-authored-by: lightwalker.eth <126201998+lightwalker-eth@users.noreply.github.com> --- packages/namekit-react/src/components/CurrencySymbol.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/namekit-react/src/components/CurrencySymbol.tsx b/packages/namekit-react/src/components/CurrencySymbol.tsx index f2351a467..52f39c289 100644 --- a/packages/namekit-react/src/components/CurrencySymbol.tsx +++ b/packages/namekit-react/src/components/CurrencySymbol.tsx @@ -32,7 +32,7 @@ export const CurrencySymbology = { */ TextSymbol: "TextSymbol", /** - * The symbol displayed for `Currency` will be its graphical icon (e.g. the Ethereum Icon as an SVG). + * The symbol displayed for `Currency` will be its graphical icon (e.g. `EthIcon` that renders a SVG). If `Currency` is `Currency.Usd` then it will render as `CurrencySymbology.TextSymbol` instead. */ Icon: "Icon", } as const; From c1905332ca4ccd84f4e144867aab9abcb6c68593 Mon Sep 17 00:00:00 2001 From: FrancoAguzzi Date: Wed, 11 Sep 2024 15:15:27 -0300 Subject: [PATCH 38/43] feat: [SC-25297] Remove need of UsdTextSymbol --- .../src/components/CurrencySymbol.tsx | 58 ++++++++++++++----- .../src/components/icons/UsdTextSymbol.tsx | 5 -- 2 files changed, 45 insertions(+), 18 deletions(-) delete mode 100644 packages/namekit-react/src/components/icons/UsdTextSymbol.tsx diff --git a/packages/namekit-react/src/components/CurrencySymbol.tsx b/packages/namekit-react/src/components/CurrencySymbol.tsx index 52f39c289..c8874c7b2 100644 --- a/packages/namekit-react/src/components/CurrencySymbol.tsx +++ b/packages/namekit-react/src/components/CurrencySymbol.tsx @@ -1,7 +1,6 @@ import { PriceCurrencyFormat, Currency } from "@namehash/ens-utils"; import { Tooltip } from "./Tooltip"; -import { UsdTextSymbol } from "./icons/UsdTextSymbol"; import { UsdcIcon } from "./icons/UsdcIcon"; import { WethIcon } from "./icons/WethIcon"; import { EthIcon } from "./icons/EthIcon"; @@ -85,23 +84,44 @@ const getCurrencyIcon = ({ currency: Currency; iconSize: CurrencyIconSize; }): JSX.Element => { + let symbology = <>; + switch (currency) { case Currency.Usd: /** * USD is always displayed as a text symbol, never being represented as a SVG icon. */ - return ; + return ( + + ); case Currency.Usdc: - return ; + symbology = ; + break; case Currency.Dai: - return ; + symbology = ; + break; case Currency.Weth: - return ; + symbology = ; + break; case Currency.Eth: - return ; + symbology = ; + break; case Currency.Gas: - return ; + symbology = ; + break; } + + return ( + + {symbology} + + ); }; /** @@ -125,9 +145,23 @@ const getCurrencySymbology = ({ }): JSX.Element => { switch (symbology) { case CurrencySymbology.Acronym: - return

{PriceCurrencyFormat[currency].Acronym}

; + return ( +

+ {PriceCurrencyFormat[currency].Acronym} +

+ ); case CurrencySymbology.TextSymbol: - return

{PriceCurrencyFormat[currency].Symbol}

; + return ( +

+ {PriceCurrencyFormat[currency].Symbol} +

+ ); case CurrencySymbology.Icon: return getCurrencyIcon({ currency, iconSize, ...props }); } @@ -141,16 +175,14 @@ export const CurrencySymbol = ({ ...props }: CurrencySymbolProps): JSX.Element => { const symbologyToDisplay = ( - + <> {getCurrencySymbology({ currency, iconSize, symbology, ...props, })} - + ); if (!describeCurrencyInTooltip) return symbologyToDisplay; diff --git a/packages/namekit-react/src/components/icons/UsdTextSymbol.tsx b/packages/namekit-react/src/components/icons/UsdTextSymbol.tsx deleted file mode 100644 index 86cbfd435..000000000 --- a/packages/namekit-react/src/components/icons/UsdTextSymbol.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import React from "react"; - -export const UsdTextSymbol = (props: React.ComponentProps<"p">) => { - return

$

; -}; From f068154acb317fe00b7418605c442a76087a583c Mon Sep 17 00:00:00 2001 From: FrancoAguzzi Date: Wed, 11 Sep 2024 15:24:03 -0300 Subject: [PATCH 39/43] feat: [SC-25297] Create explicit className for CurrencySymbol setting --- .../src/components/CurrencySymbol.tsx | 69 ++++++++++++++++--- 1 file changed, 61 insertions(+), 8 deletions(-) diff --git a/packages/namekit-react/src/components/CurrencySymbol.tsx b/packages/namekit-react/src/components/CurrencySymbol.tsx index c8874c7b2..abb7d6bd9 100644 --- a/packages/namekit-react/src/components/CurrencySymbol.tsx +++ b/packages/namekit-react/src/components/CurrencySymbol.tsx @@ -49,10 +49,17 @@ interface CurrencySymbolProps extends React.ComponentProps { * * Defaults to `CurrencyIconSize.Small`. * Only applicable when `symbology` is `CurrencySymbology.Icon`. - * If you want to set a custom appearance for other text-based symbologies, use the `className` prop to define it (e.g. className="myCustomClassForTextSize") */ iconSize?: CurrencyIconSize; + /** + * Classes applied to text-based symbologies (e.g. className="myCustomClassForTextSize") + * + * Defaults to "". + * Useful when `symbology` is `CurrencySymbology.TextSymbol` or `CurrencySymbology.Acronym`. + */ + className?: string; + /** * If `true`, hovering over the `CurrencySymbol` will display the * name of `currency` in a `Tooltip`. If `false` then the `CurrencySymbol` @@ -74,15 +81,18 @@ interface CurrencySymbolProps extends React.ComponentProps { * * @param currency: Currency. The currency to get the Icon for (e.g. Currency.Eth) * @param iconSize: CurrencyIconSize. The Icon size (width and height), in pixels. + * @param className: string. The classes to apply to the Icon. * @returns */ const getCurrencyIcon = ({ currency, iconSize = CurrencyIconSize.Small, + className = "", ...props }: { currency: Currency; iconSize: CurrencyIconSize; + className?: string; }): JSX.Element => { let symbology = <>; @@ -95,23 +105,59 @@ const getCurrencyIcon = ({ ); case Currency.Usdc: - symbology = ; + symbology = ( + + ); break; case Currency.Dai: - symbology = ; + symbology = ( + + ); break; case Currency.Weth: - symbology = ; + symbology = ( + + ); break; case Currency.Eth: - symbology = ; + symbology = ( + + ); break; case Currency.Gas: - symbology = ; + symbology = ( + + ); break; } @@ -127,27 +173,31 @@ const getCurrencyIcon = ({ /** * Returns a JSX.Element containing the currency's symbol, acronym or icon. * @param currency: Currency. The currency to get the symbology for (e.g. Currency.Eth) + * @param symbology: CurrencySymbology. The symbology to use (e.g. CurrencySymbology.TextSymbol) * @param iconSize: CurrencyIconSize. The size to use for Icon Symbology. * For other symbologies it is ignored. We suggest you use props to define * other symbologies sizes, as these are not SVGs but texts, instead. (e.g. className="myCustomClassForTextSize") - * @param symbology: CurrencySymbology. The symbology to use (e.g. CurrencySymbology.TextSymbol) + * @param className: string. The classes to apply to the symbology. * @returns: JSX.Element. The currency's symbol, acronym or icon inside a JSX.Element where all extra props will be applied. */ const getCurrencySymbology = ({ currency, symbology = CurrencySymbology.TextSymbol, iconSize = CurrencyIconSize.Small, + className = "", ...props }: { currency: Currency; symbology: CurrencySymbology; iconSize?: CurrencyIconSize; + className?: string; }): JSX.Element => { switch (symbology) { case CurrencySymbology.Acronym: return (

{PriceCurrencyFormat[currency].Acronym} @@ -157,13 +207,14 @@ const getCurrencySymbology = ({ return (

{PriceCurrencyFormat[currency].Symbol}

); case CurrencySymbology.Icon: - return getCurrencyIcon({ currency, iconSize, ...props }); + return getCurrencyIcon({ currency, iconSize, className, ...props }); } }; @@ -172,6 +223,7 @@ export const CurrencySymbol = ({ iconSize = CurrencyIconSize.Small, describeCurrencyInTooltip = false, symbology = CurrencySymbology.TextSymbol, + className = "", ...props }: CurrencySymbolProps): JSX.Element => { const symbologyToDisplay = ( @@ -180,6 +232,7 @@ export const CurrencySymbol = ({ currency, iconSize, symbology, + className, ...props, })} From b3631c1171079aa3173e8447d6d45bc4ceec3922 Mon Sep 17 00:00:00 2001 From: FrancoAguzzi Date: Wed, 11 Sep 2024 15:27:55 -0300 Subject: [PATCH 40/43] feat: [SC-25297] Add CurrencySymbol Storybook stories --- .../Namekit/CurrencySymbol.stories.tsx | 22 +++++++++++++++---- .../src/components/CurrencySymbol.tsx | 2 +- 2 files changed, 19 insertions(+), 5 deletions(-) diff --git a/apps/storybook.namekit.io/stories/Namekit/CurrencySymbol.stories.tsx b/apps/storybook.namekit.io/stories/Namekit/CurrencySymbol.stories.tsx index 5965306aa..fc2fb7bdc 100644 --- a/apps/storybook.namekit.io/stories/Namekit/CurrencySymbol.stories.tsx +++ b/apps/storybook.namekit.io/stories/Namekit/CurrencySymbol.stories.tsx @@ -42,7 +42,7 @@ const meta: Meta = { }, args: { iconSize: CurrencyIconSize.Small, - describeCurrencyInTooltip: true, + describeCurrencyInTooltip: false, symbology: CurrencySymbology.TextSymbol, }, }; @@ -57,9 +57,23 @@ export const AsAnAcronym: Story = { symbology: CurrencySymbology.Acronym, }, }; -export const AsAnIcon: Story = { +export const AsATextSymbol: Story = { + args: { + currency: Currency.Eth, + symbology: CurrencySymbology.TextSymbol, + }, +}; +export const AsASmallIcon: Story = { args: { currency: Currency.Eth, + iconSize: CurrencyIconSize.Small, + symbology: CurrencySymbology.Icon, + }, +}; +export const AsALargeIcon: Story = { + args: { + currency: Currency.Eth, + iconSize: CurrencyIconSize.Large, symbology: CurrencySymbology.Icon, }, }; @@ -82,9 +96,9 @@ export const WithCustomFontStyle: Story = { className: "nk-text-3xl colorful-text", }, }; -export const NotShowingTooltipDescription: Story = { +export const ShowingTooltipDescription: Story = { args: { currency: Currency.Eth, - describeCurrencyInTooltip: false, + describeCurrencyInTooltip: true, }, }; diff --git a/packages/namekit-react/src/components/CurrencySymbol.tsx b/packages/namekit-react/src/components/CurrencySymbol.tsx index abb7d6bd9..9df3fcc47 100644 --- a/packages/namekit-react/src/components/CurrencySymbol.tsx +++ b/packages/namekit-react/src/components/CurrencySymbol.tsx @@ -65,7 +65,7 @@ interface CurrencySymbolProps extends React.ComponentProps { * name of `currency` in a `Tooltip`. If `false` then the `CurrencySymbol` * won't have any `Tooltip`. * - * Defaults to `true`. + * Defaults to `false`. */ describeCurrencyInTooltip?: boolean; From 792b0c31edff4f8e160a3d754c384281e8fd1d47 Mon Sep 17 00:00:00 2001 From: FrancoAguzzi Date: Wed, 11 Sep 2024 15:28:39 -0300 Subject: [PATCH 41/43] feat: [SC-25297] Remove prop as per new alignment to its default value --- .../namekit-react/src/components/DisplayedPriceConversion.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/namekit-react/src/components/DisplayedPriceConversion.tsx b/packages/namekit-react/src/components/DisplayedPriceConversion.tsx index b8b2c8c98..9c582a934 100644 --- a/packages/namekit-react/src/components/DisplayedPriceConversion.tsx +++ b/packages/namekit-react/src/components/DisplayedPriceConversion.tsx @@ -30,7 +30,6 @@ export const DisplayedPriceConversion = ({ symbolPosition={props.symbolPosition} symbol={ From a401367482f27b585eeac615db3406dba973112e Mon Sep 17 00:00:00 2001 From: "caco.eth" <49823133+FrancoAguzzi@users.noreply.github.com> Date: Mon, 4 Nov 2024 18:37:06 -0300 Subject: [PATCH 42/43] Update packages/namekit-react/src/components/CurrencySymbol.tsx --- packages/namekit-react/src/components/CurrencySymbol.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/namekit-react/src/components/CurrencySymbol.tsx b/packages/namekit-react/src/components/CurrencySymbol.tsx index 9df3fcc47..f077b0bd8 100644 --- a/packages/namekit-react/src/components/CurrencySymbol.tsx +++ b/packages/namekit-react/src/components/CurrencySymbol.tsx @@ -78,7 +78,6 @@ interface CurrencySymbolProps extends React.ComponentProps { } /** - * * @param currency: Currency. The currency to get the Icon for (e.g. Currency.Eth) * @param iconSize: CurrencyIconSize. The Icon size (width and height), in pixels. * @param className: string. The classes to apply to the Icon. From 7f1a99847c6859392158580eb90ec5c799170596 Mon Sep 17 00:00:00 2001 From: "caco.eth" <49823133+FrancoAguzzi@users.noreply.github.com> Date: Mon, 4 Nov 2024 18:37:14 -0300 Subject: [PATCH 43/43] Update packages/namekit-react/src/components/CurrencySymbol.tsx --- packages/namekit-react/src/components/CurrencySymbol.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/namekit-react/src/components/CurrencySymbol.tsx b/packages/namekit-react/src/components/CurrencySymbol.tsx index f077b0bd8..b2b68659c 100644 --- a/packages/namekit-react/src/components/CurrencySymbol.tsx +++ b/packages/namekit-react/src/components/CurrencySymbol.tsx @@ -81,7 +81,6 @@ interface CurrencySymbolProps extends React.ComponentProps { * @param currency: Currency. The currency to get the Icon for (e.g. Currency.Eth) * @param iconSize: CurrencyIconSize. The Icon size (width and height), in pixels. * @param className: string. The classes to apply to the Icon. - * @returns */ const getCurrencyIcon = ({ currency,