@rango-dev/widget-embedded 0.23.0 → 0.23.1-next.1

package/dist/utils/quote.d.ts

@@ -1,7 +1,6 @@
 import type { QuoteWarning, SelectedQuote, Wallet } from '../types';
-import type { PriceImpactWarningLevel, Step } from '@rango-dev/ui';
-import type { SimulationAssetAndAmount, SimulationValidationStatus } from '@rango-dev/ui/dist/widget/ui/src/types/swaps';
-import type { Asset, BlockchainMeta, MultiRouteResponse, MultiRouteSimulationResult, PreferenceType, RouteTag, TagValue, Token } from 'rango-sdk';
+import type { PriceImpactWarningLevel, SimulationAssetAndAmount, SimulationValidationStatus, Step } from '@rango-dev/ui';
+import type { Asset, BlockchainMeta, MultiRouteResponse, MultiRouteSimulationResult, PreferenceType, RouteTag, Token } from 'rango-sdk';
 import type { PendingSwap } from 'rango-types';
 import BigNumber from 'bignumber.js';
 export declare function getQuoteToTokenUsdPrice(quote: SelectedQuote | null): number | null | undefined;
@@ -34,5 +33,4 @@ export declare const getUniqueBlockchains: (steps: Step[]) => {
 export declare const sortQuotesBy: (strategy: PreferenceType, quotes: MultiRouteResponse['results']) => MultiRouteResponse['results'];
 export declare const getDefaultQuote: (currentQuote: SelectedQuote | null, quotes: MultiRouteSimulationResult[], requestAmount: string) => SelectedQuote | null;
 export declare const sortTags: (tags: RouteTag[]) => RouteTag[];
-export declare const getRouteTagColor: (tag: TagValue) => string;
 //# sourceMappingURL=quote.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"quote.d.ts","sourceRoot":"","sources":["../../src/utils/quote.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"quote.d.ts","sourceRoot":"","sources":["../../src/utils/quote.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AACpE,OAAO,KAAK,EACV,uBAAuB,EACvB,wBAAwB,EACxB,0BAA0B,EAC1B,IAAI,EACL,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,EACV,KAAK,EACL,cAAc,EACd,kBAAkB,EAClB,0BAA0B,EAC1B,cAAc,EACd,QAAQ,EACR,KAAK,EACN,MAAM,WAAW,CAAC;AACnB,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG/C,OAAO,SAAS,MAAM,cAAc,CAAC;AAmBrC,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,aAAa,GAAG,IAAI,GAC1B,MAAM,GAAG,IAAI,GAAG,SAAS,CAG3B;AAED,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,aAAa,EACrB,MAAM,EAAE,aAAa,WAKtB;AAED,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,aAAa,EACrB,MAAM,EAAE,aAAa,WAKtB;AAED,wBAAgB,2BAA2B,CACzC,MAAM,EAAE,aAAa,EACrB,MAAM,EAAE,aAAa,WAKtB;AAED,wBAAgB,cAAc,CAC5B,MAAM,EAAE,aAAa,EACrB,MAAM,EAAE,aAAa,GACpB,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,mBAAmB,CACjC,WAAW,EAAE,MAAM,GAClB,uBAAuB,CASzB;AAED,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,KAAK,EAAE,EAAE,CAAC,SAAS,KAAK,EAAE,EACnE,KAAK,EAAE,CAAC,EACR,KAAK,EAAE,CAAC,KAUT;AAED,wBAAgB,gBAAgB,CAC9B,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,cAAc,EAAE,EAC7B,MAAM,EAAE,KAAK,EAAE,GACd;IACD,cAAc,EAAE,cAAc,GAAG,IAAI,CAAC;IACtC,SAAS,EAAE,KAAK,GAAG,IAAI,CAAC;IACxB,YAAY,EAAE,cAAc,GAAG,IAAI,CAAC;IACpC,OAAO,EAAE,KAAK,GAAG,IAAI,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;CACrB,CA4CA;AAED,wBAAgB,qBAAqB,CACnC,KAAK,EAAE,aAAa,EACpB,MAAM,EAAE;IACN,SAAS,EAAE,KAAK,CAAC;IACjB,OAAO,EAAE,KAAK,CAAC;IACf,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;CACtB,GACA,YAAY,GAAG,IAAI,CAiDrB;AAED,wBAAgB,cAAc,CAC5B,aAAa,EAAE,SAAS,GAAG,MAAM,GAAG,IAAI,EACxC,cAAc,EAAE,SAAS,GAAG,MAAM,GAAG,IAAI,GACxC,MAAM,GAAG,IAAI,CAcf;AAED,eAAO,MAAM,oBAAoB,UAAW,IAAI,EAAE;iBAEnB,MAAM;WAAS,MAAM;GAanD,CAAC;AAEF,eAAO,MAAM,YAAY,aACb,cAAc,UAChB,kBAAkB,CAAC,SAAS,CAAC,KACpC,kBAAkB,CAAC,SAAS,CAkB9B,CAAC;AAEF,eAAO,MAAM,eAAe,iBACZ,aAAa,GAAG,IAAI,UAC1B,0BAA0B,EAAE,iBACrB,MAAM,KACpB,aAAa,GAAG,IAgClB,CAAC;AAEF,eAAO,MAAM,QAAQ,SAAU,QAAQ,EAAE,KAAG,QAAQ,EAmBnD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.23.0",
+  "version": "0.23.1-next.1",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -25,7 +25,7 @@
     "@rango-dev/queue-manager-core": "^0.26.0",
     "@rango-dev/queue-manager-rango-preset": "^0.28.0",
     "@rango-dev/queue-manager-react": "^0.26.0",
-    "@rango-dev/ui": "^0.29.0",
+    "@rango-dev/ui": "^0.29.1-next.1",
     "@rango-dev/wallets-react": "^0.14.0",
     "@rango-dev/wallets-shared": "^0.28.0",
     "bignumber.js": "^9.1.1",

package/src/components/Quote/Quote.styles.ts

@@ -365,13 +365,6 @@ export const MoreStep = styled('div', {
   },
 });
 
-export const Tag = styled('div', {
-  backgroundColor: '$neutral400',
-  borderRadius: '$xs',
-  padding: '$2 $5',
-  fontSize: '$10',
-  fontWeight: 400,
-});
 export const TagContainer = styled('div', {
   display: 'flex',
 });

package/src/components/Quote/Quote.tsx

@@ -7,6 +7,7 @@ import {
   Alert,
   Divider,
   InfoIcon,
+  QuoteTag,
   StepDetails,
   TokenAmount,
   Tooltip,
@@ -15,7 +16,10 @@ import {
 import BigNumber from 'bignumber.js';
 import React, { useRef, useState } from 'react';
 
+import { GAS_FEE_MAX } from '../../constants/quote';
 import {
+  GAS_FEE_MAX_DECIMALS,
+  GAS_FEE_MIN_DECIMALS,
   PERCENTAGE_CHANGE_MAX_DECIMALS,
   PERCENTAGE_CHANGE_MIN_DECIMALS,
   TOKEN_AMOUNT_MAX_DECIMALS,
@@ -34,13 +38,18 @@ import {
   getBlockchainShortNameFor,
   getSwapperDisplayName,
 } from '../../utils/meta';
-import { formatTooltipNumbers, numberToString } from '../../utils/numbers';
+import {
+  formatTooltipNumbers,
+  numberToString,
+  secondsToString,
+  totalArrivalTime,
+} from '../../utils/numbers';
 import {
   getPriceImpact,
   getPriceImpactLevel,
-  getRouteTagColor,
   sortTags,
 } from '../../utils/quote';
+import { getTotalFeeInUsd } from '../../utils/swap';
 
 import {
   AllRoutesButton,
@@ -56,7 +65,6 @@ import {
   SummaryContainer,
   summaryHeaderStyles,
   summaryStyles,
-  Tag,
   TagContainer,
 } from './Quote.styles';
 import { QuoteCostDetails } from './QuoteCostDetails';
@@ -76,6 +84,7 @@ export function Quote(props: QuoteProps) {
     onClickAllRoutes,
   } = props;
   const blockchains = useAppStore().blockchains();
+  const tokens = useAppStore().tokens();
   const swappers = useAppStore().swappers();
   const [expanded, setExpanded] = useState(props.expanded);
   const quoteRef = useRef<HTMLButtonElement | null>(null);
@@ -280,6 +289,13 @@ export function Quote(props: QuoteProps) {
   const container = getContainer();
   const sortedQuoteTags = sortTags(props.quote.tags || []);
   const showAllRoutesButton = !!onClickAllRoutes;
+  const totalTime = secondsToString(totalArrivalTime(quote?.swaps));
+  const totalFee = getTotalFeeInUsd(quote?.swaps ?? [], tokens);
+  const fee = numberToString(
+    totalFee,
+    GAS_FEE_MIN_DECIMALS,
+    GAS_FEE_MAX_DECIMALS
+  );
 
   return (
     <>
@@ -295,11 +311,7 @@ export function Quote(props: QuoteProps) {
                   const key = `${tag.value}_${index}`;
                   return (
                     <>
-                      <Tag
-                        style={{ color: getRouteTagColor(tag.value) }}
-                        key={key}>
-                        {tag.label}
-                      </Tag>
+                      <QuoteTag label={tag.label} key={key} value={tag.value} />
                       <Divider size={4} direction="horizontal" />
                     </>
                   );
@@ -310,7 +322,13 @@ export function Quote(props: QuoteProps) {
             </>
           ) : null}
           <div id="portal-root" className={summaryHeaderStyles()}>
-            <QuoteCostDetails steps={numberOfSteps} quote={quote} />
+            <QuoteCostDetails
+              steps={numberOfSteps}
+              quote={quote}
+              time={totalTime}
+              fee={fee}
+              feeWarning={totalFee.gte(new BigNumber(GAS_FEE_MAX))}
+            />
 
             {showAllRoutesButton && (
               <AllRoutesButton

package/src/components/Quote/Quote.types.ts

@@ -40,4 +40,7 @@ export type QuoteTriggerImagesProps = {
 export type QuoteCostDetailsProps = {
   quote: SelectedQuote | null;
   steps: number;
+  fee: string;
+  time: string;
+  feeWarning?: boolean;
 };

package/src/components/Quote/QuoteCostDetails.tsx

@@ -1,5 +1,6 @@
 import type { QuoteCostDetailsProps } from './Quote.types';
 import type { NameOfFees } from '../../constants/quote';
+import type BigNumber from 'bignumber.js';
 
 import { i18n } from '@lingui/core';
 import {
@@ -11,7 +12,6 @@ import {
   Tooltip,
   Typography,
 } from '@rango-dev/ui';
-import BigNumber from 'bignumber.js';
 import React, { useState } from 'react';
 
 import { NAME_OF_FEES } from '../../constants/quote';
@@ -21,20 +21,9 @@ import {
   USD_VALUE_MAX_DECIMALS,
   USD_VALUE_MIN_DECIMALS,
 } from '../../constants/routing';
-import { useAppStore } from '../../store/AppStore';
 import { getContainer } from '../../utils/common';
-import {
-  formatTooltipNumbers,
-  numberToString,
-  secondsToString,
-  totalArrivalTime,
-} from '../../utils/numbers';
-import {
-  getFeesGroup,
-  getTotalFeeInUsd,
-  getTotalFeesInUsd,
-  getUsdFee,
-} from '../../utils/swap';
+import { formatTooltipNumbers, numberToString } from '../../utils/numbers';
+import { getFeesGroup, getTotalFeesInUsd, getUsdFee } from '../../utils/swap';
 import { WatermarkedModal } from '../common/WatermarkedModal';
 import { CustomCollapsible } from '../CustomCollapsible/CustomCollapsible';
 import { ExpandedIcon } from '../CustomCollapsible/CustomCollapsible.styles';
@@ -47,8 +36,6 @@ import {
   trigger,
 } from './QuoteCostDetails.styles';
 
-const GAS_FEE_MAX = 30;
-
 const NonPayableFee = (props: { fee: BigNumber; label: string }) => {
   return !props.fee.isZero() ? (
     <FeeSection>
@@ -70,14 +57,10 @@ const NonPayableFee = (props: { fee: BigNumber; label: string }) => {
 export function QuoteCostDetails(props: QuoteCostDetailsProps) {
   const [open, setOpen] = useState<boolean>(false);
   const [openCollapse, setOpenCollapse] = useState<boolean>(false);
-  const { steps, quote } = props;
-  const tokens = useAppStore().tokens();
-  const totalTime = secondsToString(totalArrivalTime(quote?.swaps));
+  const { steps, quote, fee, time, feeWarning } = props;
   const swaps = quote?.swaps ?? [];
   const container = getContainer();
 
-  const totalFee = getTotalFeeInUsd(swaps, tokens);
-
   const feesGroup = getFeesGroup(swaps);
 
   return (
@@ -87,13 +70,9 @@ export function QuoteCostDetails(props: QuoteCostDetailsProps) {
           e.stopPropagation();
           setOpen(!open);
         }}
-        fee={numberToString(
-          totalFee,
-          GAS_FEE_MIN_DECIMALS,
-          GAS_FEE_MAX_DECIMALS
-        )}
-        feeWarning={totalFee.gte(new BigNumber(GAS_FEE_MAX))}
-        time={totalTime}
+        fee={fee}
+        feeWarning={feeWarning}
+        time={time}
         steps={steps}
         tooltipGas={i18n.t('View more info')}
         tooltipContainer={container}
@@ -164,7 +143,7 @@ export function QuoteCostDetails(props: QuoteCostDetailsProps) {
             <Typography variant="label" size="medium">
               $
               {numberToString(
-                totalFee,
+                fee,
                 USD_VALUE_MIN_DECIMALS,
                 USD_VALUE_MAX_DECIMALS
               )}

package/src/components/QuoteSkeleton/QuoteSkeleton.types.ts

@@ -1,5 +1,7 @@
+import type { QuoteProps } from '../Quote/Quote.types';
+
 export type PropTypes = {
-  type: 'basic' | 'list-item' | 'swap-preview';
+  type: QuoteProps['type'];
   expanded?: boolean;
   tagHidden?: boolean;
 };

package/src/constants/quote.ts

@@ -37,3 +37,5 @@ export const HIGH_PRIORITY_TAGS: TagValue[] = [
   'FASTEST',
   'HIGH_IMPACT',
 ];
+
+export const GAS_FEE_MAX = 30;

package/src/utils/quote.ts

@@ -1,10 +1,11 @@
 /* eslint-disable @typescript-eslint/no-magic-numbers */
 import type { QuoteWarning, SelectedQuote, Wallet } from '../types';
-import type { PriceImpactWarningLevel, Step } from '@rango-dev/ui';
 import type {
+  PriceImpactWarningLevel,
   SimulationAssetAndAmount,
   SimulationValidationStatus,
-} from '@rango-dev/ui/dist/widget/ui/src/types/swaps';
+  Step,
+} from '@rango-dev/ui';
 import type {
   Asset,
   BlockchainMeta,
@@ -12,7 +13,6 @@ import type {
   MultiRouteSimulationResult,
   PreferenceType,
   RouteTag,
-  TagValue,
   Token,
 } from 'rango-sdk';
 import type { PendingSwap } from 'rango-types';
@@ -372,19 +372,3 @@ export const sortTags = (tags: RouteTag[]): RouteTag[] => {
 
   return tags.sort(customSort);
 };
-
-export const getRouteTagColor = (tag: TagValue): string => {
-  switch (tag) {
-    case 'FASTEST':
-      return '#06C270';
-    case 'RECOMMENDED':
-      return '#469BF5';
-    case 'LOWEST_FEE':
-      return '#FF4DAD';
-    case 'HIGH_IMPACT':
-      return '#FF3B3B';
-    case 'CENTRALIZED':
-    default:
-      return '#FFF1D4';
-  }
-};