feat: add recommended tag tooltip

lifinance · Apr 28, 2023 · 6021bb3 · 6021bb3
1 parent 6fd0c06
commit 6021bb3
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 34 deletions.
diff --git a/packages/widget/src/components/SwapRouteCard/SwapRouteCard.tsx b/packages/widget/src/components/SwapRouteCard/SwapRouteCard.tsx
@@ -2,9 +2,10 @@ import type { TokenAmount } from '@lifi/sdk';
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import VerifiedUserIcon from '@mui/icons-material/VerifiedUser';
+import type { TooltipProps } from '@mui/material';
 import { Box, Collapse, Tooltip, Typography } from '@mui/material';
 import type { MouseEventHandler } from 'react';
-import { useState } from 'react';
+import { Fragment, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useWidgetConfig } from '../../providers';
 import type { CardProps } from '../Card';
@@ -32,36 +33,15 @@ export const SwapRouteCard: React.FC<
       ? { ...route.fromToken, amount: route.fromAmount }
       : { ...route.toToken, amount: route.toAmount };
 
+  const RecommendedTagTooltip =
+    route.tags?.[0] === 'RECOMMENDED' ? RecommendedTooltip : Fragment;
+
   const cardContent = (
     <Box flex={1}>
       {widgetVariant !== 'refuel' && (insurable || route.tags?.length) ? (
         <Box display="flex" alignItems="center" mb={2}>
           {insurable ? (
-            <Tooltip
-              title={
-                <Box component="span">
-                  <Typography fontSize={12}>
-                    {t('swap.insurance.insure')}
-                  </Typography>
-                  <Box
-                    sx={{
-                      listStyleType: 'disc',
-                      pl: 2,
-                    }}
-                  >
-                    <Typography fontSize={12} display="list-item">
-                      {t('swap.insurance.bridgeExploits')}
-                    </Typography>
-                    <Typography fontSize={12} display="list-item">
-                      {t('swap.insurance.slippageError')}
-                    </Typography>
-                  </Box>
-                </Box>
-              }
-              placement="top"
-              enterDelay={400}
-              arrow
-            >
+            <InsuranceTooltip>
               <CardLabel
                 type={
                   route.tags?.length && !cardExpanded
@@ -76,14 +56,16 @@ export const SwapRouteCard: React.FC<
                   </CardLabelTypography>
                 ) : null}
               </CardLabel>
-            </Tooltip>
+            </InsuranceTooltip>
           ) : null}
           {route.tags?.length ? (
-            <CardLabel type={active ? 'active' : undefined}>
-              <CardLabelTypography>
-                {t(`swap.tags.${route.tags[0].toLowerCase()}` as any)}
-              </CardLabelTypography>
-            </CardLabel>
+            <RecommendedTagTooltip>
+              <CardLabel type={active ? 'active' : undefined}>
+                <CardLabelTypography>
+                  {t(`swap.tags.${route.tags[0].toLowerCase()}` as any)}
+                </CardLabelTypography>
+              </CardLabel>
+            </RecommendedTagTooltip>
           ) : null}
         </Box>
       ) : null}
@@ -120,3 +102,54 @@ export const SwapRouteCard: React.FC<
     </Card>
   );
 };
+
+const InsuranceTooltip: React.FC<Pick<TooltipProps, 'children'>> = ({
+  children,
+}) => {
+  const { t } = useTranslation();
+  return (
+    <Tooltip
+      title={
+        <Box component="span">
+          <Typography fontSize={12} fontWeight="500">
+            {t('swap.insurance.insure')}
+          </Typography>
+          <Box
+            sx={{
+              listStyleType: 'disc',
+              pl: 2,
+            }}
+          >
+            <Typography fontSize={12} fontWeight="500" display="list-item">
+              {t('swap.insurance.bridgeExploits')}
+            </Typography>
+            <Typography fontSize={12} fontWeight="500" display="list-item">
+              {t('swap.insurance.slippageError')}
+            </Typography>
+          </Box>
+        </Box>
+      }
+      placement="top"
+      enterDelay={400}
+      arrow
+    >
+      {children}
+    </Tooltip>
+  );
+};
+
+const RecommendedTooltip: React.FC<Pick<TooltipProps, 'children'>> = ({
+  children,
+}) => {
+  const { t } = useTranslation();
+  return (
+    <Tooltip
+      title={t('tooltip.recommended')}
+      placement="top"
+      enterDelay={400}
+      arrow
+    >
+      {children}
+    </Tooltip>
+  );
+};
diff --git a/packages/widget/src/components/SwapRouteCard/SwapRouteCardEssentials.tsx b/packages/widget/src/components/SwapRouteCard/SwapRouteCardEssentials.tsx
@@ -27,7 +27,11 @@ export const SwapRouteCardEssentials: React.FC<
           <Box component="span">
             {t(`tooltip.estimatedNetworkFee`)}
             {gasCosts.map((gas, index) => (
-              <Typography fontSize={12} key={`${gas.token.address}${index}`}>
+              <Typography
+                fontSize={12}
+                fontWeight="500"
+                key={`${gas.token.address}${index}`}
+              >
                 {gas.amount?.toFixed(9)} {gas.token.symbol} (
                 {t(`format.currency`, { value: gas.amountUSD })})
               </Typography>
@@ -57,7 +61,11 @@ export const SwapRouteCardEssentials: React.FC<
           <Box component="span">
             {t(`tooltip.additionalProviderFee`)}
             {feeCosts.map((fee, index) => (
-              <Typography fontSize={12} key={`${fee.token.address}${index}`}>
+              <Typography
+                fontSize={12}
+                fontWeight="500"
+                key={`${fee.token.address}${index}`}
+              >
                 {fee.amount?.toFixed(9)} {fee.token.symbol} (
                 {t(`format.currency`, { value: fee.amountUSD })})
               </Typography>

diff --git a/packages/widget/src/i18n/en.json b/packages/widget/src/i18n/en.json
@@ -251,6 +251,7 @@
     },
     "numberOfSteps": "A number of swap steps. Each step can contain 1-2 transactions that require a signature.",
     "progressToNextUpdate": "Displayed data will auto-refresh after {{value}} seconds. Click here to update manually.",
+    "recommended": "A cheap route that balances complexity and ease of use.",
     "settingsModified": "Settings (modified)"
   },
   "wallet": {