feat: normalize error, remove Notif unused attributes

OriginProtocol · Oct 4, 2023 · 5cd6fea · 5cd6fea
1 parent 53bd43e
commit 5cd6fea
Show file tree

Hide file tree

Showing 12 changed files with 72 additions and 46 deletions.
diff --git a/libs/oeth/redeem/src/hooks.tsx b/libs/oeth/redeem/src/hooks.tsx
@@ -8,7 +8,7 @@ import {
 } from '@origin/oeth/shared';
 import { contracts, tokens } from '@origin/shared/contracts';
 import { usePushNotification, useSlippage } from '@origin/shared/providers';
-import { isNilOrEmpty } from '@origin/shared/utils';
+import { isNilOrEmpty, isUserRejected } from '@origin/shared/utils';
 import {
   prepareWriteContract,
   waitForTransaction,
@@ -103,7 +103,7 @@ export const useHandleRedeem = () => {
         ),
       });
     } catch (error) {
-      if (error.cause.name === 'UserRejectedRequestError') {
+      if (isUserRejected(error)) {
         deleteActivity(activity.id);
         pushNotification({
           title: intl.formatMessage({ defaultMessage: 'Redeem Cancelled' }),
@@ -116,14 +116,14 @@ export const useHandleRedeem = () => {
         updateActivity({
           ...activity,
           status: 'error',
-          error: error.shortMessage,
+          error: error?.shortMessage ?? error.message,
         });
         pushNotification({
           content: (
             <RedeemNotification
               {...activity}
               status="error"
-              error={error.shortMessage}
+              error={error?.shortMessage ?? error.message}
             />
           ),
         });

diff --git a/libs/oeth/redeem/src/state.ts b/libs/oeth/redeem/src/state.ts
@@ -77,16 +77,16 @@ export const { Provider: RedeemProvider, useTracked: useRedeemState } =
         try {
           splitEstimates = await queryClient.fetchQuery({
             queryKey: ['splitEstimates', state.amountIn.toString()],
-            queryFn: () =>
+            queryFn: async () =>
               readContract({
                 address: contracts.mainnet.OETHVaultCore.address,
                 abi: contracts.mainnet.OETHVaultCore.abi,
                 functionName: 'calculateRedeemOutputs',
                 args: [state.amountIn],
               }),
           });
-        } catch (e) {
-          console.error(`redeem vault estimate amount error.\n${e.message}`);
+        } catch (error) {
+          console.error(`Fail to estimate redeem operation.\n${error.message}`);
           setState(
             produce((draft) => {
               draft.amountIn = 0n;
@@ -99,7 +99,7 @@ export const { Provider: RedeemProvider, useTracked: useRedeemState } =
             title: intl.formatMessage({
               defaultMessage: 'Error while estimating',
             }),
-            message: e.shortMessage,
+            message: error?.shortMessage ?? error.message,
             severity: 'error',
           });
 
@@ -145,10 +145,8 @@ export const { Provider: RedeemProvider, useTracked: useRedeemState } =
                 account: whales.mainnet.OETH,
               }),
           });
-        } catch (e) {
-          console.error(
-            `redeem vault estimate gas error. Using default!\n${e.message}`,
-          );
+        } catch (error) {
+          console.log(`Redeem uses fix gas estimate: 1500000`);
           gasEstimate = 1500000n;
         }
 

diff --git a/libs/oeth/shared/src/components/ActivityProvider/components/ActivityPopover.tsx b/libs/oeth/shared/src/components/ActivityProvider/components/ActivityPopover.tsx
@@ -75,12 +75,22 @@ export const ActivityPopover = ({
               (a) =>
                 ({
                   approval: (
-                    <ApprovalNotification key={a.id} {...a} px={3} py={2} />
+                    <ApprovalNotification
+                      key={a.id}
+                      {...a}
+                      sx={{ px: 3, py: 2 }}
+                    />
                   ),
                   redeem: (
-                    <RedeemNotification key={a.id} {...a} px={3} py={2} />
+                    <RedeemNotification
+                      key={a.id}
+                      {...a}
+                      sx={{ px: 3, py: 2 }}
+                    />
+                  ),
+                  swap: (
+                    <SwapNotification key={a.id} {...a} sx={{ px: 3, py: 2 }} />
                   ),
-                  swap: <SwapNotification key={a.id} {...a} px={3} py={2} />,
                 })[a.type],
             )
           )}

diff --git a/libs/oeth/shared/src/components/ActivityProvider/components/ApprovalNotification.tsx b/libs/oeth/shared/src/components/ActivityProvider/components/ApprovalNotification.tsx
@@ -18,7 +18,7 @@ type ApprovalNotificationProps = {
   amountIn?: bigint;
   txReceipt?: TransactionReceipt;
   error?: string;
-} & StackProps;
+} & Pick<StackProps, 'sx'>;
 
 const title: Record<GlobalActivityStatus, MessageDescriptor> = {
   pending: defineMessage({ defaultMessage: 'Approving' }),
@@ -34,12 +34,12 @@ export const ApprovalNotification = ({
   amountIn,
   txReceipt,
   error,
-  ...rest
+  sx,
 }: ApprovalNotificationProps) => {
   const intl = useIntl();
 
   return (
-    <Stack {...rest} direction="row" justifyContent="space-between">
+    <Stack direction="row" justifyContent="space-between" sx={sx}>
       <Stack spacing={1}>
         <Stack direction="row" alignItems="center" spacing={1}>
           <ActivityIcon status={status} sx={{ width: 20, height: 20 }} />

diff --git a/libs/oeth/shared/src/components/ActivityProvider/components/RedeemNotification.tsx b/libs/oeth/shared/src/components/ActivityProvider/components/RedeemNotification.tsx
@@ -19,7 +19,7 @@ type RedeemNotificationProps = {
   amountOut?: bigint;
   txReceipt?: TransactionReceipt;
   error?: string;
-} & StackProps;
+} & Pick<StackProps, 'sx'>;
 
 const title: Record<GlobalActivityStatus, MessageDescriptor> = {
   pending: defineMessage({ defaultMessage: 'Redeeming' }),
@@ -36,12 +36,12 @@ export const RedeemNotification = ({
   amountOut,
   txReceipt,
   error,
-  ...rest
+  sx,
 }: RedeemNotificationProps) => {
   const intl = useIntl();
 
   return (
-    <Stack {...rest} direction="row" justifyContent="space-between">
+    <Stack direction="row" justifyContent="space-between" sx={sx}>
       <Stack spacing={1}>
         <Stack direction="row" alignItems="center" spacing={1}>
           <ActivityIcon status={status} sx={{ width: 20, height: 20 }} />

diff --git a/libs/oeth/shared/src/components/ActivityProvider/components/SwapNotification.tsx b/libs/oeth/shared/src/components/ActivityProvider/components/SwapNotification.tsx
@@ -19,7 +19,7 @@ type SwapNotificationProps = {
   amountOut?: bigint;
   txReceipt?: TransactionReceipt;
   error?: string;
-} & StackProps;
+} & Pick<StackProps, 'sx'>;
 
 const title: Record<GlobalActivityStatus, MessageDescriptor> = {
   pending: defineMessage({ defaultMessage: 'Swapping' }),
@@ -36,12 +36,12 @@ export const SwapNotification = ({
   amountOut,
   txReceipt,
   error,
-  ...rest
+  sx,
 }: SwapNotificationProps) => {
   const intl = useIntl();
 
   return (
-    <Stack width={1} {...rest} direction="row" justifyContent="space-between">
+    <Stack width={1} direction="row" justifyContent="space-between" sx={sx}>
       <Stack spacing={1}>
         <Stack direction="row" alignItems="center" spacing={1}>
           <ActivityIcon status={status} sx={{ width: 20, height: 20 }} />

diff --git a/libs/oeth/swap/src/actions/index.ts b/libs/oeth/swap/src/actions/index.ts
@@ -43,9 +43,11 @@ const defaultApi: SwapApi = {
   },
   approve: async () => {
     console.log('Approve operation not implemented');
+    return null;
   },
   swap: async () => {
     console.log('Route swap operation not implemented');
+    return null;
   },
 };
 

diff --git a/libs/oeth/swap/src/components/BestRoutes.tsx b/libs/oeth/swap/src/components/BestRoutes.tsx
@@ -10,8 +10,7 @@ import type { Grid2Props } from '@mui/material';
 export type BestRoutesProps = { isLoading: boolean } & Grid2Props;
 
 export function BestRoutes(props: Grid2Props) {
-  const [{ swapRoutes, selectedSwapRoute, isSwapRoutesLoading }] =
-    useSwapState();
+  const [{ swapRoutes, selectedSwapRoute }] = useSwapState();
   const handleSelectSwapRoute = useHandleSelectSwapRoute();
 
   return (
@@ -24,7 +23,6 @@ export function BestRoutes(props: Grid2Props) {
             isBest={index === 0}
             onSelect={handleSelectSwapRoute}
             route={route}
-            isLoading={isSwapRoutesLoading}
           />
         </Grid2>
       ))}

diff --git a/libs/oeth/swap/src/components/SwapRouteCard.tsx b/libs/oeth/swap/src/components/SwapRouteCard.tsx
@@ -21,27 +21,36 @@ import type { EstimatedSwapRoute } from '../types';
 export type SwapRouteCardProps = {
   isSelected: boolean;
   isBest: boolean;
-  isLoading: boolean;
   onSelect: (route: EstimatedSwapRoute) => void;
   route: EstimatedSwapRoute;
 } & Omit<CardProps, 'onSelect'>;
 
 export function SwapRouteCard({
   isSelected,
   isBest,
-  isLoading,
   onSelect,
   route,
   ...rest
 }: SwapRouteCardProps) {
   const intl = useIntl();
-  const [{ amountIn }] = useSwapState();
+  const [{ amountIn, isSwapRoutesLoading }] = useSwapState();
   const { data: prices } = usePrices();
-  const { data: swapGasPrice, isLoading: swapGasPriceLoading } = useGasPrice(
-    route.gas,
-  );
-  const { data: approvalGasPrice, isLoading: approvalGasPriceLoading } =
-    useGasPrice(route.approvalGas, { refetchInterval: 30e3 });
+  const {
+    data: swapGasPrice,
+    isLoading: swapGasPriceLoading,
+    isFetching: swapGasPriceFetching,
+  } = useGasPrice(route.gas, {
+    refetchInterval: 30e3,
+    enabled: route.gas > 0n,
+  });
+  const {
+    data: approvalGasPrice,
+    isLoading: approvalGasPriceLoading,
+    isFetching: approvalGasPriceFetching,
+  } = useGasPrice(route.approvalGas, {
+    refetchInterval: 30e3,
+    enabled: route.approvalGas > 0n,
+  });
   const { data: allowance } = useSwapRouteAllowance(route);
 
   const estimatedAmount = +formatUnits(
@@ -51,7 +60,9 @@ export function SwapRouteCard({
   const convertedAmount =
     (prices?.[route.tokenOut.symbol] ?? 1) * estimatedAmount;
   const isGasLoading =
-    isLoading || swapGasPriceLoading || approvalGasPriceLoading;
+    isSwapRoutesLoading ||
+    (swapGasPriceLoading && swapGasPriceFetching) ||
+    (approvalGasPriceLoading && approvalGasPriceFetching);
   const gasPrice =
     swapGasPrice?.gasCostUsd +
     (allowance < amountIn ? approvalGasPrice?.gasCostUsd : 0);
@@ -114,7 +125,7 @@ export function SwapRouteCard({
       <Stack height={1}>
         <Grid2 container spacing={0.5}>
           <Grid2 display="flex" alignItems="center">
-            {isLoading ? (
+            {isSwapRoutesLoading ? (
               <Skeleton variant="circular" width={16} height={16} />
             ) : (
               <Box
@@ -130,7 +141,7 @@ export function SwapRouteCard({
           </Grid2>
           <Grid2 display="flex" alignItems="center">
             <Typography fontWeight={500}>
-              {isLoading ? (
+              {isSwapRoutesLoading ? (
                 <Skeleton width={100} />
               ) : (
                 formatAmount(route.estimatedAmount, route.tokenOut.decimals)
@@ -139,7 +150,7 @@ export function SwapRouteCard({
           </Grid2>
           <Grid2 display="flex" alignItems="center" xs={12} sm="auto">
             <Typography color="text.secondary" variant="body2" noWrap>
-              {isLoading ? (
+              {isSwapRoutesLoading ? (
                 <Skeleton width={60} />
               ) : (
                 `(${intl.formatNumber(convertedAmount, currencyFormat)})`
@@ -152,7 +163,7 @@ export function SwapRouteCard({
             fontWeight={500}
             sx={{ fontSize: 12, marginBlock: { xs: 1.5, md: 1 } }}
           >
-            {isLoading ? (
+            {isSwapRoutesLoading ? (
               <Skeleton width={80} />
             ) : (
               intl.formatMessage(routeActionLabel[route.action])
@@ -169,7 +180,7 @@ export function SwapRouteCard({
                 {intl.formatMessage({ defaultMessage: 'Rate:' })}
               </Typography>
               <Typography variant="body2" fontWeight={500}>
-                {isLoading ? (
+                {isSwapRoutesLoading ? (
                   <Skeleton width={60} />
                 ) : (
                   `1:${intl.formatNumber(route.rate, quantityFormat)}`

diff --git a/libs/oeth/swap/src/hooks.tsx b/libs/oeth/swap/src/hooks.tsx
@@ -12,7 +12,7 @@ import {
   usePushNotification,
   useSlippage,
 } from '@origin/shared/providers';
-import { isNilOrEmpty } from '@origin/shared/utils';
+import { isNilOrEmpty, isUserRejected } from '@origin/shared/utils';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { waitForTransaction } from '@wagmi/core';
 import { produce } from 'immer';
@@ -256,7 +256,7 @@ export const useHandleApprove = () => {
           draft.isApprovalLoading = false;
         }),
       );
-      if (error.cause.name === 'UserRejectedRequestError') {
+      if (isUserRejected(error)) {
         deleteActivity(activity.id);
         pushNotification({
           title: intl.formatMessage({ defaultMessage: 'Approval Cancelled' }),
@@ -269,14 +269,14 @@ export const useHandleApprove = () => {
         updateActivity({
           ...activity,
           status: 'error',
-          error: error.shortMessage,
+          error: error?.shortMessage ?? error.message,
         });
         pushNotification({
           content: (
             <ApprovalNotification
               {...activity}
               status="error"
-              error={error.shortMessage}
+              error={error?.shortMessage ?? error.message}
             />
           ),
         });
@@ -375,7 +375,7 @@ export const useHandleSwap = () => {
           draft.isSwapLoading = false;
         }),
       );
-      if (error.cause.name === 'UserRejectedRequestError') {
+      if (isUserRejected(error)) {
         deleteActivity(activity.id);
         pushNotification({
           title: intl.formatMessage({ defaultMessage: 'Operation Cancelled' }),

diff --git a/libs/shared/utils/src/errors.ts b/libs/shared/utils/src/errors.ts
@@ -0,0 +1,6 @@
+import { pathEq } from 'ramda';
+
+export const isUserRejected = pathEq('UserRejectedRequestError', [
+  'cause',
+  'name',
+]);
diff --git a/libs/shared/utils/src/index.ts b/libs/shared/utils/src/index.ts
@@ -1,6 +1,7 @@
 export * from './addresses';
 export * from './BigInt';
 export * from './composeContext';
+export * from './errors';
 export * from './formatters';
 export * from './isNilOrEmpty';
 export * from './types';