diff --git a/pages/liquidity/index.tsx b/pages/liquidity/index.tsx index ad841e5b..dcf4c82a 100644 --- 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() {
Your liquidity - +
List of your liquidity positions diff --git a/src/components/Liquidity/Add/AddLiquidityComponent.tsx b/src/components/Liquidity/Add/AddLiquidityComponent.tsx index 96f55667..cd1bfa46 100644 --- 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 index 0c5cd3f6..2fca843c 100644 --- 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({ {children} - + diff --git a/src/components/Liquidity/Remove/RemoveLiquidityComponent.tsx b/src/components/Liquidity/Remove/RemoveLiquidityComponent.tsx index 591ad4dd..0f0eaabb 100644 --- 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} {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} {isLoadingPairInfo ? ( @@ -438,7 +435,7 @@ export default function RemoveLiquidityComponent() {
- Slippage Tolerance 0.5% + Slippage Tolerance {allowedSlippage}% {!sorobanContext.address ? ( setConnectWalletModalOpen(true)}>{error} ) : ( diff --git a/src/components/Settings/MaxSlippageSettings/index.tsx b/src/components/Settings/MaxSlippageSettings/index.tsx index 77facf7f..54314a22 100644 --- 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
) : ( -
Your transaction may be frontrun and result in an unfavorable trade.
+
Your transaction may be frontrun and result in an unfavorable trade.
)} diff --git a/src/components/Settings/MenuButton/index.tsx b/src/components/Settings/MenuButton/index.tsx index 39a3f5e5..32eb6aef 100644 --- 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 ( ({ marginBottom: 10, color: theme.palette.secondary.main, @@ -42,7 +43,7 @@ export default function SwapHeader({ )} - + ); diff --git a/src/helpers/horizon/getHorizonPath.ts b/src/helpers/horizon/getHorizonPath.ts index f4a667a6..0a8af5af 100644 --- 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]; @@ -213,7 +213,10 @@ export function getHorizonBestPath( .call().then((res) => res.records); return send?.then((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 index 015d80c8..fa35fee0 100644 --- 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 index 10077c6f..4257b765 100644 --- 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): { 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/reducer.ts b/src/state/user/reducer.ts index 06b3e81d..7d2934b5 100644 --- 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; } }