fix: amends after code review

lifinance · Nov 24, 2023 · 011bf9c · 011bf9c
1 parent 730e406
commit 011bf9c
Show file tree

Hide file tree

Showing 24 changed files with 144 additions and 184 deletions.
diff --git a/packages/widget/src/components/Badge.tsx b/packages/widget/src/components/Badge.tsx
@@ -12,5 +12,6 @@ export const Badge = styled(MuiBadge)(({ theme }) => ({
     // the following removes MUI styling so we can position with the badge with flex
     position: 'relative',
     transform: 'translateX(0)',
+    borderRadius: '50%',
   },
 }));
diff --git a/packages/widget/src/components/Header/NavigationHeader.tsx b/packages/widget/src/components/Header/NavigationHeader.tsx
@@ -1,5 +1,5 @@
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
-import { Box, IconButton, Typography } from '@mui/material';
+import { Box, IconButton, Tooltip, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { Route, Routes, useLocation } from 'react-router-dom';
 import { useAccount, useNavigateBack } from '../../hooks';
@@ -15,8 +15,24 @@ import { HeaderAppBar, HeaderControlsContainer } from './Header.style';
 import { NavigationTabs } from './NavigationTabs';
 import { WalletMenuButton } from './WalletHeader';
 import { SettingsButton } from './SettingsButton';
-import { TransactionHistoryButton } from './TransactionHistoryButton';
+import ReceiptLongIcon from '@mui/icons-material/ReceiptLong';
 
+export const TransactionHistoryButton = () => {
+  const { t } = useTranslation();
+  const { navigate } = useNavigateBack();
+
+  return (
+    <Tooltip title={t(`header.transactionHistory`)} enterDelay={400} arrow>
+      <IconButton
+        size="medium"
+        edge="start"
+        onClick={() => navigate(navigationRoutes.transactionHistory)}
+      >
+        <ReceiptLongIcon />
+      </IconButton>
+    </Tooltip>
+  );
+};
 export const NavigationHeader: React.FC = () => {
   const { t } = useTranslation();
   const { subvariant, hiddenUI, variant } = useWidgetConfig();

diff --git a/...components/Header/SettingsButon.style.tsx → ...omponents/Header/SettingsButton.style.tsx b/...components/Header/SettingsButon.style.tsx → ...omponents/Header/SettingsButton.style.tsx
@@ -22,11 +22,13 @@ export const SettingsIconButton = styled(IconButton, {
         backgroundColor: darken(getWarningBackgroundColor(theme), 0.2),
       },
     },
-    default: {},
+    default: {
+      marginRight: theme.spacing(-1.25),
+    },
   };
 
   return {
-    borderRadius: theme.shape.borderRadiusSecondary,
+    borderRadius: 20,
     ...notificationStyles[notification ?? 'default'],
   };
 });
diff --git a/packages/widget/src/components/Header/SettingsButton.tsx b/packages/widget/src/components/Header/SettingsButton.tsx
@@ -3,7 +3,7 @@ import { Tooltip } from '@mui/material';
 import SettingsIcon from '@mui/icons-material/Settings';
 import { useNavigateBack, useSettingMonitor } from '../../hooks';
 import { navigationRoutes } from '../../utils';
-import { SettingsIconButton } from './SettingsButon.style';
+import { SettingsIconButton } from './SettingsButton.style';
 import { Badge } from '../../components/Badge';
 
 export const SettingsButton = () => {

diff --git a/packages/widget/src/components/Header/TransactionHistoryButton.style.ts b/packages/widget/src/components/Header/TransactionHistoryButton.style.ts
diff --git a/packages/widget/src/components/Header/TransactionHistoryButton.tsx b/packages/widget/src/components/Header/TransactionHistoryButton.tsx
diff --git a/packages/widget/src/components/Tabs/Tabs.style.tsx b/packages/widget/src/components/Tabs/Tabs.style.tsx
@@ -25,7 +25,9 @@ export const Tabs: StyledComponent<TabsProps> = styled(MuiTabs)(
         theme.palette.mode === 'dark'
           ? theme.palette.background.default
           : theme.palette.common.white,
-      borderRadius: theme.shape.borderRadiusSecondary,
+      borderRadius:
+        Math.max(theme.shape.borderRadius, theme.shape.borderRadiusSecondary) -
+        4,
       boxShadow: `0px 2px 4px ${alpha(theme.palette.common.black, 0.04)}`,
     },
   }),

diff --git a/packages/widget/src/pages/SelectEnabledToolsPage/SelectEnabledToolsPage.tsx b/packages/widget/src/pages/SelectEnabledToolsPage/SelectEnabledToolsPage.tsx
@@ -24,6 +24,7 @@ interface SelectAllCheckboxProps {
   onClick: MouseEventHandler;
   anyCheckboxesSelected: boolean;
 }
+
 const SelectAllCheckbox: React.FC<SelectAllCheckboxProps> = ({
   allCheckboxesSelected,
   anyCheckboxesSelected,

diff --git a/packages/widget/src/pages/SettingsPage/BridgeAndExchangeSettings.tsx b/packages/widget/src/pages/SettingsPage/BridgeAndExchangeSettings.tsx
@@ -6,7 +6,7 @@ import SwapHorizIcon from '@mui/icons-material/SwapHoriz';
 import { useSettingsStore } from '../../stores';
 import { navigationRoutes } from '../../utils';
 import { useSettingMonitor } from '../../hooks';
-import { SettingCardButton, BadgedAdditionalInformation } from './SettingsCard';
+import { SettingCardButton, BadgedValue } from './SettingsCard';
 
 const supportedIcons = {
   Bridges: AirlineStopsIcon,
@@ -41,10 +41,10 @@ export const BridgeAndExchangeSettings: React.FC<{
       icon={<Icon />}
       title={t(`settings.enabled${type}`)}
     >
-      <BadgedAdditionalInformation
+      <BadgedValue
         badgeColor="info"
         showBadge={customisationLookUp[type]}
-      >{`${enabledTools}/${tools}`}</BadgedAdditionalInformation>
+      >{`${enabledTools}/${tools}`}</BadgedValue>
     </SettingCardButton>
   );
 };
diff --git a/packages/widget/src/pages/SettingsPage/GasPriceSettings.tsx b/packages/widget/src/pages/SettingsPage/GasPriceSettings.tsx
@@ -3,10 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { useSettings, useSettingsStore } from '../../stores';
 import { Tab, Tabs } from '../../components/Tabs';
 import { useSettingMonitor } from '../../hooks';
-import {
-  SettingCardExpandable,
-  BadgedAdditionalInformation,
-} from './SettingsCard';
+import { SettingCardExpandable, BadgedValue } from './SettingsCard';
 
 export const GasPriceSettings: React.FC = () => {
   const { t } = useTranslation();
@@ -20,13 +17,10 @@ export const GasPriceSettings: React.FC = () => {
 
   return (
     <SettingCardExpandable
-      additionalInfo={
-        <BadgedAdditionalInformation
-          badgeColor="info"
-          showBadge={isGasPriceChanged}
-        >
+      value={
+        <BadgedValue badgeColor="info" showBadge={isGasPriceChanged}>
           {t(`settings.gasPrice.${gasPrice}` as any)}
-        </BadgedAdditionalInformation>
+        </BadgedValue>
       }
       icon={<EvStationIcon />}
       title={t(`settings.gasPrice.title`)}
@@ -38,9 +32,13 @@ export const GasPriceSettings: React.FC = () => {
         onChange={handleGasPriceChange}
         sx={{ mt: 1.5 }}
       >
-        <Tab label={t(`settings.gasPrice.slow`)} value="slow" />
-        <Tab label={t(`settings.gasPrice.normal`)} value="normal" />
-        <Tab label={t(`settings.gasPrice.fast`)} value="fast" />
+        <Tab label={t(`settings.gasPrice.slow`)} value="slow" disableRipple />
+        <Tab
+          label={t(`settings.gasPrice.normal`)}
+          value="normal"
+          disableRipple
+        />
+        <Tab label={t(`settings.gasPrice.fast`)} value="fast" disableRipple />
       </Tabs>
     </SettingCardExpandable>
   );

diff --git a/packages/widget/src/pages/SettingsPage/LanguageSetting.tsx b/packages/widget/src/pages/SettingsPage/LanguageSetting.tsx
@@ -5,7 +5,7 @@ import { useWidgetConfig } from '../../providers';
 import { HiddenUI } from '../../types';
 import { navigationRoutes } from '../../utils';
 import { useLanguages } from '../../hooks';
-import { SettingCardButton, SettingSummaryText } from './SettingsCard';
+import { SettingCardButton, SummaryValue } from './SettingsCard';
 
 export const LanguageSetting: React.FC = () => {
   const { t } = useTranslation();
@@ -27,7 +27,7 @@ export const LanguageSetting: React.FC = () => {
       icon={<LanguageIcon />}
       title={t(`language.title`)}
     >
-      <SettingSummaryText>{selectedLanguageDisplayName}</SettingSummaryText>
+      <SummaryValue>{selectedLanguageDisplayName}</SummaryValue>
     </SettingCardButton>
   );
 };
diff --git a/packages/widget/src/pages/SettingsPage/RoutePrioritySettings.tsx b/packages/widget/src/pages/SettingsPage/RoutePrioritySettings.tsx
@@ -4,10 +4,7 @@ import { Orders } from '@lifi/sdk';
 import { Tab, Tabs } from '../../components/Tabs';
 import { useSettings, useSettingsStore } from '../../stores';
 import { useSettingMonitor } from '../../hooks';
-import {
-  SettingCardExpandable,
-  BadgedAdditionalInformation,
-} from './SettingsCard';
+import { SettingCardExpandable, BadgedValue } from './SettingsCard';
 
 type SupportedRoute = (typeof Orders)[number];
 
@@ -27,13 +24,10 @@ export const RoutePrioritySettings: React.FC = () => {
 
   return (
     <SettingCardExpandable
-      additionalInfo={
-        <BadgedAdditionalInformation
-          badgeColor="info"
-          showBadge={isRoutePriorityChanged}
-        >
+      value={
+        <BadgedValue badgeColor="info" showBadge={isRoutePriorityChanged}>
           {t(`main.tags.${currentRoutePriority.toLowerCase()}` as any)}
-        </BadgedAdditionalInformation>
+        </BadgedValue>
       }
       icon={<RouteIcon />}
       title={t(`settings.routePriority`)}
@@ -52,6 +46,7 @@ export const RoutePrioritySettings: React.FC = () => {
               key={order}
               label={t(`main.tags.${order.toLowerCase()}` as any)}
               value={order}
+              disableRipple
             />
           );
         })}

diff --git a/packages/widget/src/pages/SettingsPage/SendToWalletOptionSetting.tsx b/packages/widget/src/pages/SettingsPage/SendToWalletOptionSetting.tsx
@@ -9,7 +9,12 @@ import {
   useSettingsStore,
 } from '../../stores';
 import { HiddenUI } from '../../types';
-import { SettingCardContainer } from './SettingsCard';
+import {
+  SettingCard,
+  SummaryRowContainer,
+  SummaryTitleContainer,
+  SummaryValue,
+} from './SettingsCard';
 
 export const SendToWalletOptionSetting = () => {
   const { t } = useTranslation();
@@ -30,11 +35,14 @@ export const SendToWalletOptionSetting = () => {
   };
 
   return (
-    <SettingCardContainer
-      icon={<WalletIcon />}
-      title={t(`settings.sendToWalletOption`)}
-    >
-      <Switch checked={showDestinationWallet} onChange={onChange} />
-    </SettingCardContainer>
+    <SettingCard>
+      <SummaryRowContainer>
+        <SummaryTitleContainer>
+          <WalletIcon />
+          <SummaryValue>{t(`settings.sendToWalletOption`)}</SummaryValue>
+        </SummaryTitleContainer>
+        <Switch checked={showDestinationWallet} onChange={onChange} />
+      </SummaryRowContainer>
+    </SettingCard>
   );
 };
diff --git a/packages/widget/src/pages/SettingsPage/SettingsCard/BadgedAdditionalInformation.tsx b/packages/widget/src/pages/SettingsPage/SettingsCard/BadgedAdditionalInformation.tsx
diff --git a/packages/widget/src/pages/SettingsPage/SettingsCard/BadgedValue.tsx b/packages/widget/src/pages/SettingsPage/SettingsCard/BadgedValue.tsx
@@ -0,0 +1,22 @@
+import type { PropsWithChildren } from 'react';
+import type { BadgeProps } from '@mui/material';
+import { Badge } from '../../../components/Badge';
+import { SummaryValue } from './SettingCard.style';
+
+interface BadgedValueProps {
+  showBadge: boolean;
+  badgeColor?: BadgeProps['color'];
+}
+
+export const BadgedValue: React.FC<PropsWithChildren<BadgedValueProps>> = ({
+  showBadge,
+  badgeColor,
+  children,
+}) =>
+  showBadge && badgeColor ? (
+    <Badge variant="dot" color={badgeColor}>
+      <SummaryValue>{children}</SummaryValue>
+    </Badge>
+  ) : (
+    <SummaryValue>{children}</SummaryValue>
+  );
diff --git a/packages/widget/src/pages/SettingsPage/SettingsCard/SettingCard.style.tsx b/packages/widget/src/pages/SettingsPage/SettingsCard/SettingCard.style.tsx
@@ -8,34 +8,34 @@ export const SettingsList = styled(Box)(({ theme }) => ({
   padding: theme.spacing(1, 3, 2),
 }));
 
-export const SettingTitle = styled(Box)(({ theme }) => ({
+export const SummaryTitleContainer = styled(Box)(({ theme }) => ({
   display: 'flex',
   alignItems: 'center',
   gap: theme.spacing(1.5),
 }));
 
-const SettingSummaryBase = {
+export const SummaryRowContainer = styled(Box)({
   display: 'flex',
   width: '100%',
   justifyContent: 'space-between',
   alignItems: 'center',
-};
-export const SettingSummary = styled(Box)({
-  ...SettingSummaryBase,
 });
 
-export const SettingSummaryButton = styled(ButtonBase)({
+export const SummaryRowButton = styled(ButtonBase)({
   background: 'none',
   color: 'inherit',
   border: 'none',
   padding: 0,
   font: 'inherit',
   cursor: 'pointer',
   outline: 'inherit',
-  ...SettingSummaryBase,
+  display: 'flex',
+  width: '100%',
+  justifyContent: 'space-between',
+  alignItems: 'center',
 });
 
-export const SettingSummaryText = styled(Typography)({
+export const SummaryValue = styled(Typography)({
   lineHeight: '1.25',
   fontWeight: 500,
 });
diff --git a/packages/widget/src/pages/SettingsPage/SettingsCard/SettingCardButton.tsx b/packages/widget/src/pages/SettingsPage/SettingsCard/SettingCardButton.tsx
@@ -1,25 +1,26 @@
 import type { MouseEventHandler, PropsWithChildren } from 'react';
-import type { SettingCardTitle } from './SettingCard.types';
+import type { SettingCardTitle } from './types';
 import { SettingCard } from './SettingCard';
 import {
-  SettingSummaryButton,
-  SettingSummaryText,
-  SettingTitle,
+  SummaryRowButton,
+  SummaryValue,
+  SummaryTitleContainer,
 } from './SettingCard.style';
 
 interface SettingCardButtonProps extends SettingCardTitle {
   onClick: MouseEventHandler;
 }
+
 export const SettingCardButton: React.FC<
   PropsWithChildren<SettingCardButtonProps>
 > = ({ onClick, icon, title, children }) => (
   <SettingCard>
-    <SettingSummaryButton onClick={onClick} focusRipple>
-      <SettingTitle>
+    <SummaryRowButton onClick={onClick} disableRipple>
+      <SummaryTitleContainer>
         {icon}
-        <SettingSummaryText>{title}</SettingSummaryText>
-      </SettingTitle>
+        <SummaryValue>{title}</SummaryValue>
+      </SummaryTitleContainer>
       {children}
-    </SettingSummaryButton>
+    </SummaryRowButton>
   </SettingCard>
 );