@rabbitio/ui-kit 1.0.0-beta.123 → 1.0.0-beta.124

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rabbitio/ui-kit",
-    "version": "1.0.0-beta.123",
+    "version": "1.0.0-beta.124",
     "description": "Rabbit.io react.js components kit",
     "type": "module",
     "main": "./dist/index.cjs",

package/src/common-apis/utils/amountUtils.js

@@ -16,6 +16,7 @@ export class AmountUtils {
         ticker: true, // If true, currency code will be shown
         enableCurrencySymbols: true, // Enables currency symbols where available. Requires "ticker: true"
         collapsible: true, // Enables minimization of amounts over 1 million (example: 1.52M)
+        collapseThousands: false, // Enables "K" minimization for amounts over 1 thousand (example: 1.52K)
         limitTotalLength: true, // Limits the total amount length to maxTotalLength
         extraSmallLength: false, // Limits the total amount length to extraSmallMaxTotalLength
     };
@@ -48,8 +49,11 @@ export class AmountUtils {
                 : BigNumber(amount);
 
             let processedAmount = BigNumber(trimmedByMaxDigits);
-            if (params.collapsible && processedAmount.gte(BigNumber("1000"))) {
-                processedAmount = this._collapseToMillionsAndFormat(
+            const shouldCollapseThousands =
+                params.collapsible && params.collapseThousands && processedAmount.gte(BigNumber("1000"));
+            const shouldCollapseMillions = params.collapsible && processedAmount.gte(BigNumber("1000000"));
+            if (shouldCollapseMillions || shouldCollapseThousands) {
+                processedAmount = this._collapseBigNumberToSuffixAndFormat(
                     processedAmount,
                     this.collapsedDecimalCount,
                     params
@@ -77,6 +81,7 @@ export class AmountUtils {
     static defaultCryptoParams = {
         ticker: true, // If true, asset ticker will be shown
         collapsible: true, // Enables minimization of amounts over 1 million (example: 1.52M)
+        collapseThousands: false, // Enables "K" minimization for amounts over 1 thousand (example: 1.52K)
         trim: true, // Cuts the right part of the amount if necessary, and adds ".." in the end
         limitTotalLength: true, // Limits the total amount length to maxTotalLength
         extraSmallLength: false, // Limits the total amount length to extraSmallMaxTotalLength
@@ -164,22 +169,25 @@ export class AmountUtils {
             processedAmount = limitResult.processedAmount;
             addPeriods ||= limitResult.addPeriods;
 
-            let wereMillionsCollapsed = false;
-            if (params.collapsible && amountBigNumber.gte("1000000")) {
-                // Collapse the 1M+ amounts if applicable
-                processedAmount = this._collapseToMillionsAndFormat(
+            let wasCollapsed = false;
+            const shouldCollapse =
+                params.collapsible &&
+                (amountBigNumber.gte("1000000") || (params.collapseThousands && amountBigNumber.gte("1000")));
+            if (shouldCollapse) {
+                // Collapse the large amounts if applicable
+                processedAmount = this._collapseBigNumberToSuffixAndFormat(
                     BigNumber(processedAmount),
                     this.collapsedDecimalCount,
                     params
                 );
-                wereMillionsCollapsed = true;
+                wasCollapsed = true;
             } else if (params.numberPartsSeparator) {
                 // Add separators to integer part of the amount
                 processedAmount = BigNumber(processedAmount).toFormat();
             }
 
             // Adding periods, if the amount was shortened
-            if (params.periods && addPeriods && !wereMillionsCollapsed) {
+            if (params.periods && addPeriods && !wasCollapsed) {
                 processedAmount = processedAmount + this.periods;
             }
 
@@ -240,9 +248,9 @@ export class AmountUtils {
      * @param amountBigNumber {BigNumber} The number value to be trimmed
      * @param decimalCount {number} The number of digits after period to keep in millions representation
      * @param params {object} params object
-     * @return {string} A shortened string, converted into "millions" format, if the amount exceeds 1 million
+     * @return {string} A potentially shortened string
      */
-    static _collapseToMillionsAndFormat(amountBigNumber, decimalCount, params = {}) {
+    static _collapseBigNumberToSuffixAndFormat(amountBigNumber, decimalCount, params = {}) {
         try {
             const thousand = BigNumber("1000");
             const million = BigNumber("1000000");

package/src/swaps-lib/external-apis/swapspaceSwapProvider.js

@@ -186,12 +186,43 @@ export class SwapspaceSwapProvider extends SwapProvider {
                     reason: SwapProvider.NO_SWAPS_REASONS.NOT_SUPPORTED,
                 };
             }
+            await this._fetchPartnersListIfNeeded();
+            const bannedPartnersSet = new Set(bannedPartners);
+            const whitelistedPartnersSet = whitelistedPartners == null ? null : new Set(whitelistedPartners);
+            const finalAllowedSwapspacePartners = this._partners
+                .map(partner => partner?.path)
+                .filter(
+                    partnerId =>
+                        typeof partnerId === "string" &&
+                        partnerId.length > 0 &&
+                        !bannedPartnersSet.has(partnerId) &&
+                        (whitelistedPartnersSet == null || whitelistedPartnersSet.has(partnerId))
+                );
+            if (this._partners.length > 0 && finalAllowedSwapspacePartners.length === 0) {
+                Logger.log("No allowed swapspace partners to request after restrictions.", loggerSource);
+                return {
+                    result: false,
+                    reason: SwapProvider.NO_SWAPS_REASONS.NOT_SUPPORTED,
+                };
+            }
             /* Here we use not documented parameter 'estimated=false'. This parameter controls whether we want to use
              * cached rate values stored in swapspace cache. Their support says they store at most for 30 sec.
              * But we are better off using the most actual rates.
              */
+            const requestParams = new URLSearchParams({
+                fromCurrency: fromCoinSwapspaceDetails.code,
+                fromNetwork: fromCoinSwapspaceDetails.network,
+                toNetwork: toCoinSwapspaceDetails.network,
+                toCurrency: toCoinSwapspaceDetails.code,
+                amount: amountCoins,
+                estimated: "false",
+            });
+            if (finalAllowedSwapspacePartners?.length > 0) {
+                // Swapspace `partner` param filters estimation to specific comma-separated partner IDs.
+                requestParams.set("partner", finalAllowedSwapspacePartners.join(","));
+            }
             const response = await axios.get(
-                `${this._URL}/api/v2/amounts?fromCurrency=${fromCoinSwapspaceDetails.code}&fromNetwork=${fromCoinSwapspaceDetails.network}&toNetwork=${toCoinSwapspaceDetails.network}&toCurrency=${toCoinSwapspaceDetails.code}&amount=${amountCoins}&estimated=false`,
+                `${this._URL}/api/v2/amounts?${requestParams.toString()}`,
                 { headers: this._headers, ...createRobustTimeoutSetupForAxios() }
             );
             Logger.log(`Retrieved ${response?.data?.length} options`, loggerSource);
@@ -284,7 +315,6 @@ export class SwapspaceSwapProvider extends SwapProvider {
                 const rate =
                     bestOpt.toAmount && bestOpt.fromAmount ? BigNumber(bestOpt.toAmount).div(bestOpt.fromAmount) : null;
 
-                await this._fetchPartnersListIfNeeded();
                 const partner = this._partners.find(p => bestOpt?.partner?.toLowerCase() === p.path.toLowerCase());
                 const isRefundAddressRequired =
                     partner == null ? true : bestOpt.fixed ? partner.reqFixedRefund : partner.reqFloatRefund;

package/src/ui-kit/assets/styles/_mixins.scss

@@ -56,4 +56,13 @@
         margin: 0;
         color: SolidColor("dark");
     }
+    @if ($tag == "psmall") {
+        display: block;
+        font-size: 12px;
+        line-height: 22px;
+        letter-spacing: $letterSpacing;
+        font-weight: $medium;
+        margin: 0;
+        color: SolidColor("dark");
+    }
 }

package/src/ui-kit/assets/styles/global.scss

@@ -169,3 +169,7 @@ h6 {
 p {
     @include typograpy("p");
 }
+
+psmall {
+    @include typograpy("psmall");
+}

package/src/ui-kit/components/atoms/buttons/Button/Button.jsx

@@ -30,6 +30,7 @@ import { LoadingDots } from "../../LoadingDots/LoadingDots.jsx";
  * @param {boolean} [props.checkmarkOnClick=false] - Shows a checkmark instead of content for a few seconds after click.
  * @param {boolean} [props.propagatePrimaryButtonClick=true] - Propagates the primary button click event if true.
  * @param {boolean} [props.smallPaddingOnSmallMobiles=false] - Enables smaller paddings for extra-small screen sizes.
+ * @param {boolean} [props.noShadow=false] - Removes box-shadow styling when true.
  * @param {Function} [props.handleError=(func) => func()] - Function to handle errors during button click events.
  * @returns {React.ReactElement}
  */
@@ -52,6 +53,7 @@ export const Button = ({
     checkmarkOnClick = false,
     propagatePrimaryButtonClick = true,
     smallPaddingOnSmallMobiles = false,
+    noShadow = false,
     handleError = (func, event) => func(event),
     openNewTab = false,
 }) => {
@@ -104,7 +106,8 @@ export const Button = ({
         (fullWidthOnMobiles ? ` ${styles["full-width-on-mobiles"]}` : "") +
         (fullWidthOnTablets ? ` ${styles["full-width-on-tablets"]}` : "") +
         (isDisabled ? ` ${styles.disable}` : "") +
-        (smallPaddingOnSmallMobiles ? ` ${styles["small-padding-on-small-mobiles"]}` : "");
+        (smallPaddingOnSmallMobiles ? ` ${styles["small-padding-on-small-mobiles"]}` : "") +
+        (noShadow ? ` ${styles["no-shadow"]}` : "");
 
     return (
         <>
@@ -190,6 +193,7 @@ Button.propTypes = {
     checkmarkOnClick: PropTypes.bool,
     propagatePrimaryButtonClick: PropTypes.bool,
     smallPaddingOnSmallMobiles: PropTypes.bool,
+    noShadow: PropTypes.bool,
     handleError: PropTypes.func,
 };
 
@@ -212,5 +216,6 @@ Button.defaultProps = {
     checkmarkOnClick: false,
     propagatePrimaryButtonClick: true,
     smallPaddingOnSmallMobiles: false,
+    noShadow: false,
     handleError: func => func(),
 };

package/src/ui-kit/components/atoms/buttons/Button/Button.module.scss

@@ -28,6 +28,10 @@
         }
     }
 
+    &.no-shadow {
+        box-shadow: none !important;
+    }
+
     @media (max-width: $tablet-width) {
         &.full-width-on-tablets {
             max-width: 100%;