From cce0971ec858f17f2c2cdd4b87962ee5d109c53c Mon Sep 17 00:00:00 2001
From: toniocodo <antoine@originprotocol.com>
Date: Sun, 1 Oct 2023 12:33:19 +0200
Subject: [PATCH] fix: feedback round 2

- label capitalization
- update options in trailing options
- add tooltip for price tolerance
---
 .../history/src/components/APYContainer.tsx   |  2 +-
 .../history/src/components/HistoryCard.tsx    |  2 +-
 .../oeth/shared/src/components/GasPopover.tsx | 14 ++++++++--
 libs/oeth/swap/src/components/ApyHeader.tsx   | 28 ++++++++++---------
 .../components/src/InfoTooltip/index.tsx      |  8 +++++-
 5 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/libs/oeth/history/src/components/APYContainer.tsx b/libs/oeth/history/src/components/APYContainer.tsx
index 3b5e28f5e..a78598026 100644
--- a/libs/oeth/history/src/components/APYContainer.tsx
+++ b/libs/oeth/history/src/components/APYContainer.tsx
@@ -53,7 +53,7 @@ export function APYContainer() {
       <Divider orientation="vertical" flexItem />
       <ValueContainer
         label={intl.formatMessage({
-          defaultMessage: 'Lifetime earnings (OETH)',
+          defaultMessage: 'Lifetime Earnings (OETH)',
         })}
         value={intl.formatNumber(
           earnings?.addressById?.earned ?? 0,
diff --git a/libs/oeth/history/src/components/HistoryCard.tsx b/libs/oeth/history/src/components/HistoryCard.tsx
index 81b8b189b..4f931353b 100644
--- a/libs/oeth/history/src/components/HistoryCard.tsx
+++ b/libs/oeth/history/src/components/HistoryCard.tsx
@@ -39,7 +39,7 @@ export function HistoryCard() {
         justifyContent="space-between"
       >
         <Typography>
-          {intl.formatMessage({ defaultMessage: 'OETH transactions' })}
+          {intl.formatMessage({ defaultMessage: 'OETH Transactions' })}
         </Typography>
         <Stack direction="row" gap={1}>
           <HistoryFilters
diff --git a/libs/oeth/shared/src/components/GasPopover.tsx b/libs/oeth/shared/src/components/GasPopover.tsx
index 7a7cdab56..510e85e97 100644
--- a/libs/oeth/shared/src/components/GasPopover.tsx
+++ b/libs/oeth/shared/src/components/GasPopover.tsx
@@ -14,7 +14,7 @@ import {
   Stack,
   useTheme,
 } from '@mui/material';
-import { PercentInput } from '@origin/shared/components';
+import { InfoTooltip, PercentInput } from '@origin/shared/components';
 import { useIntl } from 'react-intl';
 import { useFeeData } from 'wagmi';
 
@@ -89,8 +89,18 @@ export function GasPopover({
       >
         <Stack gap={1}>
           <FormControl variant="standard">
-            <InputLabel htmlFor="slippage" shrink>
+            <InputLabel
+              htmlFor="slippage"
+              shrink
+              sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}
+            >
               {intl.formatMessage({ defaultMessage: 'Price Tolerance' })}
+              <InfoTooltip
+                tooltipLabel={intl.formatMessage({
+                  defaultMessage:
+                    'Your transaction will revert if the price changes unfavorably by more than this percentage.',
+                })}
+              />
             </InputLabel>
             <Box sx={gridStyles}>
               <Stack direction="row" gap={2}>
diff --git a/libs/oeth/swap/src/components/ApyHeader.tsx b/libs/oeth/swap/src/components/ApyHeader.tsx
index 04c01e999..d2bffbfcc 100644
--- a/libs/oeth/swap/src/components/ApyHeader.tsx
+++ b/libs/oeth/swap/src/components/ApyHeader.tsx
@@ -94,19 +94,21 @@ export const ApyHeader = (props: StackProps) => {
           }}
           MenuListProps={{ dense: true }}
         >
-          {trailingOptions.map((t) => (
-            <MenuItem
-              divider
-              key={t.value}
-              selected={trailing.value === t.value}
-              onClick={() => {
-                setTrailing(t);
-                setAnchorEl(null);
-              }}
-            >
-              {intl.formatMessage(t.label)}
-            </MenuItem>
-          ))}
+          {trailingOptions
+            .filter((t) => t.value !== trailing.value)
+            .map((t) => (
+              <MenuItem
+                divider
+                key={t.value}
+                selected={trailing.value === t.value}
+                onClick={() => {
+                  setTrailing(t);
+                  setAnchorEl(null);
+                }}
+              >
+                {intl.formatMessage(t.label)}
+              </MenuItem>
+            ))}
         </Menu>
       </Stack>
     </Paper>
diff --git a/libs/shared/components/src/InfoTooltip/index.tsx b/libs/shared/components/src/InfoTooltip/index.tsx
index c625bb3c9..94bc25eb7 100644
--- a/libs/shared/components/src/InfoTooltip/index.tsx
+++ b/libs/shared/components/src/InfoTooltip/index.tsx
@@ -1,15 +1,18 @@
 import { Box, Tooltip, Typography } from '@mui/material';
 
+import type { BoxProps } from '@mui/material';
+
 export type InfoTooltipProps = {
   tooltipLabel: string;
   iconSize?: number;
   iconColor?: string;
-};
+} & BoxProps;
 
 export function InfoTooltip({
   tooltipLabel,
   iconSize = 12,
   iconColor = 'text.secondary',
+  ...rest
 }: InfoTooltipProps) {
   return (
     <Tooltip
@@ -20,6 +23,7 @@ export function InfoTooltip({
       }
     >
       <Box
+        {...rest}
         component="img"
         src="/images/info.svg"
         data-testid="swap-route-info"
@@ -27,6 +31,8 @@ export function InfoTooltip({
           width: (theme) => theme.typography.pxToRem(iconSize),
           height: (theme) => theme.typography.pxToRem(iconSize),
           color: iconColor,
+
+          ...rest?.sx,
         }}
       ></Box>
     </Tooltip>