[NO CHANGELOG][Add Funds Widget] Show estimated time (#2249)

immutable · Sep 30, 2024 · 445c19c · 445c19c
1 parent 53b2812
commit 445c19c
Showing 1 changed file with 16 additions and 0 deletions.
diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/components/RouteOption.tsx b/packages/checkout/widgets-lib/src/widgets/add-funds/components/RouteOption.tsx
@@ -1,4 +1,5 @@
 import {
+  Icon,
   MenuItem, MenuItemSize, Sticker,
 } from '@biom3/react';
 import { ReactElement, useMemo } from 'react';
@@ -37,6 +38,15 @@ export function RouteOption<RC extends ReactElement | undefined = undefined>({
 
   const formattedUsdBalance = useMemo(() => (usdBalance ? Number(usdBalance).toFixed(2) : undefined), [usdBalance]);
 
+  const estimatedDurationFormatted = useMemo(() => {
+    const seconds = estimate.estimatedRouteDuration / 1000;
+    if (seconds >= 60) {
+      const minutes = Math.round(seconds / 60);
+      return minutes === 1 ? '1 min' : `${minutes} mins`;
+    }
+    return `${seconds.toFixed(0)}s`;
+  }, [estimate.estimatedRouteDuration]);
+
   const handleClick = () => {
     onClick?.(route);
   };
@@ -94,6 +104,12 @@ export function RouteOption<RC extends ReactElement | undefined = undefined>({
       <MenuItem.Badge badgeContent="Fastest" variant="emphasis" />
       )}
 
+      <MenuItem.Caption>
+        <Icon icon="Countdown" sx={{ w: 'base.icon.size.250' }} />
+        {' '}
+        { estimatedDurationFormatted }
+      </MenuItem.Caption>
+
     </MenuItem>
   );
 }