auto slippage

src/components/Aggregator/ConnectButton.tsx

@@ -7,6 +7,7 @@ const Wrapper = styled.div`
 	right: 0px;
 	z-index: 100;
 	display: flex;
+	align-items: center;
 	gap: 8px;
 `;
 

src/components/Aggregator/index.tsx

@@ -70,6 +70,7 @@ import { ArrowBackIcon, ArrowForwardIcon, RepeatIcon, SettingsIcon } from '@chak
 import { Settings } from './Settings';
 import { formatAmount } from '~/utils/formatAmount';
 import { RefreshIcon } from '../RefreshIcon';
+import { useGetAutoSlippage } from '~/queries/useGetAutoSlippage';
 
 /*
 Integrated:
@@ -320,10 +321,10 @@ export function AggregatorContainer({ tokenList, sandwichList }) {
 	const [isPrivacyEnabled, setIsPrivacyEnabled] = useLocalStorage('llamaswap-isprivacyenabled', false);
 	const [[amount, amountOut], setAmount] = useState<[number | string, number | string]>(['10', '']);
 
-	const [slippage, setSlippage] = useLocalStorage('llamaswap-slippage', '0.5');
+	const [slippage, setSlippage] = useLocalStorage('llamaswap-slippage', 'auto');
 	const [lastOutputValue, setLastOutputValue] = useState(null);
 	const [disabledAdapters, setDisabledAdapters] = useLocalStorage('llamaswap-disabledadapters', []);
-	const [isDegenModeEnabled, _] = useLocalStorage('llamaswap-degenmode', false);
+	const [isDegenModeEnabled] = useLocalStorage('llamaswap-degenmode', false);
 	const [isSettingsModalOpen, setSettingsModalOpen] = useState(false);
 
 	// mobile states
@@ -409,6 +410,25 @@ export function AggregatorContainer({ tokenList, sandwichList }) {
 		return { finalSelectedFromToken, finalSelectedToToken };
 	}, [fromToken2, selectedChain?.id, toToken2, selectedFromToken, selectedToToken]);
 
+	const { data: autoSlippage, isLoading: fetchingAutoSlippage } = useGetAutoSlippage({
+		chainId: selectedChain?.chainId,
+		fromToken: finalSelectedFromToken?.value,
+		toToken: finalSelectedToToken?.value,
+		disabled: slippage !== 'auto',
+		onError: () => {
+			setSlippage('0.5');
+		}
+	});
+
+	useEffect(() => {
+		// auto slippage is only supported on ethereum
+		if (isConnected && chainOnWallet?.id !== 1 && slippage === 'auto') {
+			setSlippage('0.5');
+		}
+	}, [isConnected, chainOnWallet, slippage]);
+
+	const finalSlippage = autoSlippage ?? slippage;
+
 	// format input amount of selected from token
 	const amountWithDecimals = BigNumber(debouncedAmount && debouncedAmount !== '' ? debouncedAmount : '0')
 		.times(BigNumber(10).pow(finalSelectedFromToken?.decimals || 18))
@@ -475,10 +495,11 @@ export function AggregatorContainer({ tokenList, sandwichList }) {
 			amount: debouncedAmount,
 			fromToken: finalSelectedFromToken,
 			toToken: finalSelectedToToken,
-			slippage,
+			slippage: finalSlippage,
 			isPrivacyEnabled,
 			amountOut: amountOutWithDecimals
-		}
+		},
+		disabled: fetchingAutoSlippage || finalSlippage === 'auto'
 	});
 
 	const { data: gasData, isLoading: isGasDataLoading } = useEstimateGas({
@@ -678,7 +699,7 @@ export function AggregatorContainer({ tokenList, sandwichList }) {
 			? +selectedRoute?.fromAmount > +balance.data.value
 			: false;
 
-	const slippageIsWorng = Number.isNaN(Number(slippage)) || slippage === '';
+	const slippageIsWrong = finalSlippage === '' || Number.isNaN(Number(finalSlippage));
 
 	const forceRefreshTokenBalance = () => {
 		if (chainOnWallet && address) {
@@ -690,9 +711,9 @@ export function AggregatorContainer({ tokenList, sandwichList }) {
 
 	// approve/swap tokens
 	const amountToApprove =
-		amountOut && amountOut !== ''
+		!!finalSlippage && amountOut && amountOut !== ''
 			? BigNumber(selectedRoute?.fromAmount)
-					.times(100 + Number(slippage) * 2)
+					.times(100 + Number(finalSlippage) * 2)
 					.div(100)
 					.toFixed(0)
 			: selectedRoute?.fromAmount;
@@ -800,7 +821,7 @@ export function AggregatorContainer({ tokenList, sandwichList }) {
 					amount: String(variables.amountIn),
 					amountUsd: +fromTokenPrice * +variables.amountIn || 0,
 					errorData: data,
-					slippage,
+					slippage: finalSlippage,
 					routePlace: String(variables?.index),
 					route: variables.route
 				});
@@ -838,7 +859,7 @@ export function AggregatorContainer({ tokenList, sandwichList }) {
 						amount: String(variables.amountIn),
 						amountUsd: +fromTokenPrice * +variables.amountIn || 0,
 						errorData: {},
-						slippage,
+						slippage: finalSlippage,
 						routePlace: String(variables?.index),
 						route: variables.route
 					});
@@ -890,7 +911,7 @@ export function AggregatorContainer({ tokenList, sandwichList }) {
 							amount: String(variables.amountIn),
 							amountUsd: +fromTokenPrice * +variables.amountIn || 0,
 							errorData: {},
-							slippage,
+							slippage: finalSlippage,
 							routePlace: String(variables?.index),
 							route: variables.route,
 							reportedOutput: Number(variables.amount) || 0,
@@ -915,7 +936,7 @@ export function AggregatorContainer({ tokenList, sandwichList }) {
 					amount: String(variables.amountIn),
 					amountUsd: +fromTokenPrice * +variables.amountIn || 0,
 					errorData: err,
-					slippage,
+					slippage: finalSlippage,
 					routePlace: String(variables?.index),
 					route: variables.route
 				});
@@ -924,7 +945,7 @@ export function AggregatorContainer({ tokenList, sandwichList }) {
 	});
 
 	const handleSwap = () => {
-		if (selectedRoute && selectedRoute.price && !slippageIsWorng) {
+		if (selectedRoute && selectedRoute.price && !slippageIsWrong) {
 			if (hasMaxPriceImpact && !isDegenModeEnabled) {
 				toast({
 					title: 'Price impact is too high!',
@@ -939,7 +960,7 @@ export function AggregatorContainer({ tokenList, sandwichList }) {
 				to: finalSelectedToToken.value,
 				signer,
 				signTypedDataAsync,
-				slippage,
+				slippage: finalSlippage,
 				adapter: selectedRoute.name,
 				rawQuote: selectedRoute.price.rawQuote,
 				tokens: { fromToken: finalSelectedFromToken, toToken: finalSelectedToToken },
@@ -979,7 +1000,9 @@ export function AggregatorContainer({ tokenList, sandwichList }) {
 	const warnings = [
 		aggregator === 'CowSwap' ? (
 			<>
-				{finalSelectedFromToken.value === ethers.constants.AddressZero && Number(slippage) < 2 ? (
+				{!!finalSlippage &&
+				finalSelectedFromToken.value === ethers.constants.AddressZero &&
+				Number(finalSlippage) < 2 ? (
 					<Alert status="warning" borderRadius="0.375rem" py="8px" key="cow1">
 						<AlertIcon />
 						Swaps from {finalSelectedFromToken.symbol} on CowSwap need to have slippage higher than 2%.
@@ -1141,10 +1164,11 @@ export function AggregatorContainer({ tokenList, sandwichList }) {
 						setSlippage={setSlippage}
 						fromToken={finalSelectedFromToken?.symbol}
 						toToken={finalSelectedToToken?.symbol}
+						finalSlippage={finalSlippage}
 					/>
 
 					<PriceImpact
-						isLoading={isLoading || fetchingTokenPrices}
+						isLoading={isLoading || fetchingTokenPrices || fetchingAutoSlippage}
 						fromTokenPrice={fromTokenPrice}
 						fromToken={finalSelectedFromToken}
 						toTokenPrice={toTokenPrice}
@@ -1154,7 +1178,7 @@ export function AggregatorContainer({ tokenList, sandwichList }) {
 						}
 						selectedRoutesPriceImpact={selectedRoutesPriceImpact}
 						amount={selectedRoute?.amountIn}
-						slippage={slippage}
+						slippage={finalSlippage}
 						isPriceImpactNotKnown={isPriceImpactNotKnown}
 					/>
 					<Box display={['none', 'none', 'flex', 'flex']} flexDirection="column" gap="4px">
@@ -1263,7 +1287,7 @@ export function AggregatorContainer({ tokenList, sandwichList }) {
 														!(finalSelectedFromToken && finalSelectedToToken) ||
 														insufficientBalance ||
 														!selectedRoute ||
-														slippageIsWorng ||
+														slippageIsWrong ||
 														!isAmountSynced ||
 														isApproveInfiniteLoading
 													}
@@ -1272,7 +1296,7 @@ export function AggregatorContainer({ tokenList, sandwichList }) {
 														? 'Select Aggregator'
 														: isApproved
 														? `Swap via ${selectedRoute.name}`
-														: slippageIsWorng
+														: slippageIsWrong
 														? 'Set Slippage'
 														: 'Approve'}
 												</Button>
@@ -1396,6 +1420,8 @@ export function AggregatorContainer({ tokenList, sandwichList }) {
 					finalSelectedToToken &&
 					!(disabledAdapters.length === adaptersNames.length) ? (
 						<Loader />
+					) : fetchingAutoSlippage ? (
+						<Loader />
 					) : (!debouncedAmount && !debouncedAmountOut) ||
 					  !finalSelectedFromToken ||
 					  !finalSelectedToToken ||
@@ -1522,15 +1548,15 @@ export function AggregatorContainer({ tokenList, sandwichList }) {
 																	isApproveLoading ||
 																	isApproveResetLoading ||
 																	!selectedRoute ||
-																	slippageIsWorng ||
+																	slippageIsWrong ||
 																	!isAmountSynced
 																}
 															>
 																{!selectedRoute
 																	? 'Select Aggregator'
 																	: isApproved
 																	? `Swap via ${selectedRoute?.name}`
-																	: slippageIsWorng
+																	: slippageIsWrong
 																	? 'Set Slippage'
 																	: 'Approve'}
 															</Button>

src/components/HistoryModal/index.tsx

@@ -98,8 +98,7 @@ function HistoryModal({ tokensUrlMap, tokensSymbolsMap }) {
 			<Button
 				onClick={onOpen}
 				borderRadius="12px"
-				height="36px"
-				mt="2px"
+				height="40px"
 				colorScheme={'twitter'}
 				display={{ base: 'none', sm: 'none', lg: 'block', md: 'block' }}
 			>

src/components/Slippage/index.tsx

@@ -25,56 +25,63 @@ const stablecoins = [
 	'PAX'
 ];
 
-export function Slippage({ slippage, setSlippage, fromToken, toToken }) {
-	if (Number.isNaN(slippage)) {
-		throw new Error('Wrong slippage!');
-	}
+export function Slippage({ slippage, setSlippage, fromToken, toToken, finalSlippage }) {
+	const warnings =
+		slippage === 'auto'
+			? []
+			: [
+					!!slippage && +slippage > 1 ? (
+						<Alert status="warning" borderRadius="0.375rem" py="8px">
+							<AlertIcon />
+							High slippage! You might get sandwiched with a slippage of {slippage}%
+						</Alert>
+					) : null,
+					!!slippage && +slippage > 0.05 && stablecoins.includes(fromToken) && stablecoins.includes(toToken) ? (
+						<Alert status="warning" borderRadius="0.375rem" py="8px" mt="2">
+							<AlertIcon />
+							You are trading stablecoins but your slippage is very high, we recommend setting it to 0.05% or lower
+						</Alert>
+					) : null,
+					!!slippage && (!stablecoins.includes(fromToken) || !stablecoins.includes(toToken)) && +slippage < 0.05 ? (
+						<Alert status="warning" borderRadius="0.375rem" py="8px" mt="2">
+							<AlertIcon />
+							Slippage is low, tx is likely to revert
+						</Alert>
+					) : null
+			  ].filter(Boolean);
 
-	const warnings = [
-		!!slippage && slippage > 1 ? (
-			<Alert status="warning" borderRadius="0.375rem" py="8px">
-				<AlertIcon />
-				High slippage! You might get sandwiched with a slippage of {slippage}%
-			</Alert>
-		) : null,
-		!!slippage && slippage > 0.05 && stablecoins.includes(fromToken) && stablecoins.includes(toToken) ? (
-			<Alert status="warning" borderRadius="0.375rem" py="8px" mt="2">
-				<AlertIcon />
-				You are trading stablecoins but your slippage is very high, we recommend setting it to 0.05% or lower
-			</Alert>
-		) : null,
-		!!slippage && (!stablecoins.includes(fromToken) || !stablecoins.includes(toToken)) && slippage < 0.05 ? (
-			<Alert status="warning" borderRadius="0.375rem" py="8px" mt="2">
-				<AlertIcon />
-				Slippage is low, tx is likely to revert
-			</Alert>
-		) : null
-	].filter(Boolean);
 	return (
 		<Box display="flex" flexDir="column" marginX="4px">
 			<Box display={['none', 'none', 'block', 'block']}>{warnings}</Box>
 			<Text fontWeight="400" display="flex" justifyContent="space-between" alignItems="center" fontSize="0.875rem">
-				Swap Slippage: {slippage && !Number.isNaN(Number(slippage)) ? Number(slippage) + '%' : ''}
+				Swap Slippage:{' '}
+				{!!slippage && !Number.isNaN(Number(slippage))
+					? `${slippage}%`
+					: slippage === 'auto'
+					? `Auto` + (!!finalSlippage && !Number.isNaN(Number(finalSlippage)) ? ` (${finalSlippage}%)` : '')
+					: ''}
 			</Text>
 			<Box display="flex" gap="6px" flexWrap="wrap" width="100%">
-				{['0.1', '0.5', '1'].map((slippage) => (
+				{['auto', '0.1', '0.5', '1'].map((slpg) => (
 					<Button
 						fontSize="0.875rem"
 						fontWeight="500"
 						p="8px"
-						bg="#38393e"
+						bg={slpg === slippage ? '#000000' : '#38393e'}
 						height="2rem"
 						onClick={() => {
-							setSlippage(slippage);
+							setSlippage(slpg);
 						}}
-						key={'slippage-btn' + slippage}
+						border={'1px solid'}
+						borderColor={slpg === slippage ? '#1f72e5' : '#38393e'}
+						key={'slippage-btn' + slpg}
 					>
-						{slippage}%
+						{slpg === 'auto' ? 'Auto' : `${slpg}%`}
 					</Button>
 				))}
 				<Box pos="relative" isolation="isolate">
 					<input
-						value={slippage}
+						value={slippage === 'auto' ? '' : slippage}
 						type="text"
 						style={{
 							width: '100px',
@@ -84,8 +91,8 @@ export function Slippage({ slippage, setSlippage, fromToken, toToken }) {
 							marginLeft: 'auto',
 							borderRadius: '0.375rem',
 							fontSize: '0.875rem',
-							borderColor: warnings.length ? 'rgb(224, 148, 17)' : undefined,
-							borderWidth: warnings.length ? '1px' : undefined
+							borderColor: warnings.length ? 'rgb(224, 148, 17)' : 'rgba(0,0,0,.4)',
+							borderWidth: '1px'
 						}}
 						placeholder="Custom"
 						onChange={(val) => {

src/queries/useGetAutoSlippage.tsx

@@ -0,0 +1,43 @@
+import { useQuery } from '@tanstack/react-query';
+import { getAddress } from 'ethers/lib/utils.js';
+
+interface IGetAutoSlippage {
+	fromToken: string;
+	toToken: string;
+	chainId: number;
+	disabled: boolean;
+	onError?: () => void;
+}
+
+export async function getAutoSlippage({ fromToken, toToken, chainId, disabled }: IGetAutoSlippage) {
+	if (chainId !== 1 || disabled || !fromToken || !toToken) {
+		return null;
+	}
+
+	const data = await fetch(`https://slippage.llama.fi/inference`, {
+		method: 'POST',
+		headers: {
+			'Content-Type': 'application/json'
+		},
+		body: JSON.stringify({ from_address: getAddress(fromToken), to_address: getAddress(toToken) })
+	}).then((res) => res.json());
+
+	if (data.error) {
+		throw new Error(data.error);
+	}
+
+	return data.predictedSlippage;
+}
+
+export function useGetAutoSlippage({ fromToken, toToken, chainId, disabled, onError }: IGetAutoSlippage) {
+	return useQuery(
+		['auto-slippage', fromToken, toToken, chainId, disabled],
+		() => getAutoSlippage({ fromToken, toToken, chainId, disabled }),
+		{
+			refetchOnWindowFocus: false,
+			refetchIntervalInBackground: false,
+			retry: false,
+			onError
+		}
+	);
+}