feat: move slippage to local storage

libs/oeth/redeem/src/hooks.tsx

@@ -4,6 +4,7 @@ import { contracts } from '@origin/shared/contracts';
 import {
   BlockExplorerLink,
   usePushNotification,
+  useSlippage,
 } from '@origin/shared/providers';
 import { isNilOrEmpty } from '@origin/shared/utils';
 import {
@@ -35,26 +36,12 @@ export const useHandleAmountInChange = () => {
   );
 };
 
-export const useHandleSlippageChange = () => {
-  const [, setRedeemState] = useRedeemState();
-
-  return useCallback(
-    (value: number) => {
-      setRedeemState(
-        produce((state) => {
-          state.slippage = value;
-        }),
-      );
-    },
-    [setRedeemState],
-  );
-};
-
 export const useHandleRedeem = () => {
   const intl = useIntl();
+  const { value: slippage } = useSlippage();
   const pushNotification = usePushNotification();
   const { address } = useAccount();
-  const [{ amountIn, amountOut, slippage }, setRedeemState] = useRedeemState();
+  const [{ amountIn, amountOut }, setRedeemState] = useRedeemState();
   const wagmiClient = useQueryClient();
 
   return useCallback(async () => {

libs/oeth/redeem/src/types.ts

@@ -11,7 +11,6 @@ export type RedeemState = {
   split: RedeemEstimate[];
   gas: bigint;
   rate: number;
-  slippage: number;
   isEstimateLoading: boolean;
   isRedeemLoading: boolean;
 };

libs/oeth/redeem/src/views/RedeemView.tsx

@@ -11,17 +11,17 @@ import {
 import { GasPopover } from '@origin/oeth/shared';
 import { TokenInput } from '@origin/shared/components';
 import { tokens } from '@origin/shared/contracts';
-import { ConnectedButton, usePrices } from '@origin/shared/providers';
+import {
+  ConnectedButton,
+  usePrices,
+  useSlippage,
+} from '@origin/shared/providers';
 import { composeContexts } from '@origin/shared/utils';
 import { useIntl } from 'react-intl';
 import { useAccount, useBalance } from 'wagmi';
 
 import { RedeemRoute } from '../components/RedeemRoute';
-import {
-  useHandleAmountInChange,
-  useHandleRedeem,
-  useHandleSlippageChange,
-} from '../hooks';
+import { useHandleAmountInChange, useHandleRedeem } from '../hooks';
 import { RedeemProvider, useRedeemState } from '../state';
 
 import type { BoxProps } from '@mui/material';
@@ -55,20 +55,24 @@ export const RedeemView = () =>
 
 function RedeemViewWrapped() {
   const intl = useIntl();
+  const { value: slippage, set: setSlippage } = useSlippage();
   const { address, isConnected } = useAccount();
-  const [{ amountIn, slippage, isRedeemLoading, isEstimateLoading }] =
-    useRedeemState();
+  const [{ amountIn, isRedeemLoading, isEstimateLoading }] = useRedeemState();
   const { data: prices, isLoading: isPricesLoading } = usePrices();
   const { data: balOeth, isLoading: isBalOethLoading } = useBalance({
     address,
     token: tokens.mainnet.OETH.address,
     watch: true,
     scopeKey: 'redeem_balance',
   });
-  const handleSlippageChange = useHandleSlippageChange();
+
   const handleAmountInChange = useHandleAmountInChange();
   const handleRedeem = useHandleRedeem();
 
+  const handleSlippageChange = (val: number) => {
+    setSlippage(val);
+  };
+
   const redeemButtonLabel =
     amountIn === 0n
       ? intl.formatMessage({ defaultMessage: 'Enter an amount' })

libs/oeth/swap/src/hooks.ts

@@ -1,6 +1,10 @@
 import { useCallback, useMemo } from 'react';
 
-import { useCurve, usePushNotification } from '@origin/shared/providers';
+import {
+  useCurve,
+  usePushNotification,
+  useSlippage,
+} from '@origin/shared/providers';
 import { isNilOrEmpty } from '@origin/shared/utils';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { produce } from 'immer';
@@ -168,21 +172,6 @@ export const useSwapRouteAllowance = (route: SwapRoute) => {
   });
 };
 
-export const useHandleSlippageChange = () => {
-  const [, setSwapState] = useSwapState();
-
-  return useCallback(
-    (value: number) => {
-      setSwapState(
-        produce((state) => {
-          state.slippage = value;
-        }),
-      );
-    },
-    [setSwapState],
-  );
-};
-
 export const useHandleApprove = () => {
   const intl = useIntl();
   const { address } = useAccount();
@@ -265,13 +254,14 @@ export const useHandleApprove = () => {
 
 export const useHandleSwap = () => {
   const intl = useIntl();
+  const { value: slippage } = useSlippage();
   const { address } = useAccount();
   const curve = useCurve();
   const queryClient = useQueryClient();
   const wagmiClient = useWagmiClient();
   const pushNotification = usePushNotification();
   const [
-    { amountIn, amountOut, selectedSwapRoute, slippage, tokenIn, tokenOut },
+    { amountIn, amountOut, selectedSwapRoute, tokenIn, tokenOut },
     setSwapState,
   ] = useSwapState();
 
@@ -304,35 +294,25 @@ export const useHandleSwap = () => {
           title: intl.formatMessage({ defaultMessage: 'Swap complete' }),
           severity: 'success',
         });
-        setSwapState(
-          produce((draft) => {
-            draft.isSwapLoading = false;
-          }),
-        );
       },
       onError: () => {
         pushNotification({
           title: intl.formatMessage({ defaultMessage: 'Swap failed' }),
           severity: 'error',
         });
-        setSwapState(
-          produce((draft) => {
-            draft.isSwapLoading = false;
-          }),
-        );
       },
       onReject: () => {
         pushNotification({
           title: intl.formatMessage({ defaultMessage: 'Swap cancelled' }),
           severity: 'info',
         });
-        setSwapState(
-          produce((draft) => {
-            draft.isSwapLoading = false;
-          }),
-        );
       },
     });
+    setSwapState(
+      produce((draft) => {
+        draft.isSwapLoading = false;
+      }),
+    );
   }, [
     address,
     amountIn,

libs/oeth/swap/src/types.ts

@@ -122,7 +122,6 @@ export type SwapState = {
   tokenOut: Token;
   swapRoutes: EstimatedSwapRoute[];
   selectedSwapRoute: EstimatedSwapRoute | null;
-  slippage: number;
   isSwapRoutesLoading: boolean;
   isApproved: boolean;
   isApprovalLoading: boolean;

libs/oeth/swap/src/views/SwapView.tsx

@@ -15,7 +15,11 @@ import {
 } from '@mui/material';
 import { GasPopover } from '@origin/oeth/shared';
 import { TokenInput } from '@origin/shared/components';
-import { ConnectedButton, usePrices } from '@origin/shared/providers';
+import {
+  ConnectedButton,
+  usePrices,
+  useSlippage,
+} from '@origin/shared/providers';
 import { composeContexts, isNilOrEmpty } from '@origin/shared/utils';
 import { useIntl } from 'react-intl';
 import { useAccount, useBalance } from 'wagmi';
@@ -27,7 +31,6 @@ import { routeActionLabel } from '../constants';
 import {
   useHandleAmountInChange,
   useHandleApprove,
-  useHandleSlippageChange,
   useHandleSwap,
   useHandleTokenChange,
   useHandleTokenFlip,
@@ -69,6 +72,7 @@ export const SwapView = () =>
 
 function SwapViewWrapped() {
   const intl = useIntl();
+  const { value: slippage, set: setSlippage } = useSlippage();
   const { address, isConnected } = useAccount();
   const [tokenSource, setTokenSource] = useState<TokenSource | null>(null);
   const [
@@ -78,7 +82,6 @@ function SwapViewWrapped() {
       tokenIn,
       tokenOut,
       selectedSwapRoute,
-      slippage,
       isSwapLoading,
       isSwapRoutesLoading,
       isApprovalLoading,
@@ -99,7 +102,6 @@ function SwapViewWrapped() {
     watch: true,
     scopeKey: 'swap_balance',
   });
-  const handleSlippageChange = useHandleSlippageChange();
   const handleAmountInChange = useHandleAmountInChange();
   const handleTokenChange = useHandleTokenChange();
   const handleTokenFlip = useHandleTokenFlip();
@@ -114,6 +116,10 @@ function SwapViewWrapped() {
     handleTokenChange(tokenSource, value);
   };
 
+  const handleSlippageChange = (val: number) => {
+    setSlippage(val);
+  };
+
   const needsApproval =
     isConnected &&
     amountIn > 0n &&

libs/shared/providers/src/index.ts

@@ -4,4 +4,5 @@ export * from './gas';
 export * from './geoFence';
 export * from './notifications';
 export * from './prices';
+export * from './slippage';
 export * from './wagmi';

libs/shared/providers/src/slippage/index.ts

@@ -0,0 +1,7 @@
+import { useLocalStorageValue } from '@react-hookz/web';
+
+export const useSlippage = () => {
+  return useLocalStorageValue('@originprotocol/oeth-slippage', {
+    defaultValue: 0.001,
+  });
+};