feat: remove gas input, fix notif logo, fix skeleton radius

OriginProtocol · Oct 5, 2023 · e8f872e · e8f872e
1 parent c3786a1
commit e8f872e
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 55 deletions.
diff --git a/libs/oeth/redeem/src/hooks.tsx b/libs/oeth/redeem/src/hooks.tsx
@@ -1,5 +1,6 @@
 import { useCallback } from 'react';
 
+import { Box } from '@mui/material';
 import {
   RedeemNotification,
   useDeleteActivity,
@@ -109,6 +110,7 @@ export const useHandleRedeem = () => {
         pushNotification({
           content: (
             <NotificationSnack
+              icon={<Box component="img" src="/images/warn.png" />}
               title={intl.formatMessage({
                 defaultMessage: 'Operation Cancelled',
               })}

diff --git a/libs/oeth/shared/src/components/ActivityProvider/components/ActivityPopover.tsx b/libs/oeth/shared/src/components/ActivityProvider/components/ActivityPopover.tsx
@@ -83,12 +83,18 @@ export const ActivityPopover = ({
           direction="row"
           alignItems="center"
           justifyContent="space-between"
+          sx={{ px: 3, py: 2 }}
         >
-          <Typography sx={{ px: 3, py: 2 }}>
-            {intl.formatMessage({ defaultMessage: 'Recent activity' })}
+          <Typography>
+            {intl.formatMessage({ defaultMessage: 'Recent Activity' })}
           </Typography>
-          <Button variant="text" onClick={handleClearAll}>
-            {intl.formatMessage({ defaultMessage: 'Clear All' })}
+          <Button
+            variant="text"
+            disabled={isNilOrEmpty(sortedActivities)}
+            onClick={handleClearAll}
+            sx={{ transform: 'translateX(9px)' }}
+          >
+            {intl.formatMessage({ defaultMessage: 'Clear' })}
           </Button>
         </Stack>
 
@@ -132,7 +138,7 @@ function EmptyActivity(props: StackProps) {
   return (
     <Stack {...props} justifyContent="center" alignItems="center" py={3}>
       <Typography>
-        {intl.formatMessage({ defaultMessage: 'No activity' })}
+        {intl.formatMessage({ defaultMessage: 'No Activity' })}
       </Typography>
     </Stack>
   );

diff --git a/libs/oeth/shared/src/components/ActivityProvider/components/ApprovalNotification.tsx b/libs/oeth/shared/src/components/ActivityProvider/components/ApprovalNotification.tsx
@@ -14,11 +14,10 @@ import type { GlobalActivityStatus } from '../types';
 type ApprovalNotificationProps = {
   status: GlobalActivityStatus;
   tokenIn: Token;
-  tokenOut: Token;
   amountIn?: bigint;
   txReceipt?: TransactionReceipt;
   error?: string;
-} & Pick<StackProps, 'sx'>;
+} & StackProps;
 
 const title: Record<GlobalActivityStatus, MessageDescriptor> = {
   pending: defineMessage({ defaultMessage: 'Approving' }),
@@ -30,16 +29,16 @@ const title: Record<GlobalActivityStatus, MessageDescriptor> = {
 export const ApprovalNotification = ({
   status,
   tokenIn,
-  tokenOut,
   amountIn,
   txReceipt,
   error,
-  sx,
+  ...rest
 }: ApprovalNotificationProps) => {
   const intl = useIntl();
 
   return (
     <NotificationSnack
+      {...rest}
       icon={<ActivityIcon status={status} sx={{ width: 20, height: 20 }} />}
       title={intl.formatMessage(title[status])}
       href={

diff --git a/libs/oeth/shared/src/components/GasPopover.tsx b/libs/oeth/shared/src/components/GasPopover.tsx
@@ -7,16 +7,13 @@ import {
   FormControl,
   FormHelperText,
   IconButton,
-  InputAdornment,
-  InputBase,
   InputLabel,
   Popover,
   Stack,
   useTheme,
 } from '@mui/material';
 import { InfoTooltip, PercentInput } from '@origin/shared/components';
 import { useIntl } from 'react-intl';
-import { useFeeData } from 'wagmi';
 
 import type { IconButtonProps } from '@mui/material';
 
@@ -45,7 +42,6 @@ export function GasPopover({
   const theme = useTheme();
   const intl = useIntl();
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
-  const { data: feeData } = useFeeData({ formatUnits: 'gwei' });
 
   return (
     <>
@@ -87,7 +83,7 @@ export function GasPopover({
           },
         }}
       >
-        <Stack gap={1}>
+        <Stack justifyContent="center">
           <FormControl variant="standard">
             <InputLabel
               htmlFor="slippage"
@@ -155,41 +151,6 @@ export function GasPopover({
               })}
             </FormHelperText>
           </FormControl>
-          <FormControl>
-            <InputLabel htmlFor="gas" shrink>
-              {intl.formatMessage({ defaultMessage: 'Gas Price' })}
-            </InputLabel>
-            <Box sx={gridStyles}>
-              <InputBase
-                id="gas"
-                readOnly
-                defaultValue={intl.formatNumber(
-                  parseFloat(feeData?.formatted.gasPrice ?? '0'),
-                  { maximumFractionDigits: 4 },
-                )}
-                fullWidth
-                sx={{
-                  borderColor: (theme) => theme.palette.secondary.main,
-                  backgroundColor: (theme) =>
-                    alpha(theme.palette.secondary.main, 0.05),
-                  paddingInlineEnd: 2,
-                  '& .MuiInputBase-input': {
-                    textAlign: 'right',
-                    borderColor: (theme) => theme.palette.secondary.main,
-                    '&::placeholder': {
-                      color: 'text.primary',
-                      opacity: 1,
-                    },
-                  },
-                }}
-                endAdornment={
-                  <InputAdornment position="end" sx={{ ml: 0 }}>
-                    {intl.formatMessage({ defaultMessage: 'GWEI' })}
-                  </InputAdornment>
-                }
-              />
-            </Box>
-          </FormControl>
         </Stack>
       </Popover>
     </>

diff --git a/libs/oeth/swap/src/hooks.tsx b/libs/oeth/swap/src/hooks.tsx
@@ -1,5 +1,6 @@
 import { useCallback, useMemo } from 'react';
 
+import { Box } from '@mui/material';
 import {
   ApprovalNotification,
   SwapNotification,
@@ -262,6 +263,7 @@ export const useHandleApprove = () => {
         pushNotification({
           content: (
             <NotificationSnack
+              icon={<Box component="img" src="/images/warn.png" />}
               title={intl.formatMessage({
                 defaultMessage: 'Operation Cancelled',
               })}
@@ -365,7 +367,6 @@ export const useHandleSwap = () => {
           queryKey: ['swap_allowance'],
         });
         pushNotification({
-          hideDuration: null,
           content: (
             <SwapNotification
               {...activity}
@@ -387,6 +388,7 @@ export const useHandleSwap = () => {
         pushNotification({
           content: (
             <NotificationSnack
+              icon={<Box component="img" src="/images/warn.png" />}
               title={intl.formatMessage({
                 defaultMessage: 'Operation Cancelled',
               })}

diff --git a/libs/shared/components/src/Notifications/NotificationSnack.tsx b/libs/shared/components/src/Notifications/NotificationSnack.tsx
@@ -3,7 +3,7 @@ import { isNilOrEmpty } from '@origin/shared/utils';
 
 import { LinkIcon } from '../Icons';
 
-import type { StackProps } from '@mui/material';
+import type { StackProps, TypographyProps } from '@mui/material';
 import type { ReactNode } from 'react';
 
 export type NotificationSnackProps = {
@@ -12,6 +12,8 @@ export type NotificationSnackProps = {
   href?: string;
   subtitle: ReactNode;
   endIcon?: ReactNode;
+  titleProps?: TypographyProps;
+  subtitleProps?: TypographyProps;
 } & Omit<StackProps, 'onClick'>;
 
 export const NotificationSnack = ({
@@ -20,18 +22,30 @@ export const NotificationSnack = ({
   href,
   subtitle,
   endIcon,
+  titleProps,
+  subtitleProps,
   ...rest
 }: NotificationSnackProps) => {
   return (
     <Stack width={1} direction="row" justifyContent="space-between" {...rest}>
       <Stack spacing={1}>
         <Stack direction="row" alignItems="center" spacing={1}>
           {icon}
-          <Typography>{title}</Typography>
+          {typeof title === 'string' ? (
+            <Typography {...titleProps}>{title}</Typography>
+          ) : (
+            title
+          )}
           {!isNilOrEmpty(href) && <LinkIcon size={10} url={href} />}
         </Stack>
         <Stack direction="row" alignItems="center">
-          {subtitle}
+          {typeof subtitle === 'string' ? (
+            <Typography color="text.tertiary" {...subtitleProps}>
+              {subtitle}
+            </Typography>
+          ) : (
+            subtitle
+          )}
         </Stack>
       </Stack>
       <Stack direction="row" alignItems="center" spacing={1}>

diff --git a/libs/shared/theme/src/theme.tsx b/libs/shared/theme/src/theme.tsx
@@ -164,7 +164,7 @@ export const theme = extendTheme({
             <Box component="img" src="/images/success.svg" sx={{ width: 20 }} />
           ),
           warning: (
-            <Box component="img" src="/images/failed.svg" sx={{ width: 20 }} />
+            <Box component="img" src="/images/warn.png" sx={{ width: 20 }} />
           ),
         },
       },
@@ -474,7 +474,7 @@ export const theme = extendTheme({
       },
       styleOverrides: {
         text: ({ theme }) => ({
-          borderRadius: 15,
+          borderRadius: 10,
           // backgroundColor: theme.palette.grey[900],
         }),
       },