Merge pull request QuickSwap#1660 from QuickSwap/dev2

Dev2

Author: sameepsi

public/bridge/soneium.webp

@@ -40,6 +40,7 @@ import {
   useIsExpertMode,
   useUserSlippageTolerance,
   useAmlScore,
+  useUserSlippageAuto,
 } from 'state/user/hooks';
 import {
   maxAmountSpend,
@@ -57,7 +58,6 @@ import { useDerivedSwapInfo } from 'state/swap/hooks';
 import { useParams } from 'react-router-dom';
 import { V2_ROUTER_ADDRESS } from 'constants/v3/addresses';
 import usePoolsRedirect from 'hooks/usePoolsRedirect';
-import { SLIPPAGE_AUTO } from 'state/user/reducer';
 import { TransactionType } from 'models/enums';
 
 const AddLiquidity: React.FC<{
@@ -78,9 +78,9 @@ const AddLiquidity: React.FC<{
   const [showConfirm, setShowConfirm] = useState(false);
   const [attemptingTxn, setAttemptingTxn] = useState(false);
   const [txPending, setTxPending] = useState(false);
+  const [userSlippageAuto] = useUserSlippageAuto();
   let [allowedSlippage] = useUserSlippageTolerance();
-  allowedSlippage =
-    allowedSlippage === SLIPPAGE_AUTO ? autoSlippage : allowedSlippage;
+  allowedSlippage = userSlippageAuto ? autoSlippage : allowedSlippage;
 
   const { isLoading: isAmlScoreLoading, score: amlScore } = useAmlScore();
 

public/bridge/soneium_cover_img.webp

@@ -260,7 +260,7 @@ const Header: React.FC<{ onUpdateNewsletter: (val: boolean) => void }> = ({
     });
   }
 
-  if (chainId !== ChainId.SONEIUM && isSupportedNetwork)
+  if (isSupportedNetwork)
     menuItems.push({
       link: '/bridge',
       text: t('Bridge'),

src/assets/images/bridge/across.webp

@@ -1,30 +1,15 @@
 import React from 'react';
 import { useMediaQuery, useTheme } from '@material-ui/core';
 import { Banner } from '@hypelab/sdk-react';
-import { BannerEmbed } from '@spindl-xyz/embed-react';
-import { useActiveWeb3React } from 'hooks';
 
 const HypeLabAds: React.FC = () => {
-  const { isActive, account } = useActiveWeb3React();
   const { breakpoints } = useTheme();
   const isMobile = useMediaQuery(breakpoints.down('xs'));
 
   return (
     <div className='flex justify-center'>
-      {isActive && (
-        <BannerEmbed
-          publisherId='quickswap' // required (get from Spindl team)
-          placementId='swap_page' // required (get from Spindl team)
-          style={{
-            maxWidth: '728px',
-            width: '100%',
-            height: '90px',
-          }} // recommended to add desired width/height
-          address={account}
-        />
-      )}
-      {!isActive && isMobile && <Banner placement='4177d327af' />}
-      {!isActive && !isMobile && <Banner placement='f70b3ef021' />}
+      {isMobile && <Banner placement='4177d327af' />}
+      {!isMobile && <Banner placement='f70b3ef021' />}
     </div>
   );
 };

src/assets/images/bridge/soneium.webp

@@ -22,7 +22,10 @@ import {
   useBurnActionHandlers,
 } from 'state/burn/hooks';
 import { Field } from 'state/burn/actions';
-import { useUserSlippageTolerance } from 'state/user/hooks';
+import {
+  useUserSlippageAuto,
+  useUserSlippageTolerance,
+} from 'state/user/hooks';
 import {
   useTransactionAdder,
   useTransactionFinalizer,
@@ -46,7 +49,6 @@ import { ReactComponent as CloseIcon } from 'assets/images/CloseIcon.svg';
 import 'components/styles/RemoveLiquidityModal.scss';
 import { useTranslation } from 'react-i18next';
 import { V2_ROUTER_ADDRESS } from 'constants/v3/addresses';
-import { SLIPPAGE_AUTO } from 'state/user/reducer';
 import { TransactionType } from 'models/enums';
 
 interface RemoveLiquidityModalProps {
@@ -90,10 +92,10 @@ const RemoveLiquidityModal: React.FC<RemoveLiquidityModalProps> = ({
   const deadline = useTransactionDeadline();
   const { onUserInput: _onUserInput } = useBurnActionHandlers();
   const { autoSlippage } = useDerivedSwapInfo();
+  const [userSlippageAuto] = useUserSlippageAuto();
 
   let [allowedSlippage] = useUserSlippageTolerance();
-  allowedSlippage =
-    allowedSlippage === SLIPPAGE_AUTO ? autoSlippage : allowedSlippage;
+  allowedSlippage = userSlippageAuto ? autoSlippage : allowedSlippage;
 
   const onUserInput = useCallback(
     (field: Field, typedValue: string) => {

src/components/AddLiquidity/AddLiquidity.tsx

@@ -15,13 +15,14 @@ import {
   useUserSlippageTolerance,
   useBonusRouterManager,
   useSlippageManuallySet,
+  useUserSlippageAuto,
   useUserSingleHopOnly,
   useIsInfiniteApproval,
 } from 'state/user/hooks';
 import { ReactComponent as CloseIcon } from 'assets/images/CloseIcon.svg';
 import 'components/styles/SettingsModal.scss';
 import { useTranslation } from 'react-i18next';
-import { SLIPPAGE_AUTO } from 'state/user/reducer';
+import { SLIPPAGE_DEFAULT } from 'state/user/reducer';
 import { isMobile } from 'react-device-detect';
 import { LiquidityHubSettings } from 'components/Swap/orbs/LiquidityHub/Components';
 
@@ -64,6 +65,9 @@ const SettingsModal: React.FC<SettingsModalProps> = ({
     slippageManuallySet,
     setSlippageManuallySet,
   ] = useSlippageManuallySet();
+
+  const [userSlippageAuto, setUserSlippageAuto] = useUserSlippageAuto();
+
   const [ttl, setTtl] = useUserTransactionTTL();
   const { onChangeRecipient } = useSwapActionHandlers();
   const [expertMode, toggleExpertMode] = useExpertModeManager();
@@ -84,18 +88,24 @@ const SettingsModal: React.FC<SettingsModalProps> = ({
     deadlineInput === '' || (ttl / 60).toString() === deadlineInput;
 
   const slippageError = useMemo(() => {
+    if (userSlippageAuto) {
+      return undefined;
+    }
     if (slippageInput !== '' && !slippageInputIsValid) {
       return SlippageError.InvalidInput;
-    } else if (userSlippageTolerance === SLIPPAGE_AUTO) {
-      return undefined;
     } else if (slippageInputIsValid && userSlippageTolerance < 50) {
       return SlippageError.RiskyLow;
     } else if (slippageInputIsValid && userSlippageTolerance > 500) {
       return SlippageError.RiskyHigh;
     } else {
       return undefined;
     }
-  }, [slippageInput, userSlippageTolerance, slippageInputIsValid]);
+  }, [
+    slippageInput,
+    userSlippageTolerance,
+    slippageInputIsValid,
+    userSlippageAuto,
+  ]);
 
   const slippageAlert =
     !!slippageInput &&
@@ -112,7 +122,6 @@ const SettingsModal: React.FC<SettingsModalProps> = ({
 
   const parseCustomSlippage = (value: string) => {
     setSlippageInput(value);
-
     try {
       const valueAsIntFromRoundedFloat = Number.parseInt(
         (Number.parseFloat(value) * 100).toString(),
@@ -122,6 +131,7 @@ const SettingsModal: React.FC<SettingsModalProps> = ({
         valueAsIntFromRoundedFloat < 5000
       ) {
         setUserslippageTolerance(valueAsIntFromRoundedFloat);
+        setUserSlippageAuto(false);
         if (userSlippageTolerance !== valueAsIntFromRoundedFloat) {
           setSlippageManuallySet(true);
         }
@@ -198,14 +208,15 @@ const SettingsModal: React.FC<SettingsModalProps> = ({
           <Box className='flex items-center'>
             <Box
               className={`slippageButton${
-                userSlippageTolerance === SLIPPAGE_AUTO
+                userSlippageTolerance === SLIPPAGE_DEFAULT && userSlippageAuto
                   ? ' activeSlippageButton'
                   : ''
               }`}
               onClick={() => {
                 setSlippageInput('');
-                setUserslippageTolerance(SLIPPAGE_AUTO);
-                if (userSlippageTolerance !== SLIPPAGE_AUTO) {
+                setUserslippageTolerance(SLIPPAGE_DEFAULT);
+                setUserSlippageAuto(true);
+                if (userSlippageTolerance !== SLIPPAGE_DEFAULT) {
                   setSlippageManuallySet(true);
                 }
               }}
@@ -219,6 +230,7 @@ const SettingsModal: React.FC<SettingsModalProps> = ({
               onClick={() => {
                 setSlippageInput('');
                 setUserslippageTolerance(10);
+                setUserSlippageAuto(false);
                 if (userSlippageTolerance !== 10) {
                   setSlippageManuallySet(true);
                 }
@@ -228,11 +240,14 @@ const SettingsModal: React.FC<SettingsModalProps> = ({
             </Box>
             <Box
               className={`slippageButton${
-                userSlippageTolerance === 50 ? ' activeSlippageButton' : ''
+                userSlippageTolerance === 50 && !userSlippageAuto
+                  ? ' activeSlippageButton'
+                  : ''
               }`}
               onClick={() => {
                 setSlippageInput('');
                 setUserslippageTolerance(50);
+                setUserSlippageAuto(false);
                 if (userSlippageTolerance !== 50) {
                   setSlippageManuallySet(true);
                 }
@@ -247,6 +262,7 @@ const SettingsModal: React.FC<SettingsModalProps> = ({
               onClick={() => {
                 setSlippageInput('');
                 setUserslippageTolerance(100);
+                setUserSlippageAuto(false);
                 if (userSlippageTolerance !== 100) {
                   setSlippageManuallySet(true);
                 }

src/components/Header/Header.tsx

@@ -3,7 +3,10 @@ import React, { useState } from 'react';
 import { Box } from '@material-ui/core';
 import { useTranslation } from 'react-i18next';
 import { Field } from 'state/swap/actions';
-import { useUserSlippageTolerance } from 'state/user/hooks';
+import {
+  useUserSlippageAuto,
+  useUserSlippageTolerance,
+} from 'state/user/hooks';
 import {
   computeSlippageAdjustedAmounts,
   computeTradePriceBreakdown,
@@ -17,7 +20,6 @@ import {
 import { ReactComponent as EditIcon } from 'assets/images/EditIcon.svg';
 import { formatTokenAmount } from 'utils';
 import { useDerivedSwapInfo } from 'state/swap/hooks';
-import { SLIPPAGE_AUTO } from 'state/user/reducer';
 
 interface TradeSummaryProps {
   trade: Trade;
@@ -124,15 +126,14 @@ export const AdvancedSwapDetails: React.FC<AdvancedSwapDetailsProps> = ({
 }) => {
   const [allowedSlippage] = useUserSlippageTolerance();
   const { autoSlippage } = useDerivedSwapInfo();
+  const [userSlippageAuto] = useUserSlippageAuto();
 
   return (
     <>
       {trade && (
         <TradeSummary
           trade={trade}
-          allowedSlippage={
-            allowedSlippage === SLIPPAGE_AUTO ? autoSlippage : allowedSlippage
-          }
+          allowedSlippage={userSlippageAuto ? autoSlippage : allowedSlippage}
         />
       )}
     </>