more polish on routes UI

wormhole-connect/src/config/routes.ts

@@ -112,16 +112,16 @@ export const RoutesConfig: Record<string, RouteData> = {
   },
   MayanSwapMCTP: {
     name: 'MayanSwapMCTP',
-    displayName: 'Mayan Swap (MCTP)',
-    providedBy: 'Mayan (MCTP)',
+    displayName: 'Mayan Swap MCTP',
+    providedBy: 'Mayan MCTP',
     link: 'https://mayan.finance/',
     icon: XLabsIcon,
     pendingMessage: 'Waiting for Wormhole network consensus . . .',
   },
   MayanSwapSWIFT: {
     name: 'MayanSwapSWIFT',
-    displayName: 'Mayan Swap (Swift)',
-    providedBy: 'Mayan (Swift)',
+    displayName: 'Mayan Swap Swift',
+    providedBy: 'Mayan Swift',
     link: 'https://mayan.finance/',
     icon: XLabsIcon,
     pendingMessage: 'Waiting for Wormhole network consensus . . .',

wormhole-connect/src/icons/CheapestRoute.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { createSvgIcon } from '@mui/material';
+
+export default createSvgIcon(
+  <svg
+    width="14"
+    height="13"
+    viewBox="0 0 14 13"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M5.2,7.5c0-1,.8-1.8,1.7-1.8s1.7.8,1.7,1.8-.8,1.8-1.7,1.8-1.7-.8-1.7-1.8Z" />
+    <path d="M10.1,7.5c0,1.2-.6,2.2-1.6,2.7l1.9,3.4c2.1-1.2,3.5-3.5,3.5-6.1h-3.9Z" />
+    <path d="M7,4.3c.6,0,1.1.2,1.6.4l1.9-3.4c-1-.6-2.2-.9-3.5-.9s-2.5.3-3.5.9l1.9,3.4c.5-.3,1-.4,1.6-.4Z" />
+    <path d="M3.9,7.5H0c0,2.6,1.4,4.9,3.5,6.1l1.9-3.4c-.9-.5-1.6-1.5-1.6-2.7Z" />
+  </svg>,
+  'Cheapest',
+);

wormhole-connect/src/icons/FastestRoute.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { createSvgIcon } from '@mui/material';
+
+export default createSvgIcon(
+  <svg
+    width="9"
+    height="14"
+    viewBox="0 0 9 14"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M8.9,5.7c0-.1-.2-.2-.4-.2h-4c-.3,0-.5-.2-.5-.4V0L0,7.9c0,.1,0,.3,0,.4,0,.1.2.2.4.2h4c.3,0,.5.2.5.4v5.1l4-7.9c0-.1,0-.3,0-.4Z"
+      stroke-width="1.5"
+    />
+  </svg>,
+  'Fastest',
+);

wormhole-connect/src/theme.ts

@@ -201,7 +201,7 @@ export const dark: WormholeConnectTheme = {
   },
   text: {
     primary: '#ffffff',
-    secondary: '#667085',
+    secondary: '#79859e',
   },
   info: {
     50: '#97a5b7',

wormhole-connect/src/views/v2/Bridge/Routes/SingleRoute.tsx

@@ -21,6 +21,8 @@ import type { RootState } from 'store';
 import { formatBalance } from 'store/transferInput';
 import { toFixedDecimals } from 'utils/balance';
 import { TokenConfig } from 'config/types';
+import FastestRoute from 'icons/FastestRoute';
+import CheapestRoute from 'icons/CheapestRoute';
 
 const useStyles = makeStyles()((theme: any) => ({
   container: {
@@ -31,6 +33,20 @@ const useStyles = makeStyles()((theme: any) => ({
     width: '100%',
     maxWidth: '420px',
   },
+  fastestBadge: {
+    width: '14px',
+    height: '14px',
+    position: 'relative',
+    top: '2px',
+    fill: theme.palette.primary.main,
+  },
+  cheapestBadge: {
+    width: '12px',
+    height: '12px',
+    position: 'relative',
+    top: '1px',
+    fill: theme.palette.primary.main,
+  },
 }));
 
 type Props = {
@@ -41,6 +57,7 @@ type Props = {
   title?: string;
   isFastest?: boolean;
   isCheapest?: boolean;
+  isOnlyChoice?: boolean;
   onSelect?: (route: string) => void;
   quote?: routes.Quote<routes.Options>;
   isFetchingQuote: boolean;
@@ -120,7 +137,9 @@ const SingleRoute = (props: Props) => {
         <Typography color={theme.palette.text.secondary} fontSize={14}>
           Network cost
         </Typography>
-        {feeValue}
+        <Typography color={theme.palette.text.secondary} fontSize={14}>
+          {feeValue}
+        </Typography>
       </Stack>
     );
   }, [destToken, isFetchingQuote, quote?.relayFee, tokenPrices]);
@@ -173,7 +192,7 @@ const SingleRoute = (props: Props) => {
               color:
                 quote?.eta && quote.eta < 60 * 1000
                   ? theme.palette.success.main
-                  : theme.palette.text.primary,
+                  : theme.palette.text.secondary,
             }}
           >
             {quote?.eta ? millisToHumanString(quote.eta) : 'N/A'}
@@ -350,12 +369,19 @@ const SingleRoute = (props: Props) => {
   }
 
   const routeCardBadge = useMemo(() => {
-    if (props.isFastest && props.isCheapest) {
-      return <>😱 FASTEST AND CHEAPEST</>;
-    } else if (props.isFastest) {
-      return <>🐇 Fastest</>;
-    } else if (props.isCheapest) {
-      return <>😌 Cheapest</>;
+    if (props.isFastest) {
+      return (
+        <>
+          <FastestRoute className={classes.fastestBadge} />
+          {props.isOnlyChoice ? 'Fast' : 'Fastest'}
+        </>
+      );
+    } else if (props.isCheapest && !props.isOnlyChoice) {
+      return (
+        <>
+          <CheapestRoute className={classes.cheapestBadge} /> Cheapest
+        </>
+      );
     } else {
       return null;
     }

wormhole-connect/src/views/v2/Bridge/Routes/index.tsx

@@ -92,7 +92,11 @@ const Routes = ({ sortedSupportedRoutes, ...props }: Props) => {
         const quote = props.quotes[route.name];
         if (!quote || !quote.success) return fastest;
 
-        if (quote.eta !== undefined && quote.eta < fastest.eta) {
+        if (
+          quote.eta !== undefined &&
+          quote.eta < fastest.eta &&
+          quote.eta < 60_000
+        ) {
           return { name: route.name, eta: quote.eta };
         } else {
           return fastest;
@@ -177,6 +181,7 @@ const Routes = ({ sortedSupportedRoutes, ...props }: Props) => {
             isSelected={isSelected && !quoteError}
             isFastest={name === fastestRoute.name}
             isCheapest={name === cheapestRoute.name}
+            isOnlyChoice={supportedRoutes.length === 1}
             onSelect={props.onRouteChange}
             quote={quote}
             isFetchingQuote={props.isFetchingQuotes}