From 445c19c8f8324f27081f284e01bee2f9a821085e Mon Sep 17 00:00:00 2001
From: Mimi Tran <80493680+mimi-imtbl@users.noreply.github.com>
Date: Mon, 30 Sep 2024 15:49:01 +1000
Subject: [PATCH] [NO CHANGELOG][Add Funds Widget] Show estimated time (#2249)

---
 .../widgets/add-funds/components/RouteOption.tsx | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

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
index 739619d312..d28ee3982a 100644
--- 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>
   );
 }