feat: migrate DisplayedPrice and create DisplayedPriceWithSymbol

.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

apps/storybook.namekit.io/global.css

@@ -5,6 +5,5 @@
 
 .colorful-text {
   font-weight: 700;
-  text-decoration: underline;
   color: lightgreen;
 }

apps/storybook.namekit.io/stories/Namekit/CurrencySymbol.stories.tsx

@@ -3,33 +3,35 @@ 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<typeof CurrencySymbol> = {
   component: CurrencySymbol,
   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<typeof CurrencySymbol> = {
     },
   },
   args: {
-    currency: Currency.Eth,
-    iconSize: CurrencySymbolSize.Small,
+    iconSize: CurrencyIconSize.Small,
     describeCurrencyInTooltip: true,
-    symbology: CurrencySymbology.Symbol,
+    symbology: CurrencySymbology.TextSymbol,
   },
 };
 
@@ -52,54 +53,38 @@ type Story = StoryObj<typeof CurrencySymbol>;
 
 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,
   },
 };
-export const WithCustomSymbolColor: Story = {
+export const WithCustomIconColor: Story = {
   argTypes: {
     fill: { control: { type: "color" } },
   },
   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,
   },
 };

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,13 +56,15 @@ const meta: Meta<typeof DisplayedPrice> = {
         "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),
         ["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),
+        ["Example With GAS price"]: numberAsPrice(1, Currency.Gas),
       },
     },
     /**
@@ -96,44 +98,35 @@ const meta: Meta<typeof DisplayedPrice> = {
       },
     },
     /**
-     * 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<Currency>(args.price.currency);
-    const [currencySize, setCurrencySize] = useState<CurrencySymbolSize>(
-      CurrencySymbolSize.Large,
+    const [currencySize, setCurrencySize] = useState<CurrencyIconSize>(
+      CurrencyIconSize.Large,
     );
 
     useEffect(() => {
       setCurrencySize(
-        getCurrencySymbolSizeBasedOnPriceDisplaySize(args.displaySize),
+        getCurrencyIconSizeBasedOnPriceDisplaySize(args.displaySize),
       );
     }, [args.displaySize]);
 
@@ -256,20 +251,13 @@ export const CustomSymbolUsingOurCurrencySymbol: Story = {
       <DisplayedPrice
         {...args}
         symbol={
-          <div
-            style={{
-              marginBottom:
-                currencySize === CurrencySymbolSize.Large ? "0.1rem" : "",
-            }}
-          >
-            <CurrencySymbol
-              size={currencySize}
-              currency={currency}
-              symbology={CurrencySymbology.Icon}
-            />
-          </div>
+          <CurrencySymbol
+            size={currencySize}
+            currency={currency}
+            symbology={CurrencySymbology.Icon}
+          />
         }
-      ></DisplayedPrice>
+      />
     );
   },
 };
@@ -303,11 +291,11 @@ export const OverflowDisplayPriceWithCustomCurrencyIcon: Story = {
   },
   render: (args) => {
     const [currency, setCurrency] = useState<Currency>(args.price.currency);
-    const [currencySize, setCurrencySize] = useState<CurrencySymbolSize>();
+    const [currencySize, setCurrencySize] = useState<CurrencyIconSize>();
 
     useEffect(() => {
       setCurrencySize(
-        getCurrencySymbolSizeBasedOnPriceDisplaySize(args.displaySize),
+        getCurrencyIconSizeBasedOnPriceDisplaySize(args.displaySize),
       );
     }, [args.displaySize]);
 
@@ -331,7 +319,7 @@ export const OverflowDisplayPriceWithCustomCurrencyIcon: Story = {
             />
           )
         }
-      ></DisplayedPrice>
+      />
     );
   },
 };
@@ -342,11 +330,11 @@ export const UnderflowDisplayPriceWithCustomCurrencyIcon: Story = {
   },
   render: (args) => {
     const [currency, setCurrency] = useState<Currency>(args.price.currency);
-    const [currencySize, setCurrencySize] = useState<CurrencySymbolSize>();
+    const [currencySize, setCurrencySize] = useState<CurrencyIconSize>();
 
     useEffect(() => {
       setCurrencySize(
-        getCurrencySymbolSizeBasedOnPriceDisplaySize(args.displaySize),
+        getCurrencyIconSizeBasedOnPriceDisplaySize(args.displaySize),
       );
     }, [args.displaySize]);
 
@@ -364,13 +352,13 @@ export const UnderflowDisplayPriceWithCustomCurrencyIcon: Story = {
         symbol={
           args.symbol || (
             <CurrencySymbol
-              size={currencySize}
               currency={currency}
+              iconSize={currencySize}
               symbology={CurrencySymbology.Icon}
             />
           )
         }
-      ></DisplayedPrice>
+      />
     );
   },
 };