feat: migrate DisplayedPrice and create DisplayedPriceWithSymbol

[FrancoAguzzi]

Addresses both:

1. Transition and related components to NameKit
2. Break DisplayedPrice into two single Price components

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
examples.nameguard.io	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 4, 2024 9:44pm
nameguard.io	🛑 Canceled (Inspect)			Nov 4, 2024 9:44pm
namehashlabs.org	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 4, 2024 9:44pm
storybook.namekit.io	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 4, 2024 9:44pm

[changeset-bot]

🦋 Changeset detected

Latest commit: a401367

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 5 packages

Name	Type
@namehash/namekit-react	Minor
@namehash/ens-utils	Minor
@namehash/nameguard-react	Patch
@namehash/nameguard-js	Patch
@namehash/nameguard	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[lightwalker-eth]

@FrancoAguzzi Thanks for updates. Reviewed and shared feedback.

[lightwalker-eth]

The current solution here is good. I was also curious: What if we wrote this so that we returned a CurrencySymbol (therefore it would be a recursive CurrencySymbol) except here we would override the symbology to be for the text symbol instead of the icon?

Maybe this could be achieved by returning a new <CurrencySymbol ...> or perhaps we would just call getCurrencySymbology but with a new value for symbology?

If we did this, maybe we could fully remove the need for any UsdTextSymbol UI component?

Appreciate your advice 👍

[FrancoAguzzi]

The solution sounds wise

By overlooking the code related to this solution I have understood that recursively rendering CurrencySymbol would result in duplicated span elements. By doing a code test, this was exactly the result:

This happens because span is rendered in CurrencySymbol.

I also three or four different approaches to achieve the goal but the results were not the expected, so far.

Below drawn chart resumes the current state:

I will further test ideas here so we can delete the UsdTextSymbol component from our codebase 🙂👍🏼

[FrancoAguzzi]

I could achieve this by understanding this goal:

And arriving at this solution:

/**
 *
 * @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.
 * @returns
 */
const getCurrencyIcon = ({
  currency,
  iconSize = CurrencyIconSize.Small,
  ...props
}: {
  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 (
        <CurrencySymbol
          {...props}
          currency={currency}
          symbology={CurrencySymbology.TextSymbol}
        />
      );
    case Currency.Usdc:
      symbology = <UsdcIcon {...props} width={iconSize} height={iconSize} />;
      break;
    case Currency.Dai:
      symbology = <DaiIcon {...props} width={iconSize} height={iconSize} />;
      break;
    case Currency.Weth:
      symbology = <WethIcon {...props} width={iconSize} height={iconSize} />;
      break;
    case Currency.Eth:
      symbology = <EthIcon {...props} width={iconSize} height={iconSize} />;
      break;
    case Currency.Gas:
      symbology = <GasIcon {...props} width={iconSize} height={iconSize} />;
      break;
  }

  return (
    <span
      aria-label={`${PriceCurrencyFormat[currency].ExtendedCurrencyNameSingular} symbol`}
    >
      {symbology}
    </span>
  );
};

[FrancoAguzzi]

More than that, I had to update getCurrencySymbology to:

/**
 * 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: 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)
 * @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,
  ...props
}: {
  currency: Currency;
  symbology: CurrencySymbology;
  iconSize?: CurrencyIconSize;
}): JSX.Element => {
  switch (symbology) {
    case CurrencySymbology.Acronym:
      return (
        <p
          {...props}
          aria-label={`${PriceCurrencyFormat[currency].ExtendedCurrencyNameSingular} symbol`}
        >
          {PriceCurrencyFormat[currency].Acronym}
        </p>
      );
    case CurrencySymbology.TextSymbol:
      return (
        <p
          {...props}
          aria-label={`${PriceCurrencyFormat[currency].ExtendedCurrencyNameSingular} symbol`}
        >
          {PriceCurrencyFormat[currency].Symbol}
        </p>
      );
    case CurrencySymbology.Icon:
      return getCurrencyIcon({ currency, iconSize, ...props });
  }
};

These changes fix the previous problems and it match our goal 👍🏼

BUT: is it good?
IMO it is. All symbols returned by this function will now have a custom "alt text" set.