@rango-dev/widget-embedded 0.36.1-next.3 → 0.36.1-next.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.36.1-next.3",
+  "version": "0.36.1-next.4",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -30,7 +30,7 @@
     "@rango-dev/queue-manager-rango-preset": "^0.40.1-next.1",
     "@rango-dev/queue-manager-react": "^0.27.0",
     "@rango-dev/signer-solana": "^0.35.0",
-    "@rango-dev/ui": "^0.42.1-next.2",
+    "@rango-dev/ui": "^0.42.1-next.3",
     "@rango-dev/wallets-core": "^0.40.1-next.1",
     "@rango-dev/wallets-react": "^0.26.1-next.1",
     "@rango-dev/wallets-shared": "^0.40.1-next.1",

package/src/components/Quote/Quote.tsx

@@ -17,7 +17,11 @@ import {
 import BigNumber from 'bignumber.js';
 import React, { useRef, useState } from 'react';
 
-import { GAS_FEE_MAX } from '../../constants/quote';
+import {
+  GAS_FEE_MAX,
+  ROUTE_TIME_MAX,
+  SECONDS_IN_MINUTE,
+} from '../../constants/quote';
 import {
   GAS_FEE_MAX_DECIMALS,
   GAS_FEE_MIN_DECIMALS,
@@ -311,7 +315,8 @@ export function Quote(props: QuoteProps) {
   const container = propContainer || getContainer();
   const sortedQuoteTags = sortTags(props.quote.tags || []);
   const showAllRoutesButton = !!onClickAllRoutes;
-  const totalTime = roundedSecondsToString(totalArrivalTime(quote?.swaps));
+  const totalDurationSeconds = totalArrivalTime(quote?.swaps);
+  const totalTime = roundedSecondsToString(totalDurationSeconds);
   const totalFee = getTotalFeeInUsd(quote?.swaps ?? [], findToken);
   const fee = numberToString(
     totalFee,
@@ -320,6 +325,8 @@ export function Quote(props: QuoteProps) {
   );
 
   const feeWarning = totalFee.gte(new BigNumber(GAS_FEE_MAX));
+  const timeWarning =
+    totalDurationSeconds / SECONDS_IN_MINUTE >= ROUTE_TIME_MAX;
 
   return fullExpandedMode ? (
     <FullExpandedQuote
@@ -336,6 +343,7 @@ export function Quote(props: QuoteProps) {
           time={totalTime}
           fee={fee}
           feeWarning={feeWarning}
+          timeWarning={timeWarning}
           showModalFee={showModalFee}
           steps={numberOfSteps}
         />
@@ -378,6 +386,7 @@ export function Quote(props: QuoteProps) {
             time={totalTime}
             fee={fee}
             feeWarning={feeWarning}
+            timeWarning={timeWarning}
             showModalFee={showModalFee}
             steps={numberOfSteps}
           />

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

@@ -48,6 +48,7 @@ export type QuoteCostDetailsProps = {
   fee: string;
   time: string;
   feeWarning?: boolean;
+  timeWarning?: boolean;
   showModalFee: boolean;
   fullExpandedMode?: boolean;
 };

package/src/components/Quote/QuoteCostDetails.tsx

@@ -63,6 +63,7 @@ export function QuoteCostDetails(props: QuoteCostDetailsProps) {
     fee,
     time,
     feeWarning,
+    timeWarning,
     showModalFee,
     fullExpandedMode = false,
   } = props;
@@ -84,6 +85,7 @@ export function QuoteCostDetails(props: QuoteCostDetailsProps) {
         }
         fee={fee}
         feeWarning={feeWarning}
+        timeWarning={timeWarning}
         time={time}
         steps={steps}
         tooltipGas={showModalFee ? i18n.t('View more info') : undefined}

package/src/constants/quote.ts

@@ -33,3 +33,5 @@ export const HIGH_PRIORITY_TAGS: TagValue[] = [
 ];
 
 export const GAS_FEE_MAX = 30;
+export const ROUTE_TIME_MAX = 15;
+export const SECONDS_IN_MINUTE = 60;