slippage set to one, unified slippage in every place from one file

soroswap · Sep 4, 2024 · 95097b9 · 95097b9
1 parent c530bc1
commit 95097b9
Show file tree

Hide file tree

Showing 12 changed files with 67 additions and 64 deletions.
diff --git a/pages/liquidity/index.tsx b/pages/liquidity/index.tsx
@@ -16,17 +16,15 @@ import useGetLpTokens from 'hooks/useGetLpTokens';
 import { useRouter } from 'next/router';
 import { useContext, useState } from 'react';
 import SEO from '../../src/components/SEO';
+import { DEFAULT_SLIPPAGE_INPUT_VALUE } from 'components/Settings/MaxSlippageSettings';
 
 const PageWrapper = styled(AutoColumn)`
   position: relative;
-  background: ${({ theme }) => `linear-gradient(${theme.palette.customBackground.bg2}, ${
-    theme.palette.customBackground.bg2
-  }) padding-box,
-              linear-gradient(150deg, rgba(136,102,221,1) 0%, rgba(${
-                theme.palette.mode == 'dark' ? '33,29,50,1' : '255,255,255,1'
-              }) 35%, rgba(${
-                theme.palette.mode == 'dark' ? '33,29,50,1' : '255,255,255,1'
-              }) 65%, rgba(136,102,221,1) 100%) border-box`};
+  background: ${({ theme }) => `linear-gradient(${theme.palette.customBackground.bg2}, ${theme.palette.customBackground.bg2
+    }) padding-box,
+              linear-gradient(150deg, rgba(136,102,221,1) 0%, rgba(${theme.palette.mode == 'dark' ? '33,29,50,1' : '255,255,255,1'
+    }) 35%, rgba(${theme.palette.mode == 'dark' ? '33,29,50,1' : '255,255,255,1'
+    }) 65%, rgba(136,102,221,1) 100%) border-box`};
   border: 1px solid transparent;
   border-radius: 16px;
   padding: 32px;
@@ -108,7 +106,7 @@ export default function LiquidityPage() {
         <div style={{ width: '100%' }}>
           <AutoRow style={{ justifyContent: 'space-between' }}>
             <SubHeader>Your liquidity</SubHeader>
-            <SettingsTab autoSlippage={0.5} />
+            <SettingsTab autoSlippage={DEFAULT_SLIPPAGE_INPUT_VALUE} />
           </AutoRow>
           <div>
             <BodySmall>List of your liquidity positions</BodySmall>

diff --git a/src/components/Liquidity/Add/AddLiquidityComponent.tsx b/src/components/Liquidity/Add/AddLiquidityComponent.tsx
@@ -38,14 +38,11 @@ import AddModalHeader from './AddModalHeader';
 
 export const PageWrapper = styled('main')`
   position: relative;
-  background: ${({ theme }) => `linear-gradient(${theme.palette.customBackground.bg2}, ${
-    theme.palette.customBackground.bg2
-  }) padding-box,
-              linear-gradient(150deg, rgba(136,102,221,1) 0%, rgba(${
-                theme.palette.mode == 'dark' ? '33,29,50,1' : '255,255,255,1'
-              }) 35%, rgba(${
-                theme.palette.mode == 'dark' ? '33,29,50,1' : '255,255,255,1'
-              }) 65%, rgba(136,102,221,1) 100%) border-box`};
+  background: ${({ theme }) => `linear-gradient(${theme.palette.customBackground.bg2}, ${theme.palette.customBackground.bg2
+    }) padding-box,
+              linear-gradient(150deg, rgba(136,102,221,1) 0%, rgba(${theme.palette.mode == 'dark' ? '33,29,50,1' : '255,255,255,1'
+    }) 35%, rgba(${theme.palette.mode == 'dark' ? '33,29,50,1' : '255,255,255,1'
+    }) 65%, rgba(136,102,221,1) 100%) border-box`};
   border: 1px solid transparent;
   border-radius: 16px;
   padding: 32px;

diff --git a/src/components/Liquidity/AddRemoveHeader.tsx b/src/components/Liquidity/AddRemoveHeader.tsx
@@ -19,6 +19,7 @@ import Link from 'next/link';
 import { ReactNode } from 'react';
 import { ArrowLeft, Settings } from 'react-feather';
 import { flexRowNoWrap } from 'themes/styles';
+import { DEFAULT_SLIPPAGE_INPUT_VALUE } from 'components/Settings/MaxSlippageSettings';
 
 // import Row, { RowBetween } from '../Row'
 // import SettingsTab from '../Settings'
@@ -30,7 +31,7 @@ const Tabs = styled('div')`
   justify-content: space-evenly;
 `;
 
-const StyledHistoryLink = styled(Link)<{ flex?: string }>`
+const StyledHistoryLink = styled(Link) <{ flex?: string }>`
   flex: ${({ flex }) => flex ?? 'none'};
 `;
 
@@ -107,7 +108,7 @@ export function AddRemoveTabs({
         </SubHeader>
         <Box style={{ marginRight: '.5rem' }}>{children}</Box>
         <RowFixed style={{ padding: '6px 12px' }}>
-          <SettingsTab autoSlippage={0.5} />
+          <SettingsTab autoSlippage={DEFAULT_SLIPPAGE_INPUT_VALUE} />
         </RowFixed>
       </RowBetween>
     </Tabs>

diff --git a/src/components/Liquidity/Remove/RemoveLiquidityComponent.tsx b/src/components/Liquidity/Remove/RemoveLiquidityComponent.tsx
@@ -32,14 +32,11 @@ import { AddRemoveTabs } from '../AddRemoveHeader';
 
 export const PageWrapper = styled('main')`
   position: relative;
-  background: ${({ theme }) => `linear-gradient(${theme.palette.customBackground.bg2}, ${
-    theme.palette.customBackground.bg2
-  }) padding-box,
-              linear-gradient(150deg, rgba(136,102,221,1) 0%, rgba(${
-                theme.palette.mode == 'dark' ? '33,29,50,1' : '255,255,255,1'
-              }) 35%, rgba(${
-                theme.palette.mode == 'dark' ? '33,29,50,1' : '255,255,255,1'
-              }) 65%, rgba(136,102,221,1) 100%) border-box`};
+  background: ${({ theme }) => `linear-gradient(${theme.palette.customBackground.bg2}, ${theme.palette.customBackground.bg2
+    }) padding-box,
+              linear-gradient(150deg, rgba(136,102,221,1) 0%, rgba(${theme.palette.mode == 'dark' ? '33,29,50,1' : '255,255,255,1'
+    }) 35%, rgba(${theme.palette.mode == 'dark' ? '33,29,50,1' : '255,255,255,1'
+    }) 65%, rgba(136,102,221,1) 100%) border-box`};
   border: 1px solid transparent;
   border-radius: 16px;
   padding: 32px;
@@ -57,13 +54,13 @@ export const PageWrapper = styled('main')`
   }
 `;
 
-const StyledTokenName = styled('span')<{ active?: boolean }>`
+const StyledTokenName = styled('span') <{ active?: boolean }>`
   ${({ active }) => (active ? '  margin: 0 0.25rem 0 0.25rem;' : '  margin: 0 0.25rem 0 0.25rem;')}
   color: ${({ theme }) => theme.palette.custom.textPrimary};
   font-size: 20px;
 `;
 
-const Container = styled('div')<{ transparent?: boolean }>`
+const Container = styled('div') <{ transparent?: boolean }>`
   border-radius: 16px;
   padding: 1.25rem;
   border: 1px solid ${({ theme }) => theme.palette.custom.textSecondary};
@@ -390,8 +387,8 @@ export default function RemoveLiquidityComponent() {
               >
                 {currencyA && currencyA.code && currencyA.code.length > 20
                   ? currencyA.code.slice(0, 4) +
-                    '...' +
-                    currencyA.code.slice(currencyA.code.length - 5, currencyA.code.length)
+                  '...' +
+                  currencyA.code.slice(currencyA.code.length - 5, currencyA.code.length)
                   : currencyA?.code}
               </StyledTokenName>
               {isLoadingPairInfo ? (
@@ -412,8 +409,8 @@ export default function RemoveLiquidityComponent() {
               >
                 {currencyB && currencyB.code && currencyB.code.length > 20
                   ? currencyB.code.slice(0, 4) +
-                    '...' +
-                    currencyB.code.slice(currencyB.code.length - 5, currencyB.code.length)
+                  '...' +
+                  currencyB.code.slice(currencyB.code.length - 5, currencyB.code.length)
                   : currencyB?.code}
               </StyledTokenName>
               {isLoadingPairInfo ? (
@@ -438,7 +435,7 @@ export default function RemoveLiquidityComponent() {
               </div>
             </Column>
           </Container>
-          Slippage Tolerance 0.5%
+          Slippage Tolerance {allowedSlippage}%
           {!sorobanContext.address ? (
             <ButtonLight onClick={() => setConnectWalletModalOpen(true)}>{error}</ButtonLight>
           ) : (

diff --git a/src/components/Settings/MaxSlippageSettings/index.tsx b/src/components/Settings/MaxSlippageSettings/index.tsx
@@ -13,7 +13,7 @@ enum SlippageError {
 
 const Option = styled(Row, {
   shouldForwardProp: (prop) => prop !== 'isActive',
-})<{ isActive: boolean }>`
+}) <{ isActive: boolean }>`
   width: auto;
   cursor: pointer;
   padding: 6px 12px;
@@ -37,7 +37,7 @@ const NUMBER_WITH_MAX_TWO_DECIMAL_PLACES = /^(?:\d+(?:\.\d{0,2})?|\.\d{0,2})?$/;
 const MINIMUM_RECOMMENDED_SLIPPAGE = 0.05;
 const MAXIMUM_RECOMMENDED_SLIPPAGE = 1;
 
-export const DEFAULT_SLIPPAGE_INPUT_VALUE = 0.5;
+export const DEFAULT_SLIPPAGE_INPUT_VALUE = 1;
 
 export default function MaxSlippageSettings({ autoSlippage }: { autoSlippage: number }) {
   const theme = useTheme();
@@ -193,7 +193,7 @@ export default function MaxSlippageSettings({ autoSlippage }: { autoSlippage: nu
                 transaction
               </div>
             ) : (
-                <div data-testid='slippage-alert-too-high'>Your transaction may be frontrun and result in an unfavorable trade.</div>
+              <div data-testid='slippage-alert-too-high'>Your transaction may be frontrun and result in an unfavorable trade.</div>
             )}
           </Alert>
         </RowBetween>

diff --git a/src/components/Settings/MenuButton/index.tsx b/src/components/Settings/MenuButton/index.tsx
@@ -4,13 +4,14 @@ import { styled, useMediaQuery, useTheme } from 'soroswap-ui';
 import { Settings } from 'react-feather';
 import settingsIcon from '../../../assets/svg/settingsIcon.svg';
 import Image from 'next/image';
+import { DEFAULT_SLIPPAGE_INPUT_VALUE } from '../MaxSlippageSettings';
 
 const Icon = styled(Settings)`
   height: 24px;
   width: 24px;
 `;
 
-const Button = styled('button')<{ isActive: boolean }>`
+const Button = styled('button') <{ isActive: boolean }>`
   border: none;
   background-color: transparent;
   margin: 0;
@@ -43,7 +44,7 @@ const ButtonContent = () => {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('md'));
 
-  if (userSlippageTolerance === 0.5) {
+  if (userSlippageTolerance === DEFAULT_SLIPPAGE_INPUT_VALUE) {
     return (
       <IconContainer>
         <Image

diff --git a/src/components/Swap/SwapHeader.tsx b/src/components/Swap/SwapHeader.tsx
@@ -5,6 +5,7 @@ import { SubHeader } from '../Text';
 import TuneRoundedIcon from '@mui/icons-material/TuneRounded';
 import SettingsTab from '../Settings/index';
 import { useMediaQuery } from 'soroswap-ui';
+import { DEFAULT_SLIPPAGE_INPUT_VALUE } from 'components/Settings/MaxSlippageSettings';
 const StyledSwapHeader = styled(RowBetween)(({ theme }) => ({
   marginBottom: 10,
   color: theme.palette.secondary.main,
@@ -42,7 +43,7 @@ export default function SwapHeader({
         )}
       </HeaderButtonContainer>
       <RowFixed style={{ padding: '6px 12px' }}>
-        <SettingsTab autoSlippage={0.5} />
+        <SettingsTab autoSlippage={DEFAULT_SLIPPAGE_INPUT_VALUE} />
       </RowFixed>
     </StyledSwapHeader>
   );

diff --git a/src/helpers/horizon/getHorizonPath.ts b/src/helpers/horizon/getHorizonPath.ts
@@ -103,25 +103,25 @@ export const parseHorizonResult = async (
   const currecnyIn: TokenType =
     payload.source_asset_type == 'native'
       ? {
-          code: 'XLM',
-          contract: '',
-        }
+        code: 'XLM',
+        contract: '',
+      }
       : {
-          code: payload.source_asset_code,
-          issuer: payload.source_asset_issuer,
-          contract: `${payload.source_asset_code}:${payload.source_asset_issuer}`,
-        };
+        code: payload.source_asset_code,
+        issuer: payload.source_asset_issuer,
+        contract: `${payload.source_asset_code}:${payload.source_asset_issuer}`,
+      };
   const currencyOut: TokenType =
     payload.destination_asset_type == 'native'
       ? {
-          code: 'XLM',
-          contract: '',
-        }
+        code: 'XLM',
+        contract: '',
+      }
       : {
-          code: payload.destination_asset_code,
-          issuer: payload.destination_asset_issuer,
-          contract: `${payload.destination_asset_code}:${payload.destination_asset_issuer}`,
-        };
+        code: payload.destination_asset_code,
+        issuer: payload.destination_asset_issuer,
+        contract: `${payload.destination_asset_code}:${payload.destination_asset_issuer}`,
+      };
   const inputAmount: CurrencyAmount = {
     currency: currecnyIn,
     value: new BigNumber(payload.source_amount).multipliedBy(10000000).toString(),
@@ -142,14 +142,14 @@ export const parseHorizonResult = async (
     !currecnyIn.issuer && currecnyIn.code === 'XLM'
       ? 'native'
       : currecnyIn.issuer
-      ? `${currecnyIn.code}:${currecnyIn.issuer}`
-      : `${currecnyIn.code}`;
+        ? `${currecnyIn.code}:${currecnyIn.issuer}`
+        : `${currecnyIn.code}`;
   const addressTo =
     !currencyOut.issuer && currencyOut.code === 'XLM'
       ? 'native'
       : currencyOut.issuer
-      ? `${currencyOut.code}:${currencyOut.issuer}`
-      : `${currencyOut.code}`;
+        ? `${currencyOut.code}:${currencyOut.issuer}`
+        : `${currencyOut.code}`;
 
   const formattedPath = [addressFrom, ...parsedPath, addressTo];
 
@@ -212,8 +212,12 @@ export function getHorizonBestPath(
       const send = serverHorizon.strictSendPaths(args.assetFrom, args.amount, [args.assetTo])
         .call().then((res) => res.records);
       return send?.then((res) => {
+        console.log('🚀 ~ returnsend?.then ~ res:', res);
         const maxObj = res.reduce((maxObj, obj) => {
-          if (obj.destination_amount > maxObj.destination_amount) {
+          if (maxObj.path.length <= 1) {
+
+          }
+          if (obj.destination_amount > maxObj.destination_amount && obj.path.length <= 1) {
             return obj;
           } else {
             return maxObj;

diff --git a/src/hooks/useSwapCallback.tsx b/src/hooks/useSwapCallback.tsx
@@ -66,8 +66,9 @@ export const getSwapAmounts = ({
   tradeType,
   inputAmount,
   outputAmount,
-  allowedSlippage = 0.5,
+  allowedSlippage = DEFAULT_SLIPPAGE_INPUT_VALUE,
 }: GetSwapAmountsProps) => {
+  console.log('🚀 ~ allowedSlippage:', allowedSlippage);
   const routerMethod =
     tradeType == TradeType.EXACT_INPUT ? RouterMethod.SWAP_EXACT_IN : RouterMethod.SWAP_EXACT_OUT;
 
@@ -221,7 +222,7 @@ export function useSwapCallback(
 
           const notificationMessage = `${formatTokenAmount(currencyA ?? '0')} ${trade?.inputAmount
             ?.currency.code} for ${formatTokenAmount(currencyB ?? '0')} ${trade?.outputAmount?.currency
-            .code}`;
+              .code}`;
 
           sendNotification(notificationMessage, 'Swapped', SnackbarIconType.SWAP, SnackbarContext);
 

diff --git a/src/state/swap/hooks.tsx b/src/state/swap/hooks.tsx
@@ -14,6 +14,7 @@ import { TradeType } from 'state/routing/types';
 import { useUserSlippageToleranceWithDefault } from 'state/user/hooks';
 import { Field, selectCurrency, setRecipient, switchCurrencies, typeInput } from './actions';
 import { SwapState } from './reducer';
+import { DEFAULT_SLIPPAGE_INPUT_VALUE } from 'components/Settings/MaxSlippageSettings';
 
 export function useSwapActionHandlers(dispatch: React.Dispatch<AnyAction>): {
   onCurrencySelection: (field: Field, currency: TokenType) => void;
@@ -155,7 +156,7 @@ export function useDerivedSwapInfo(state: SwapState) {
   // // Uniswap interface recommended slippage amount
   // const autoSlippage = uniswapXAutoSlippage ?? classicAutoSlippage
   // const classicAllowedSlippage = useUserSlippageToleranceWithDefault(autoSlippage)
-  const classicAllowedSlippage = useUserSlippageToleranceWithDefault(0.5);
+  const classicAllowedSlippage = useUserSlippageToleranceWithDefault(DEFAULT_SLIPPAGE_INPUT_VALUE);
 
   // // slippage amount used to submit the trade
   // const allowedSlippage = uniswapXAutoSlippage ?? classicAllowedSlippage

diff --git a/src/state/user/hooks.tsx b/src/state/user/hooks.tsx
@@ -57,5 +57,6 @@ export function useUserSlippageTolerance(): [
  */
 export function useUserSlippageToleranceWithDefault(defaultSlippageTolerance: number): number {
     const [allowedSlippage] = useUserSlippageTolerance()
+    console.log('🚀 ~ useUserSlippageToleranceWithDefault ~ allowedSlippage:', allowedSlippage);
     return allowedSlippage === SlippageTolerance.Auto ? defaultSlippageTolerance : allowedSlippage
 }
diff --git a/src/state/user/reducer.ts b/src/state/user/reducer.ts
@@ -1,4 +1,5 @@
 import { createSlice } from '@reduxjs/toolkit';
+import { DEFAULT_SLIPPAGE_INPUT_VALUE } from 'components/Settings/MaxSlippageSettings';
 
 const currentTimestamp = () => new Date().getTime();
 
@@ -97,14 +98,14 @@ const userSlice = createSlice({
         state.userSlippageTolerance > 5000
       ) {
         // state.userSlippageTolerance = SlippageTolerance.Auto
-        state.userSlippageTolerance = 0.5;
+        state.userSlippageTolerance = DEFAULT_SLIPPAGE_INPUT_VALUE;
       } else {
         if (
           !state.userSlippageToleranceHasBeenMigratedToAuto &&
           [10, 50, 100].indexOf(state.userSlippageTolerance) !== -1
         ) {
           // state.userSlippageTolerance = SlippageTolerance.Auto
-          state.userSlippageTolerance = 0.5;
+          state.userSlippageTolerance = DEFAULT_SLIPPAGE_INPUT_VALUE;
           state.userSlippageToleranceHasBeenMigratedToAuto = true;
         }
       }