fix: feedback round 2

- label capitalization - update options in trailing options - add tooltip for price tolerance
OriginProtocol · Oct 1, 2023 · cce0971 · cce0971
1 parent 44e81fb
commit cce0971
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 18 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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,13 +23,16 @@ export function InfoTooltip({
       }
     >
       <Box
+        {...rest}
         component="img"
         src="/images/info.svg"
         data-testid="swap-route-info"
         sx={{
           width: (theme) => theme.typography.pxToRem(iconSize),
           height: (theme) => theme.typography.pxToRem(iconSize),
           color: iconColor,
+
+          ...rest?.sx,
         }}
       ></Box>
     </Tooltip>