@0xsquid/ui 0.27.2 → 0.27.3-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/cjs/index.js +31 -9
  2. package/dist/cjs/types/core/numbers.d.ts +7 -1
  3. package/dist/esm/index.js +31 -9
  4. package/dist/esm/types/core/numbers.d.ts +7 -1
  5. package/package.json +1 -1
package/dist/cjs/index.js CHANGED
@@ -6622,9 +6622,11 @@ function convertUSDToTokenAmount(usdAmount, tokenPrice, maxDecimals) {
6622
6622
  const price = new BigNumber(tokenPrice);
6623
6623
  return amount.dividedBy(price).decimalPlaces(maxDecimals).toString();
6624
6624
  }
6625
- const INTL_NUMBER_FORMATTER = new Intl.NumberFormat("en-US", {
6626
- minimumFractionDigits: 2,
6627
- maximumFractionDigits: 5,
6625
+ const INTL_TOKEN_AMOUNT_FORMATTER = new Intl.NumberFormat("en-US", {
6626
+ minimumFractionDigits: 0,
6627
+ maximumFractionDigits: 4,
6628
+ minimumSignificantDigits: 2,
6629
+ maximumSignificantDigits: 4,
6628
6630
  });
6629
6631
  /**
6630
6632
  * Formats a number to the en-US number format
@@ -6632,8 +6634,24 @@ const INTL_NUMBER_FORMATTER = new Intl.NumberFormat("en-US", {
6632
6634
  * @param amount - The number to format
6633
6635
  * @returns The formatted string
6634
6636
  */
6635
- function formatAmount(amount) {
6636
- return INTL_NUMBER_FORMATTER.format(amount);
6637
+ function formatTokenAmount(amount = "0") {
6638
+ return INTL_TOKEN_AMOUNT_FORMATTER.format(amount);
6639
+ }
6640
+ const INTL_USD_AMOUNT_FORMATTER = new Intl.NumberFormat("en-US", {
6641
+ style: "currency",
6642
+ currency: "USD",
6643
+ minimumFractionDigits: 2,
6644
+ maximumFractionDigits: 2,
6645
+ notation: "compact",
6646
+ compactDisplay: "short",
6647
+ });
6648
+ function formatUsdAmount(amount = "0", { includeSign = true, formatIfVerySmall = 0.01 } = {}) {
6649
+ const parsedAmount = Number(amount);
6650
+ if (parsedAmount < formatIfVerySmall && parsedAmount > 0) {
6651
+ return includeSign ? "<$0.01" : "<0.01";
6652
+ }
6653
+ const formattedAmount = INTL_USD_AMOUNT_FORMATTER.format(parsedAmount);
6654
+ return includeSign ? formattedAmount : formattedAmount.replace("$", "");
6637
6655
  }
6638
6656
  function trimExtraDecimals(value, maxDecimals) {
6639
6657
  var _a;
@@ -26582,14 +26600,18 @@ function NumericInput(_a) {
26582
26600
  return "0";
26583
26601
  if (userInputType === UserInputType.TOKEN) {
26584
26602
  if (direction === "from") {
26585
- return formatAmount(convertTokenAmountToUSD(inputValue, token.price, maxUsdDecimals));
26603
+ return formatUsdAmount(convertTokenAmountToUSD(inputValue, token.price, maxUsdDecimals), {
26604
+ includeSign: false,
26605
+ });
26586
26606
  }
26587
26607
  else {
26588
- return formatAmount((_a = inputModeButton === null || inputModeButton === void 0 ? void 0 : inputModeButton.amountUsd) !== null && _a !== void 0 ? _a : "0");
26608
+ return formatUsdAmount((_a = inputModeButton === null || inputModeButton === void 0 ? void 0 : inputModeButton.amountUsd) !== null && _a !== void 0 ? _a : "0", {
26609
+ includeSign: false,
26610
+ });
26589
26611
  }
26590
26612
  }
26591
26613
  else {
26592
- return formatAmount(convertUSDToTokenAmount(inputValue, token.price, token.decimals));
26614
+ return formatTokenAmount(convertUSDToTokenAmount(inputValue, token.price, token.decimals));
26593
26615
  }
26594
26616
  }, [
26595
26617
  inputValue,
@@ -26606,7 +26628,7 @@ function NumericInput(_a) {
26606
26628
  : "tw-text-grey-300";
26607
26629
  const BalanceChipTag = balanceChipClickable ? "button" : "div";
26608
26630
  const balanceFormatted = React$1.useMemo(() => {
26609
- return formatAmount(balance !== null && balance !== void 0 ? balance : "0");
26631
+ return formatTokenAmount(balance !== null && balance !== void 0 ? balance : "0");
26610
26632
  }, [balance]);
26611
26633
  const containerClassname = "tw-px-squid-xs tw-pb-[15px] tw-pt-[5px] tw-text-heading-small tw-font-heading-regular mobile-lg:tw-px-squid-m tw-relative tw-h-[65px] mobile-sm-height:tw-h-[75px]";
26612
26634
  const inputRef = React$1.useRef(null);
package/dist/cjs/types/core/numbers.d.ts CHANGED
@@ -19,5 +19,11 @@ export declare function convertUSDToTokenAmount(usdAmount: string | number, toke
19
19
  * @param amount - The number to format
20
20
  * @returns The formatted string
21
21
  */
22
- export declare function formatAmount(amount: number | bigint | string): string;
22
+ export declare function formatTokenAmount(amount?: number | bigint | string): string;
23
+ interface FormatUsdAmountOptions {
24
+ includeSign?: boolean;
25
+ formatIfVerySmall?: number;
26
+ }
27
+ export declare function formatUsdAmount(amount?: number | bigint | string, { includeSign, formatIfVerySmall }?: FormatUsdAmountOptions): string;
23
28
  export declare function trimExtraDecimals(value: string, maxDecimals?: number): string;
29
+ export {};
package/dist/esm/index.js CHANGED
@@ -6602,9 +6602,11 @@ function convertUSDToTokenAmount(usdAmount, tokenPrice, maxDecimals) {
6602
6602
  const price = new BigNumber(tokenPrice);
6603
6603
  return amount.dividedBy(price).decimalPlaces(maxDecimals).toString();
6604
6604
  }
6605
- const INTL_NUMBER_FORMATTER = new Intl.NumberFormat("en-US", {
6606
- minimumFractionDigits: 2,
6607
- maximumFractionDigits: 5,
6605
+ const INTL_TOKEN_AMOUNT_FORMATTER = new Intl.NumberFormat("en-US", {
6606
+ minimumFractionDigits: 0,
6607
+ maximumFractionDigits: 4,
6608
+ minimumSignificantDigits: 2,
6609
+ maximumSignificantDigits: 4,
6608
6610
  });
6609
6611
  /**
6610
6612
  * Formats a number to the en-US number format
@@ -6612,8 +6614,24 @@ const INTL_NUMBER_FORMATTER = new Intl.NumberFormat("en-US", {
6612
6614
  * @param amount - The number to format
6613
6615
  * @returns The formatted string
6614
6616
  */
6615
- function formatAmount(amount) {
6616
- return INTL_NUMBER_FORMATTER.format(amount);
6617
+ function formatTokenAmount(amount = "0") {
6618
+ return INTL_TOKEN_AMOUNT_FORMATTER.format(amount);
6619
+ }
6620
+ const INTL_USD_AMOUNT_FORMATTER = new Intl.NumberFormat("en-US", {
6621
+ style: "currency",
6622
+ currency: "USD",
6623
+ minimumFractionDigits: 2,
6624
+ maximumFractionDigits: 2,
6625
+ notation: "compact",
6626
+ compactDisplay: "short",
6627
+ });
6628
+ function formatUsdAmount(amount = "0", { includeSign = true, formatIfVerySmall = 0.01 } = {}) {
6629
+ const parsedAmount = Number(amount);
6630
+ if (parsedAmount < formatIfVerySmall && parsedAmount > 0) {
6631
+ return includeSign ? "<$0.01" : "<0.01";
6632
+ }
6633
+ const formattedAmount = INTL_USD_AMOUNT_FORMATTER.format(parsedAmount);
6634
+ return includeSign ? formattedAmount : formattedAmount.replace("$", "");
6617
6635
  }
6618
6636
  function trimExtraDecimals(value, maxDecimals) {
6619
6637
  var _a;
@@ -26562,14 +26580,18 @@ function NumericInput(_a) {
26562
26580
  return "0";
26563
26581
  if (userInputType === UserInputType.TOKEN) {
26564
26582
  if (direction === "from") {
26565
- return formatAmount(convertTokenAmountToUSD(inputValue, token.price, maxUsdDecimals));
26583
+ return formatUsdAmount(convertTokenAmountToUSD(inputValue, token.price, maxUsdDecimals), {
26584
+ includeSign: false,
26585
+ });
26566
26586
  }
26567
26587
  else {
26568
- return formatAmount((_a = inputModeButton === null || inputModeButton === void 0 ? void 0 : inputModeButton.amountUsd) !== null && _a !== void 0 ? _a : "0");
26588
+ return formatUsdAmount((_a = inputModeButton === null || inputModeButton === void 0 ? void 0 : inputModeButton.amountUsd) !== null && _a !== void 0 ? _a : "0", {
26589
+ includeSign: false,
26590
+ });
26569
26591
  }
26570
26592
  }
26571
26593
  else {
26572
- return formatAmount(convertUSDToTokenAmount(inputValue, token.price, token.decimals));
26594
+ return formatTokenAmount(convertUSDToTokenAmount(inputValue, token.price, token.decimals));
26573
26595
  }
26574
26596
  }, [
26575
26597
  inputValue,
@@ -26586,7 +26608,7 @@ function NumericInput(_a) {
26586
26608
  : "tw-text-grey-300";
26587
26609
  const BalanceChipTag = balanceChipClickable ? "button" : "div";
26588
26610
  const balanceFormatted = useMemo(() => {
26589
- return formatAmount(balance !== null && balance !== void 0 ? balance : "0");
26611
+ return formatTokenAmount(balance !== null && balance !== void 0 ? balance : "0");
26590
26612
  }, [balance]);
26591
26613
  const containerClassname = "tw-px-squid-xs tw-pb-[15px] tw-pt-[5px] tw-text-heading-small tw-font-heading-regular mobile-lg:tw-px-squid-m tw-relative tw-h-[65px] mobile-sm-height:tw-h-[75px]";
26592
26614
  const inputRef = useRef(null);
package/dist/esm/types/core/numbers.d.ts CHANGED
@@ -19,5 +19,11 @@ export declare function convertUSDToTokenAmount(usdAmount: string | number, toke
19
19
  * @param amount - The number to format
20
20
  * @returns The formatted string
21
21
  */
22
- export declare function formatAmount(amount: number | bigint | string): string;
22
+ export declare function formatTokenAmount(amount?: number | bigint | string): string;
23
+ interface FormatUsdAmountOptions {
24
+ includeSign?: boolean;
25
+ formatIfVerySmall?: number;
26
+ }
27
+ export declare function formatUsdAmount(amount?: number | bigint | string, { includeSign, formatIfVerySmall }?: FormatUsdAmountOptions): string;
23
28
  export declare function trimExtraDecimals(value: string, maxDecimals?: number): string;
29
+ export {};
package/package.json CHANGED
@@ -5,7 +5,7 @@
5
5
  "url": "git+https://github.com/0xsquid/squid-ui.git"
6
6
  },
7
7
  "description": "Squid's UI components",
8
- "version": "0.27.2",
8
+ "version": "0.27.3-beta.0",
9
9
  "author": "",
10
10
  "license": "MIT",
11
11
  "resolutions": {