Swap UI

src/components/Aggregator/adapters/odos/index.ts

@@ -93,7 +93,8 @@ export async function getQuote(chain: string, from: string, to: string, amount:
 		amountReturned: swapData.outputTokens[0].amount,
 		estimatedGas: swapData.transaction.gas <= 0 ? swapData.gasEstimate : swapData.transaction.gas,
 		rawQuote: swapData,
-		tokenApprovalAddress: routers[chain]
+		tokenApprovalAddress: routers[chain],
+		logo: 'https://icons.llamao.fi/icons/protocols/odos?w=48&q=75'
 	};
 }
 
@@ -120,4 +121,4 @@ export const getTx = ({ rawQuote }) => ({
 	to: rawQuote.transaction.to,
 	data: rawQuote.transaction.data,
 	value: rawQuote.transaction.value
-});
+});

src/components/Aggregator/index.tsx

@@ -974,7 +974,7 @@ export function AggregatorContainer() {
 			signatureForSwapMutation.reset();
 		},
 		onError: (err: { reason: string; code: string }, variables) => {
-			console.log(err)
+			console.log(err);
 			if (err.code !== 'ACTION_REJECTED' || err.code.toString() === '-32603') {
 				toast(formatErrorToast(err, false));
 
@@ -1051,7 +1051,7 @@ export function AggregatorContainer() {
 				approvalData: gaslessApprovalMutation?.data ?? {},
 				eip5792: isEip5792 ? { shouldRemoveApproval: shouldRemoveApproval ? true : false, isTokenApproved } : null,
 				signature: signatureForSwapMutation?.data,
-				isSmartContractWallet: (bytecode && bytecode !== '0x') ? true : false
+				isSmartContractWallet: bytecode && bytecode !== '0x' ? true : false
 			});
 		}
 	};

src/components/RefreshIcon/index.tsx

@@ -9,7 +9,7 @@ export const RefreshIcon = ({ refetch, lastFetched }: { refetch: () => void; las
 
 	return (
 		<Tooltip2
-			content={`Displayed data will auto-refresh after ${secondsToRefresh} seconds. Click here to update manually`}
+			content={`Displayed quotes will auto-refresh after ${secondsToRefresh} seconds. Click here to update now`}
 		>
 			<RepeatIcon pos="absolute" w="16px	" h="16px" mt="4px" ml="4px" />
 			<CircularProgress

src/components/SwapRoute/index.tsx

@@ -1,10 +1,11 @@
 import styled from 'styled-components';
 import Tooltip from '~/components/Tooltip';
 import { useTokenApprove } from '../Aggregator/hooks';
-import { Flex, Skeleton, Text } from '@chakra-ui/react';
+import { Badge, Flex, Skeleton, Text } from '@chakra-ui/react';
 import { AlertCircle, Gift, Unlock, ZapOff } from 'react-feather';
 import { GasIcon } from '../Icons';
 import { formattedNum } from '~/utils';
+import Image from 'next/image';
 
 interface IToken {
 	address: string;
@@ -49,6 +50,7 @@ interface IRoute {
 
 const Route = ({
 	name,
+	logo,
 	price,
 	toToken,
 	setRoute,
@@ -83,15 +85,16 @@ const Route = ({
 			? `$${formattedNum(netOut.toFixed(1), false, true)}`
 			: null;
 	const isGasNotKnown = gasUsd === 'Unknown' || Number.isNaN(Number(gasUsd));
-	const txGas = isGasNotKnown ? '' : '$' + formattedNum(gasUsd);
+	const txGas = isGasNotKnown ? '' : '$' + parseFloat(formattedNum(gasUsd)).toFixed(2);
 
 	const inputAmount = amountOut !== '0' && fromToken?.decimals && amountFrom && amountFrom !== '0' ? amountIn : null;
+	const best = index === 0;
 	return (
 		<RouteWrapper
 			onClick={setRoute}
-			className={selected ? 'RouteWrapper is-selected' : 'RouteWrapper'}
+			className={selected ? 'RouteWrapper is-selected' : best ? 'RouteWrapper is-best' : 'RouteWrapper'}
 			selected={selected}
-			best={index === 0}
+			best={best}
 		>
 			<RouteRow>
 				{inputAmount ? (
@@ -115,10 +118,10 @@ const Route = ({
 				)}
 				<Text fontWeight={500} fontSize={16} color={'#FAFAFA'}>
 					<Flex as="span" alignItems="center" gap="8px">
-						{index === 0 ? (
-							<Text as="span" color="#059669" fontSize={14} fontWeight={700}>
+						{best ? (
+							<Badge size="xs" variant="solid" colorScheme="green">
 								BEST
-							</Text>
+							</Badge>
 						) : Number.isFinite(lossPercent) ? (
 							<Text as="span" color="red.300" fontSize={12}>
 								-{Math.abs(100 - lossPercent * 100).toFixed(2)}%
@@ -187,19 +190,24 @@ const Route = ({
 						)}
 						<Text display="flex" gap="3px">
 							via
-							{isApproved ? (
-								<Tooltip content="Token is approved for this aggregator.">
-									<Unlock size={14} color="#059669" />
-								</Tooltip>
-							) : (
-								' '
+							{logo && (
+								<div style={{ display: 'flex', alignItems: 'center' }}>
+									<Image src={logo} width={14} height={14} alt={name} style={{ height: 'auto', width: '14px' }} />
+								</div>
 							)}
 							{name}
 							{price.isMEVSafe === true ? (
 								<Tooltip content="This aggregator protects from MEV.">
 									<ZapOff size={14} color="#059669" />
 								</Tooltip>
 							) : null}
+							{isApproved ? (
+								<Tooltip content="Token is approved for this aggregator.">
+									<Unlock size={14} color="#059669" />
+								</Tooltip>
+							) : (
+								' '
+							)}
 						</Text>
 					</Text>
 				</Text>
@@ -233,6 +241,11 @@ const RouteWrapper = styled.div<{ selected?: boolean; best?: boolean }>`
 		background-color: rgb(3 11 23);
 	}
 
+	&.is-best {
+		border-color: rgb(56 189 248);
+		background-color: rgb(4 17 32);
+	}
+
 	background-color: ${({ selected }) => (selected ? ' #161616;' : '#2d3039;')};
 	border: 1px solid #373944;
 	padding: 7px 15px 9px;

src/queries/useGetRoutes.tsx

@@ -56,6 +56,7 @@ export const REFETCH_INTERVAL = 25_000;
 const defaultRouteResponse = ({ adapter, amount }) => ({
 	price: null,
 	name: adapter.name,
+	logo: '',
 	airdrop: !adapter.token,
 	fromAmount: amount,
 	txData: '',
@@ -109,6 +110,7 @@ export async function getAdapterRoutes({ adapter, chain, from, to, amount, extra
 			txData,
 			tx: adapter?.getTx?.(price),
 			name: adapter.name,
+			logo: price.logo,
 			airdrop: !adapter.token,
 			fromAmount: amountIn,
 			isOutputAvailable: adapter.isOutputAvailable,

src/utils/index.tsx

@@ -2,7 +2,7 @@ export const capitalizeFirstLetter = (word) => word.charAt(0).toUpperCase() + wo
 
 const ICONS_CDN = 'https://icons.llamao.fi/icons';
 
-export function protoclIconUrl(protocol) {
+export function protocolIconUrl(protocol) {
 	return `${ICONS_CDN}/protocols/${protocol}?w=48&h=48`;
 }
 
@@ -26,7 +26,7 @@ export const formattedNum = (number, symbol = false, acceptNegatives = false) =>
 		currencySymbol = symbol;
 	}
 	if (!number || number === '' || Number.isNaN(Number(number))) {
-		return symbol ? `${currencySymbol}0` : 0;
+		return symbol ? `${currencySymbol}0` : '0';
 	}
 	let formattedNum = String();
 	let num = parseFloat(number);