@rango-dev/widget-embedded 0.12.1-next.11 → 0.12.1-next.13

package/dist/pages/ConfirmSwapPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmSwapPage.d.ts","sourceRoot":"","sources":["../../src/pages/ConfirmSwapPage.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAqB7C,OAAO,KAA8B,MAAM,OAAO,CAAC;AAkEnD,KAAK,SAAS,GAAG;IACf,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB,CAAC;AAEF,wBAAgB,eAAe,CAAC,KAAK,EAAE,SAAS,qBA0Z/C"}
+{"version":3,"file":"ConfirmSwapPage.d.ts","sourceRoot":"","sources":["../../src/pages/ConfirmSwapPage.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAoB7C,OAAO,KAA8B,MAAM,OAAO,CAAC;AA4EnD,KAAK,SAAS,GAAG;IACf,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB,CAAC;AAEF,wBAAgB,eAAe,CAAC,KAAK,EAAE,SAAS,qBA6a/C"}

package/dist/pages/Home.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Home.d.ts","sourceRoot":"","sources":["../../src/pages/Home.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAuE3D,wBAAgB,IAAI,sBAmVnB"}
+{"version":3,"file":"Home.d.ts","sourceRoot":"","sources":["../../src/pages/Home.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAsC,MAAM,OAAO,CAAC;AA6E3D,wBAAgB,IAAI,sBA6XnB"}

package/dist/types/config.d.ts

@@ -36,6 +36,8 @@ export type WidgetColors = {
  * border color
  * @property {number} borderRadius - `borderRadius` is a property of the `WidgetTheme` type that
  * specifies the radius of the corners of a widget.
+ * @property {number} secondaryBorderRadius - `secondaryBorderRadius` is a property of the `WidgetTheme` type that
+ * specifies the radius of the buttons of a widget.
  * @property {number} width - The `width` property is a number that represents the width of the widget.
  * @property {number} height - The `height` property is a number that specifies the height of the widget.
  * @property {boolean} singleTheme - The `singleTheme` property is a boolean that specifies the theme is support dark and light or only light.
@@ -48,6 +50,7 @@ export type WidgetTheme = {
         dark: WidgetColors;
     };
     borderRadius?: number;
+    secondaryBorderRadius?: number;
     width?: number;
     height?: number;
     singleTheme?: boolean;

package/dist/types/config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../src/types/config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAEvC;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,YAAY,CAAC;QAAC,IAAI,EAAE,YAAY,CAAA;KAAE,CAAC;IACrD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF;;;;;;;;;;GAUG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;CACrC,CAAC;AAEF;;;;;;;;;;GAUG;AACH,MAAM,MAAM,wBAAwB,GAAG;IACrC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC;CAClB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,wBAAwB,CAAC;IAChC,EAAE,CAAC,EAAE,wBAAwB,CAAC;IAC9B,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B,OAAO,CAAC,EAAE,CAAC,UAAU,GAAG,iBAAiB,CAAC,EAAE,CAAC;IAC7C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,YAAY,CAAC,EAAE,KAAK,EAAE,CAAC;CACxB,CAAC"}
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../src/types/config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAEvC;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,YAAY,CAAC;QAAC,IAAI,EAAE,YAAY,CAAA;KAAE,CAAC;IACrD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF;;;;;;;;;;GAUG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;CACrC,CAAC;AAEF;;;;;;;;;;GAUG;AACH,MAAM,MAAM,wBAAwB,GAAG;IACrC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC;CAClB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,wBAAwB,CAAC;IAChC,EAAE,CAAC,EAAE,wBAAwB,CAAC;IAC9B,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B,OAAO,CAAC,EAAE,CAAC,UAAU,GAAG,iBAAiB,CAAC,EAAE,CAAC;IAC7C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,YAAY,CAAC,EAAE,KAAK,EAAE,CAAC;CACxB,CAAC"}

package/dist/utils/configs.d.ts

@@ -4,4 +4,6 @@ export interface Configs {
 export declare function getConfig(name: keyof Configs): string;
 export declare function setConfig(name: keyof Configs, value: any): any;
 export declare function initConfig(nextConfigs: Configs): Configs;
+export declare const DEFAULT_PRIMARY_RADIUS = 20;
+export declare const DEFAULT_SECONDARY_RADIUS = 25;
 //# sourceMappingURL=configs.d.ts.map

package/dist/utils/configs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"configs.d.ts","sourceRoot":"","sources":["../../src/utils/configs.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,OAAO;IACtB,OAAO,EAAE,MAAM,CAAC;CACjB;AAQD,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,OAAO,UAE5C;AAED,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,OAAO,EAAE,KAAK,EAAE,GAAG,OAIxD;AAED,wBAAgB,UAAU,CAAC,WAAW,EAAE,OAAO,WAS9C"}
+{"version":3,"file":"configs.d.ts","sourceRoot":"","sources":["../../src/utils/configs.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,OAAO;IACtB,OAAO,EAAE,MAAM,CAAC;CACjB;AAQD,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,OAAO,UAE5C;AAED,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,OAAO,EAAE,KAAK,EAAE,GAAG,OAIxD;AAED,wBAAgB,UAAU,CAAC,WAAW,EAAE,OAAO,WAS9C;AAED,eAAO,MAAM,sBAAsB,KAAK,CAAC;AACzC,eAAO,MAAM,wBAAwB,KAAK,CAAC"}

package/dist/utils/routing.d.ts

@@ -1,5 +1,6 @@
 import type { BestRouteEqualityParams, Wallet } from '../types';
 import type { PendingSwap } from '@rango-dev/queue-manager-rango-preset';
+import type { PriceImpactWarningLevel } from '@rango-dev/ui';
 import type { SimulationAssetAndAmount, SimulationValidationStatus } from '@rango-dev/ui/dist/widget/ui/src/types/swaps';
 import type { BestRouteResponse, BlockchainMeta, Token } from 'rango-sdk';
 import BigNumber from 'bignumber.js';
@@ -12,7 +13,8 @@ export declare function isRouteChanged(route1: BestRouteResponse, route2: BestRo
 export declare function outToRatioHasWarning(fromUsdValue: BigNumber | null, outToInRatio: BigNumber | 0): boolean;
 export declare function getRequiredBalanceOfWallet(selectedWallet: Wallet, fee: SimulationValidationStatus[] | null): SimulationAssetAndAmount[] | null;
 export declare function isRouteParametersChanged(params: BestRouteEqualityParams): boolean | undefined;
-export declare function getFormatedBestRoute(bestRoute: BestRouteResponse | null): BestRouteResponse | null;
-export declare function getFormatedPendingSwap(pendingSwap: PendingSwap): PendingSwap;
+export declare function getFormattedBestRoute(bestRoute: BestRouteResponse | null): BestRouteResponse | null;
+export declare function getFormattedPendingSwap(pendingSwap: PendingSwap): PendingSwap;
 export declare const getBestRouteStatus: (loading: boolean, error: boolean) => "failed" | "success" | "loading";
+export declare function getPriceImpactLevel(priceImpact: number): PriceImpactWarningLevel;
 //# sourceMappingURL=routing.d.ts.map

package/dist/utils/routing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"routing.d.ts","sourceRoot":"","sources":["../../src/utils/routing.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAChE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AACzE,OAAO,KAAK,EACV,wBAAwB,EACxB,0BAA0B,EAC3B,MAAM,8CAA8C,CAAC;AACtD,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAE1E,OAAO,SAAS,MAAM,cAAc,CAAC;AAKrC,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,KAAK,EAAE,EACf,YAAY,EAAE,MAAM,GAAG,IAAI,EAC3B,KAAK,EAAE,cAAc,GAAG,IAAI,GAC3B,KAAK,GAAG,IAAI,CAqBd;AAED,wBAAgB,2BAA2B,CACzC,SAAS,EAAE,iBAAiB,GAAG,IAAI,GAClC,MAAM,GAAG,IAAI,GAAG,SAAS,CAG3B;AAED,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,iBAAiB,WAK1B;AAED,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,iBAAiB,WAO1B;AAED,wBAAgB,2BAA2B,CACzC,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,iBAAiB,WAO1B;AAED,wBAAgB,cAAc,CAC5B,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,iBAAiB,GACxB,OAAO,CAMT;AAED,wBAAgB,oBAAoB,CAClC,YAAY,EAAE,SAAS,GAAG,IAAI,EAC9B,YAAY,EAAE,SAAS,GAAG,CAAC,WAQ5B;AAED,wBAAgB,0BAA0B,CACxC,cAAc,EAAE,MAAM,EACtB,GAAG,EAAE,0BAA0B,EAAE,GAAG,IAAI,GACvC,wBAAwB,EAAE,GAAG,IAAI,CAcnC;AAED,wBAAgB,wBAAwB,CAAC,MAAM,EAAE,uBAAuB,uBA4BvE;AAED,wBAAgB,oBAAoB,CAClC,SAAS,EAAE,iBAAiB,GAAG,IAAI,GAClC,iBAAiB,GAAG,IAAI,CAiB1B;AAED,wBAAgB,sBAAsB,CAAC,WAAW,EAAE,WAAW,GAAG,WAAW,CAiB5E;AAGD,eAAO,MAAM,kBAAkB,YAAa,OAAO,SAAS,OAAO,qCAQlE,CAAC"}
+{"version":3,"file":"routing.d.ts","sourceRoot":"","sources":["../../src/utils/routing.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAChE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AACzE,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,KAAK,EACV,wBAAwB,EACxB,0BAA0B,EAC3B,MAAM,8CAA8C,CAAC;AACtD,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAE1E,OAAO,SAAS,MAAM,cAAc,CAAC;AAcrC,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,KAAK,EAAE,EACf,YAAY,EAAE,MAAM,GAAG,IAAI,EAC3B,KAAK,EAAE,cAAc,GAAG,IAAI,GAC3B,KAAK,GAAG,IAAI,CAqBd;AAED,wBAAgB,2BAA2B,CACzC,SAAS,EAAE,iBAAiB,GAAG,IAAI,GAClC,MAAM,GAAG,IAAI,GAAG,SAAS,CAG3B;AAED,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,iBAAiB,WAK1B;AAED,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,iBAAiB,WAO1B;AAED,wBAAgB,2BAA2B,CACzC,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,iBAAiB,WAO1B;AAED,wBAAgB,cAAc,CAC5B,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,iBAAiB,GACxB,OAAO,CAMT;AAED,wBAAgB,oBAAoB,CAClC,YAAY,EAAE,SAAS,GAAG,IAAI,EAC9B,YAAY,EAAE,SAAS,GAAG,CAAC,WAQ5B;AAED,wBAAgB,0BAA0B,CACxC,cAAc,EAAE,MAAM,EACtB,GAAG,EAAE,0BAA0B,EAAE,GAAG,IAAI,GACvC,wBAAwB,EAAE,GAAG,IAAI,CAcnC;AAED,wBAAgB,wBAAwB,CAAC,MAAM,EAAE,uBAAuB,uBA4BvE;AAED,wBAAgB,qBAAqB,CACnC,SAAS,EAAE,iBAAiB,GAAG,IAAI,GAClC,iBAAiB,GAAG,IAAI,CAyB1B;AAED,wBAAgB,uBAAuB,CAAC,WAAW,EAAE,WAAW,GAAG,WAAW,CA6B7E;AAGD,eAAO,MAAM,kBAAkB,YAAa,OAAO,SAAS,OAAO,qCAQlE,CAAC;AAEF,wBAAgB,mBAAmB,CACjC,WAAW,EAAE,MAAM,GAClB,uBAAuB,CASzB"}

package/dist/utils/swap.d.ts

@@ -48,7 +48,7 @@ export declare function getWalletsForNewSwap(selectedWallets: Wallet[]): {
     };
 };
 export declare function getRouteOutputAmount(route: BestRouteResponse | null): string | null;
-export declare function getPercentageChange(oldValue: string | number | null, newValue: string | number | null): BigNumber | null;
+export declare function getPercentageChange(inputUsdValue: string | number | null, outputUsdValue: string | number | null): BigNumber | null;
 export declare function isOutputAmountChangedALot(oldRoute: BestRouteResponse, newRoute: BestRouteResponse): boolean;
 export declare function getBalanceWarnings(route: BestRouteResponse, selectedWallets: Wallet[]): string[];
 export declare function calcOutputUsdValue(outputAmount?: string, tokenPrice?: number | null): BigNumber;

package/dist/utils/swap.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"swap.d.ts","sourceRoot":"","sources":["../../src/utils/swap.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AACxE,OAAO,KAAK,EACV,WAAW,EACX,eAAe,EAChB,MAAM,uCAAuC,CAAC;AAC/C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,KAAK,EACV,gBAAgB,EAChB,iBAAiB,EACjB,cAAc,EACd,mBAAmB,EACnB,UAAU,EACV,KAAK,EACN,MAAM,WAAW,CAAC;AAGnB,OAAO,SAAS,MAAM,cAAc,CAAC;AAcrC,wBAAgB,cAAc,CAC5B,aAAa,EAAE,SAAS,GAAG,IAAI,EAC/B,cAAc,EAAE,SAAS,GAAG,IAAI,iBAWjC;AAED,wBAAgB,qBAAqB,CACnC,aAAa,EAAE,SAAS,GAAG,IAAI,EAC/B,WAAW,EAAE,SAAS,GAAG,CAAC,GACzB,OAAO,CAQT;AAED,wBAAgB,aAAa,CAAC,SAAS,EAAE,iBAAiB,GAAG,IAAI,GAAG,OAAO,CAgB1E;AAED,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,iBAAiB,GAAG,IAAI,GAAG;IACtE,IAAI,EAAE,UAAU,GAAG,IAAI,CAAC;IACxB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,cAAc,EAAE,MAAM,CAAC;CACxB,CAuDA;AAED,wBAAgB,kBAAkB,CAChC,iBAAiB,EAAE,aAAa,EAChC,gBAAgB,EAAE,eAAe,EAAE,EACnC,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,iBAAiB,GAAG,IAAI,EACnC,aAAa,EAAE,OAAO,EACtB,aAAa,EAAE,OAAO,EACtB,2BAA2B,EAAE,OAAO,EACpC,oBAAoB,EAAE,OAAO,EAC7B,WAAW,EAAE,MAAM,GAClB,eAAe,CAgDjB;AAED,wBAAgB,qBAAqB,CACnC,SAAS,EAAE,iBAAiB,GAAG,IAAI,EACnC,WAAW,EAAE,MAAM,EACnB,QAAQ,EAAE,SAAS,GAAG,IAAI,WAU3B;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,iBAAiB,GAAG,IAAI,YAgB9D;AAED,eAAO,MAAM,WAAW,eACV,MAAM,UACV,MAAM,WACL,MAAM,GAAG,IAAI,aACX,KAAK,EAAE,KACjB,MAAM,GAAG,IAQX,CAAC;AAEF,wBAAgB,eAAe,CAC7B,IAAI,EAAE,UAAU,EAChB,SAAS,EAAE,KAAK,EAAE,GACjB,SAAS,CAoBX;AAED,wBAAgB,gBAAgB,CAC9B,SAAS,EAAE,iBAAiB,GAAG,IAAI,EACnC,SAAS,EAAE,KAAK,EAAE,GACjB,SAAS,GAAG,IAAI,CAQlB;AAED,wBAAgB,UAAU,CAAC,aAAa,EAAE,SAAS,GAAG,IAAI,WAKzD;AAED,wBAAgB,gBAAgB,CAC9B,SAAS,EAAE,CAAC,mBAAmB,GAAG,IAAI,CAAC,EAAE,GAAG,SAAS,WAGtD;AAED,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,iBAAiB,GACvB,MAAM,GAAG,IAAI,CAWf;AAED,wBAAgB,iBAAiB,CAC/B,YAAY,EAAE,MAAM,EACpB,mBAAmB,EAAE,MAAM,GAAG,IAAI,WAMnC;AAED,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,iBAAiB,EACxB,eAAe,EAAE,MAAM,EAAE,WAuB1B;AAED,wBAAgB,iCAAiC,CAC/C,KAAK,EAAE,iBAAiB,EACxB,eAAe,EAAE,MAAM,EAAE,EACzB,YAAY,EAAE,MAAM,EACpB,mBAAmB,EAAE,MAAM,GAAG,IAAI,GACjC,OAAO,CAKT;AAED,wBAAgB,0BAA0B,CAAC,MAAM,EAAE;IACjD,SAAS,EAAE,KAAK,CAAC;IACjB,OAAO,EAAE,KAAK,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,wBAAwB,EAAE,MAAM,EAAE,CAAC;IACnC,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,gBAAgB,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IACnD,YAAY,CAAC,EAAE,iBAAiB,CAAC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,gBAAgB,CA2FnB;AAED,wBAAgB,oBAAoB,CAAC,eAAe,EAAE,MAAM,EAAE;;iBAI9B,MAAM;oBAAc,UAAU;;EAc7D;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,iBAAiB,GAAG,IAAI,iBAEnE;AAED,wBAAgB,mBAAmB,CACjC,QAAQ,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,EAChC,QAAQ,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,oBASjC;AAED,wBAAgB,yBAAyB,CACvC,QAAQ,EAAE,iBAAiB,EAC3B,QAAQ,EAAE,iBAAiB,WAgB5B;AAED,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,iBAAiB,EACxB,eAAe,EAAE,MAAM,EAAE,YAuC1B;AAED,wBAAgB,kBAAkB,CAChC,YAAY,CAAC,EAAE,MAAM,EACrB,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,aAK3B;AAED,wBAAgB,6BAA6B,CAC3C,eAAe,EAAE,eAAe,GAAG,IAAI,GACtC,OAAO,CAMT;AAED,wBAAgB,eAAe,CAC7B,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,eAAe,GAAG,IAAI,GAClC;IACD,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,OAAO,CAAA;KAAE,CAAC;CACrD,CAwCA;AAED,wBAAgB,iCAAiC,CAC/C,WAAW,EAAE,WAAW,GACvB,cAAc,CAkBhB;AAED,wBAAgB,eAAe,CAAC,WAAW,EAAE,WAAW,WAMvD;AACD,wBAAgB,wBAAwB,CACtC,UAAU,EAAE,MAAM,EAClB,OAAO,EAAE,MAAM,GACd,OAAO,CAMT;AAED,wBAAgB,mBAAmB,CACjC,QAAQ,EAAE,OAAO,EACjB,qBAAqB,EAAE,OAAO,EAC9B,iBAAiB,EAAE,MAAM,EACzB,SAAS,EAAE,iBAAiB,GAAG,IAAI,EACnC,eAAe,EAAE;IAAE,UAAU,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,EAAE,EACxD,oBAAoB,CAAC,EAAE,cAAc,uBActC"}
+{"version":3,"file":"swap.d.ts","sourceRoot":"","sources":["../../src/utils/swap.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.12.1-next.11",
+  "version": "0.12.1-next.13",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.js",
@@ -23,7 +23,7 @@
     "@rango-dev/queue-manager-core": "^0.15.1-next.1",
     "@rango-dev/queue-manager-rango-preset": "^0.15.1-next.5",
     "@rango-dev/queue-manager-react": "^0.15.1-next.3",
-    "@rango-dev/ui": "^0.15.1-next.7",
+    "@rango-dev/ui": "^0.15.1-next.10",
     "@rango-dev/wallets-react": "^0.1.1-next.5",
     "@rango-dev/wallets-shared": "^0.15.1-next.3",
     "bignumber.js": "^9.1.1",

package/src/Widget.tsx

@@ -21,6 +21,7 @@ const MainContainer = styled('div', {
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
+  fontFamily: '$widget',
 });
 
 export type WidgetProps = {
@@ -29,7 +30,7 @@ export type WidgetProps = {
 
 export function Main(props: PropsWithChildren<WidgetProps>) {
   const { config } = props;
-  globalFont(config?.theme?.fontFamily || 'Roboto');
+  globalFont();
 
   const { activeTheme } = useTheme(config?.theme || {});
   const [lastConnectedWalletWithNetwork, setLastConnectedWalletWithNetwork] =

package/src/components/BlockchainList/BlockchainList.styles.ts

@@ -1,10 +1,15 @@
 import { styled } from '@rango-dev/ui';
 
+export const Container = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  overflow: 'hidden',
+});
+
 export const List = styled('ul', {
   padding: 0,
   margin: 0,
   listStyle: 'none',
-  height: 355,
   overflowY: 'auto',
   paddingRight: '$5',
   '.image-container': {
@@ -12,7 +17,3 @@ export const List = styled('ul', {
     overflow: 'hidden',
   },
 });
-
-export const Content = styled('div', {
-  minHeight: 325,
-});

package/src/components/BlockchainList/BlockchainList.tsx

@@ -14,7 +14,7 @@ import React, { useEffect, useState } from 'react';
 import { useMetaStore } from '../../store/meta';
 
 import { filterBlockchains } from './BlockchainList.helpers';
-import { Content, List } from './BlockchainList.styles';
+import { Container, List } from './BlockchainList.styles';
 import { LoadingBlockchainList } from './LoadingBlockchainList';
 
 export function BlockchainList(props: PropTypes) {
@@ -61,16 +61,13 @@ export function BlockchainList(props: PropTypes) {
   };
 
   return (
-    <div>
+    <Container>
       <Typography variant="label" size="large">
         {i18n.t('Select Blockchain')}
       </Typography>
       <Divider size={4} />
-
-      <Content>
-        {loadingStatus === 'loading' && <LoadingBlockchainList />}
-        {loadingStatus === 'success' && renderList()}
-      </Content>
-    </div>
+      {loadingStatus === 'loading' && <LoadingBlockchainList />}
+      {loadingStatus === 'success' && renderList()}
+    </Container>
   );
 }

package/src/components/ConfirmWalletsModal/ConfirmWallets.helpers.ts

@@ -2,6 +2,12 @@
 import type { Step } from '@rango-dev/ui/dist/widget/ui/src/components/BestRoute/BestRoute.types';
 import type { BestRouteResponse, BlockchainMeta } from 'rango-sdk';
 
+import {
+  TOKEN_AMOUNT_MAX_DECIMALS,
+  TOKEN_AMOUNT_MIN_DECIMALS,
+  USD_VALUE_MAX_DECIMALS,
+  USD_VALUE_MIN_DECIMALS,
+} from '../../constants/routing';
 import { numberToString } from '../../utils/numbers';
 
 export function formatBestRoute(
@@ -17,8 +23,16 @@ export function formatBestRoute(
           image: swap.from.blockchainLogo,
         },
         price: {
-          value: numberToString(swap.fromAmount, 6, 6),
-          usdValue: numberToString(swap.from.usdPrice?.toString(), 6, 6),
+          value: numberToString(
+            swap.fromAmount,
+            TOKEN_AMOUNT_MIN_DECIMALS,
+            TOKEN_AMOUNT_MAX_DECIMALS
+          ),
+          usdValue: numberToString(
+            swap.from.usdPrice?.toString(),
+            USD_VALUE_MIN_DECIMALS,
+            USD_VALUE_MAX_DECIMALS
+          ),
         },
       },
       to: {
@@ -28,8 +42,16 @@ export function formatBestRoute(
           image: swap.to.blockchainLogo,
         },
         price: {
-          value: numberToString(swap.toAmount, 6, 6),
-          usdValue: numberToString(swap.to.usdPrice?.toString(), 6, 6),
+          value: numberToString(
+            swap.toAmount,
+            TOKEN_AMOUNT_MIN_DECIMALS,
+            TOKEN_AMOUNT_MAX_DECIMALS
+          ),
+          usdValue: numberToString(
+            swap.to.usdPrice?.toString(),
+            USD_VALUE_MIN_DECIMALS,
+            USD_VALUE_MAX_DECIMALS
+          ),
         },
       },
     };

package/src/components/ConfirmWalletsModal/ConfirmWalletsModal.tsx

@@ -332,7 +332,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
               );
 
               const key = `wallet-${index}`;
-              const isLastWallet = index !== requiredWallets.length - 1;
+              const isLastWallet = index === requiredWallets.length - 1;
 
               return (
                 <div key={key}>

package/src/components/Layout/Layout.styles.ts

@@ -4,8 +4,7 @@ export const Container = styled('div', {
   position: 'relative',
   display: 'flex',
   flexDirection: 'column',
-  //TODO: add radii theme token for 20px
-  borderRadius: '20px',
+  borderRadius: '$primary',
   overflow: 'hidden !important',
   boxShadow: '15px 15px 15px 0px rgba(0, 0, 0, 0.05)',
   width: '95vw',

package/src/components/Layout/Layout.tsx

@@ -38,7 +38,7 @@ function LayoutComponent(props: PropsWithChildren<PropTypes>, ref: Ref) {
   const contentRef = useRef<HTMLDivElement | null>(null);
 
   usePaddingRight({
-    element: contentRef.current,
+    elementRef: contentRef,
     paddingRight: noPadding ? '0' : theme.sizes[DEFAULT_CONTENT_PADDING],
   });
 
@@ -65,7 +65,7 @@ function LayoutComponent(props: PropsWithChildren<PropTypes>, ref: Ref) {
           </>
         }
       />
-      <Content noPadding={noPadding} ref={(ref) => (contentRef.current = ref)}>
+      <Content noPadding={noPadding} ref={contentRef}>
         {children}
       </Content>
       {(hasLogo || footer) && (

package/src/components/RouteErrors/RouteErrors.styles.ts

@@ -2,7 +2,7 @@ import { styled } from '@rango-dev/ui';
 
 export const Alerts = styled('div', {
   width: '100%',
-  paddingTop: '$16',
+  paddingTop: '$10',
 });
 
 export const Flex = styled('div', {
@@ -24,4 +24,5 @@ export const Item = styled('div', {
 export const Action = styled('div', {
   padding: '$2',
   alignSelf: 'flex-start',
+  cursor: 'pointer',
 });

package/src/components/RouteErrors/RouteErrors.tsx

@@ -1,6 +1,6 @@
 import type { PropTypes } from './RouteErrors.types';
 
-import { Alert, InfoIcon } from '@rango-dev/ui';
+import { Alert, Divider, InfoIcon } from '@rango-dev/ui';
 import React from 'react';
 
 import { errorMessages } from '../../constants/errors';
@@ -23,37 +23,48 @@ export function RouteErrors(props: PropTypes) {
     totalFeeInUsd,
     outputUsdValue,
     inputUsdValue,
+    loading,
+    extraSpace,
   } = props;
   const error = hasLimitError(bestRoute);
   const { recommendation } = LimitErrorMessage(bestRoute);
 
+  const showWarnings = !error && (highValueLoss || priceImpactCanNotBeComputed);
+  const showAlerts = showWarnings || error;
+
   return (
     <>
-      <Alerts>
-        {!error && (highValueLoss || priceImpactCanNotBeComputed) && (
-          <>
-            <Alert
-              title={
-                highValueLoss
-                  ? errorMessages.highValueLossError.title
-                  : errorMessages.unknownPriceError.title
-              }
-              type={
-                highValueLoss && !!percentageChange?.lt(WARNING_LEVEL_LIMIT)
-                  ? 'error'
-                  : 'warning'
-              }
-              variant="alarm"
-              action={
-                <Action onClick={() => onToggle(true)}>
-                  <InfoIcon size={12} color="gray" />
-                </Action>
-              }
-            />
-          </>
-        )}
-        {error && <Alert type="error" variant="alarm" title={recommendation} />}
-      </Alerts>
+      {(loading || (extraSpace && !showAlerts)) && <Divider size={20} />}
+      {showAlerts && (
+        <Alerts>
+          {showWarnings && (
+            <>
+              <Alert
+                title={
+                  highValueLoss
+                    ? errorMessages.highValueLossError.title
+                    : errorMessages.unknownPriceError.title
+                }
+                type={
+                  highValueLoss && !!percentageChange?.lt(WARNING_LEVEL_LIMIT)
+                    ? 'error'
+                    : 'warning'
+                }
+                variant="alarm"
+                action={
+                  <Action onClick={() => onToggle(true)}>
+                    <InfoIcon size={12} color="gray" />
+                  </Action>
+                }
+              />
+            </>
+          )}
+          {error && (
+            <Alert type="error" variant="alarm" title={recommendation} />
+          )}
+        </Alerts>
+      )}
+
       <RouteErrorsModal
         highValueLoss={highValueLoss}
         open={openModal}

package/src/components/RouteErrors/RouteErrors.types.ts

@@ -9,11 +9,13 @@ export interface PropTypes {
   percentageChange: BigNumber | null;
   highValueLoss: boolean;
   priceImpactCanNotBeComputed: boolean;
+  loading: boolean;
+  extraSpace: boolean;
 }
 
 type ModalPropTypesKeys = keyof Omit<
   PropTypes,
-  'priceImpactCanNotBeComputed' | 'openModal'
+  'priceImpactCanNotBeComputed' | 'openModal' | 'extraSpace' | 'loading'
 >;
 
 export type ModalPropTypes = Pick<PropTypes, ModalPropTypesKeys> & {

package/src/components/RouteErrors/RouteErrorsModal.tsx

@@ -13,15 +13,20 @@ import { useNavigate } from 'react-router-dom';
 
 import { errorMessages } from '../../constants/errors';
 import { navigationRoutes } from '../../constants/navigationRoutes';
+import {
+  GAS_FEE_MAX_DECIMALS,
+  GAS_FEE_MIN_DECIMALS,
+  HIGHT_PRICE_IMPACT,
+  PERCENTAGE_CHANGE_MAX_DECIMALS,
+  PERCENTAGE_CHANGE_MIN_DECIMALS,
+  USD_VALUE_MAX_DECIMALS,
+  USD_VALUE_MIN_DECIMALS,
+} from '../../constants/routing';
 import { numberToString } from '../../utils/numbers';
 
 import { Flex } from './RouteErrors.styles';
 import { RouteErrorsModalItem } from './RouteErrorsModalItem';
 
-const WARNING_LEVEL_LIMIT = -10;
-const MAX_DECIMAL = 2;
-const MIN_DECIMAL = 0;
-
 export function RouteErrorsModal(props: ModalPropTypes) {
   const {
     highValueLoss,
@@ -34,19 +39,41 @@ export function RouteErrorsModal(props: ModalPropTypes) {
   } = props;
   const navigate = useNavigate();
   const type =
-    highValueLoss && !!percentageChange?.lt(WARNING_LEVEL_LIMIT)
+    highValueLoss && !!percentageChange?.lt(HIGHT_PRICE_IMPACT)
       ? 'error'
       : 'warning';
   const highValueLossData = [
-    { title: 'Swapping', value: numberToString(inputUsdValue) },
+    {
+      title: 'Swapping',
+      value: numberToString(
+        inputUsdValue,
+        USD_VALUE_MIN_DECIMALS,
+        USD_VALUE_MAX_DECIMALS
+      ),
+    },
     {
       title: 'Gas cost',
-      value: numberToString(totalFeeInUsd, MIN_DECIMAL, MAX_DECIMAL),
+      value: numberToString(
+        totalFeeInUsd,
+        GAS_FEE_MIN_DECIMALS,
+        GAS_FEE_MAX_DECIMALS
+      ),
+    },
+    {
+      title: 'Receiving',
+      value: numberToString(
+        outputUsdValue,
+        USD_VALUE_MIN_DECIMALS,
+        USD_VALUE_MAX_DECIMALS
+      ),
     },
-    { title: 'Receiving', value: numberToString(outputUsdValue) },
     {
       title: 'Price impact',
-      value: numberToString(percentageChange, MIN_DECIMAL, MAX_DECIMAL),
+      value: numberToString(
+        percentageChange,
+        PERCENTAGE_CHANGE_MIN_DECIMALS,
+        PERCENTAGE_CHANGE_MAX_DECIMALS
+      ),
       valueColor: `${type}500`,
     },
   ];
@@ -59,13 +86,13 @@ export function RouteErrorsModal(props: ModalPropTypes) {
       {highValueLoss ? (
         <MessageBox
           type={type}
-          title={errorMessages.highValueLossError.impacTitle}
+          title={errorMessages.highValueLossError.impactTitle}
           description={errorMessages.highValueLossError.description}
         />
       ) : (
         <MessageBox
           type={type}
-          title={errorMessages.unknownPriceError.impacTitle}
+          title={errorMessages.unknownPriceError.impactTitle}
           description={errorMessages.unknownPriceError.description}
         />
       )}

package/src/components/SwapDetails/SwapDetails.helpers.tsx

@@ -1,24 +1,18 @@
 import type { GetStep } from '../SwapDetailsAlerts';
 import type { PendingSwapStep } from '@rango-dev/queue-manager-rango-preset';
-import type {
-  PriceImpactWarningLevel,
-  Step,
-  StepDetailsProps,
-} from '@rango-dev/ui';
-import type BigNumber from 'bignumber.js';
+import type { Step, StepDetailsProps } from '@rango-dev/ui';
 
 import React from 'react';
 
+import {
+  TOKEN_AMOUNT_MAX_DECIMALS,
+  TOKEN_AMOUNT_MIN_DECIMALS,
+} from '../../constants/routing';
 import { numberToString } from '../../utils/numbers';
 import { isNetworkStatusInWarningState } from '../../utils/swap';
 import { SwapDetailsAlerts } from '../SwapDetailsAlerts';
 
-export const LOW_PRICE_IMPACT = 3;
-export const HIGHT_PRICE_IMPACT = 10;
 export const RESET_INTERVAL = 2_000;
-export const MIN_DECIMALS = 0;
-export const AMOUNT_DECIMALS = 4;
-export const PERCENT_DECIMALS = 2;
 export const SECONDS = 60;
 
 export const getSteps = ({ swap, ...args }: GetStep): Step[] => {
@@ -36,8 +30,8 @@ export const getSteps = ({ swap, ...args }: GetStep): Step[] => {
         price: {
           value: numberToString(
             amountToConvert,
-            AMOUNT_DECIMALS,
-            AMOUNT_DECIMALS
+            TOKEN_AMOUNT_MIN_DECIMALS,
+            TOKEN_AMOUNT_MAX_DECIMALS
           ),
         },
       },
@@ -50,8 +44,8 @@ export const getSteps = ({ swap, ...args }: GetStep): Step[] => {
         price: {
           value: numberToString(
             step.outputAmount || step.expectedOutputAmountHumanReadable,
-            AMOUNT_DECIMALS,
-            AMOUNT_DECIMALS
+            TOKEN_AMOUNT_MIN_DECIMALS,
+            TOKEN_AMOUNT_MAX_DECIMALS
           ),
         },
       },
@@ -67,17 +61,6 @@ export const getSteps = ({ swap, ...args }: GetStep): Step[] => {
   });
 };
 
-export const getPriceImpactWarningLevel = (
-  priceImpact: BigNumber | null
-): PriceImpactWarningLevel | undefined => {
-  if (!priceImpact) {
-    return undefined;
-  } else if (priceImpact.lt(LOW_PRICE_IMPACT)) {
-    return 'low';
-  }
-  return 'high';
-};
-
 export function getStepState(step: PendingSwapStep): StepDetailsProps['state'] {
   if (
     isNetworkStatusInWarningState(step) &&

package/src/components/SwapDetails/SwapDetails.styles.ts

@@ -4,7 +4,6 @@ export const Container = styled('div', {
   display: 'flex',
   width: '100%',
   flexDirection: 'column',
-  justifyContent: 'center',
   alignItems: 'center',
   height: '0',
   flexGrow: 1,
@@ -37,20 +36,13 @@ export const Container = styled('div', {
   },
 });
 
-export const Separator = styled('div', {
-  height: '$12',
-  marginRight: '$10',
-  borderLeft: '1px solid $neutral900',
-  marginLeft: '$14',
-});
-
 export const HeaderDetails = styled('div', {
   width: '100%',
   padding: '0px 15px',
 });
 
 export const StepsList = styled('div', {
-  padding: '0 $20 $20',
+  padding: '$0 $0 $20 $20',
   width: '100%',
   overflow: 'auto',
 });