Step by step swap modal

src/components/Aggregator/hooks/useTokenApprove.ts

@@ -46,13 +46,23 @@ export const useGetAllowance = (token: `0x${string}`, spender: `0x${string}`, am
 	return { allowance, shouldRemoveApproval, refetch, isRefetching };
 };
 
-const setOverrides = (func, overrides) => {
+const setOverrides = (func, overrides, onApprove = () => {}) => {
 	if (!overrides) return func;
 
-	return () => func({ recklesslySetUnpreparedOverrides: overrides });
+	return () => {
+		onApprove();
+		return func({ recklesslySetUnpreparedOverrides: overrides });
+	};
 };
 
-export const useTokenApprove = (token: `0x${string}`, spender: `0x${string}`, amount: string) => {
+export const useTokenApprove = (
+	token: `0x${string}`,
+	spender: `0x${string}`,
+	amount: string,
+	onApprove: () => void = () => {},
+	onSuccess: () => void = () => {},
+	afterApprove: () => void = () => {}
+) => {
 	const [isConfirmingApproval, setIsConfirmingApproval] = useState(false);
 	const [isConfirmingInfiniteApproval, setIsConfirmingInfiniteApproval] = useState(false);
 	const [isConfirmingResetApproval, setIsConfirmingResetApproval] = useState(false);
@@ -97,10 +107,13 @@ export const useTokenApprove = (token: `0x${string}`, spender: `0x${string}`, am
 		...config,
 		onSuccess: (data) => {
 			setIsConfirmingApproval(true);
+			onSuccess();
+			refetch();
 
 			data
 				.wait()
 				.then(() => {
+					afterApprove();
 					refetch();
 				})
 				.catch((err) => console.log(err))
@@ -114,10 +127,13 @@ export const useTokenApprove = (token: `0x${string}`, spender: `0x${string}`, am
 		...configInfinite,
 		onSuccess: (data) => {
 			setIsConfirmingInfiniteApproval(true);
+			onSuccess();
+			refetch();
 
 			data
 				.wait()
 				.then(() => {
+					afterApprove();
 					refetch();
 				})
 				.catch((err) => console.log(err))
@@ -131,10 +147,12 @@ export const useTokenApprove = (token: `0x${string}`, spender: `0x${string}`, am
 		...configReset,
 		onSuccess: (data) => {
 			setIsConfirmingResetApproval(true);
-
+			onSuccess();
+			refetch();
 			data
 				.wait()
 				.then(() => {
+					afterApprove();
 					refetch();
 				})
 				.catch((err) => console.log(err))
@@ -155,9 +173,9 @@ export const useTokenApprove = (token: `0x${string}`, spender: `0x${string}`, am
 
 	return {
 		isApproved: false,
-		approve: setOverrides(approve, customGasLimit),
-		approveInfinite: setOverrides(approveInfinite, customGasLimit),
-		approveReset: setOverrides(approveReset, customGasLimit),
+		approve: setOverrides(approve, customGasLimit, onApprove),
+		approveInfinite: setOverrides(approveInfinite, customGasLimit, onApprove),
+		approveReset: setOverrides(approveReset, customGasLimit, onApprove),
 		isLoading: isLoading || isConfirmingApproval,
 		isConfirmingApproval,
 		isInfiniteLoading: isInfiniteLoading || isConfirmingInfiniteApproval,

src/components/Aggregator/index.tsx

@@ -62,6 +62,7 @@ import { Sandwich } from './Sandwich';
 import { ArrowBackIcon, ArrowForwardIcon, RepeatIcon, SettingsIcon } from '@chakra-ui/icons';
 import { Settings } from './Settings';
 import { formatAmount } from '~/utils/formatAmount';
+import { SwapModal } from '../SwapModal';
 
 /*
 Integrated:
@@ -118,6 +119,14 @@ enum STATES {
 	ROUTES
 }
 
+export enum SWAP_STATES {
+	SELECTING_ROUTES,
+	WAITING_FOR_APPROVAL,
+	CONFIRMING_APPROVAL,
+	WAITING_FOR_SWAP,
+	CONFIRMING_SWAP
+}
+
 const Body = styled.div`
 	display: flex;
 	flex-direction: column;
@@ -328,8 +337,10 @@ export function AggregatorContainer({ tokenList, sandwichList }) {
 	const isSmallScreen = breakpoint === 'sm' || breakpoint === 'base';
 	const toggleUi = () => setUiState((state) => (state === STATES.INPUT ? STATES.ROUTES : STATES.INPUT));
 
+	// post approval
+	const [swapState, setSwapState] = useState(SWAP_STATES.SELECTING_ROUTES);
+
 	// post swap states
-	const [txModalOpen, setTxModalOpen] = useState(false);
 	const [txUrl, setTxUrl] = useState('');
 	const confirmingTxToastRef = useRef<ToastId>();
 	const toast = useToast();
@@ -707,7 +718,10 @@ export function AggregatorContainer({ tokenList, sandwichList }) {
 	} = useTokenApprove(
 		finalSelectedFromToken?.address as `0x${string}`,
 		selectedRoute && selectedRoute.price ? selectedRoute.price.tokenApprovalAddress : null,
-		amountToApprove
+		amountToApprove,
+		() => setSwapState(SWAP_STATES.WAITING_FOR_APPROVAL),
+		() => setSwapState(SWAP_STATES.CONFIRMING_APPROVAL),
+		() => setSwapState(SWAP_STATES.WAITING_FOR_SWAP)
 	);
 
 	const isUSDTNotApprovedOnEthereum =
@@ -735,11 +749,10 @@ export function AggregatorContainer({ tokenList, sandwichList }) {
 					description: `Swap transaction using ${variables.adapter} is sent.`
 				});
 				const explorerUrl = chainOnWallet.blockExplorers.default.url;
-				setTxModalOpen(true);
+
 				txUrl = `${explorerUrl}/tx/${data.hash}`;
 				setTxUrl(txUrl);
 			} else {
-				setTxModalOpen(true);
 				txUrl = `https://explorer.cow.fi/orders/${data.id}`;
 				setTxUrl(txUrl);
 				data.waitForOrder(() => {
@@ -766,6 +779,8 @@ export function AggregatorContainer({ tokenList, sandwichList }) {
 				});
 			}
 
+			setSwapState(SWAP_STATES.CONFIRMING_SWAP);
+
 			confirmingTxToastRef.current = toast({
 				title: 'Confirming Transaction',
 				description: '',
@@ -854,6 +869,7 @@ export function AggregatorContainer({ tokenList, sandwichList }) {
 				});
 				return;
 			}
+
 			swapMutation.mutate({
 				chain: selectedChain.value,
 				from: finalSelectedFromToken.value,
@@ -1442,7 +1458,18 @@ export function AggregatorContainer({ tokenList, sandwichList }) {
 
 			{window === parent ? <FAQs /> : null}
 
-			<TransactionModal open={txModalOpen} setOpen={setTxModalOpen} link={txUrl} />
+			<SwapModal
+				txUrl={txUrl}
+				isOpen={swapState !== SWAP_STATES.SELECTING_ROUTES}
+				close={() => {
+					setTxUrl('');
+					setSwapState(SWAP_STATES.SELECTING_ROUTES);
+				}}
+				state={swapState}
+				swap={handleSwap}
+				fromToken={finalSelectedFromToken}
+				toToken={finalSelectedToToken}
+			/>
 		</Wrapper>
 	);
 }

src/components/SwapModal/index.tsx

@@ -0,0 +1,125 @@
+import { CheckIcon, EditIcon, ExternalLinkIcon, UnlockIcon } from '@chakra-ui/icons';
+import {
+	Modal,
+	ModalBody,
+	ModalCloseButton,
+	ModalContent,
+	ModalOverlay,
+	Text,
+	Spinner,
+	Button,
+	Box,
+	Link
+} from '@chakra-ui/react';
+import { IToken } from '~/types';
+import { SWAP_STATES } from '../Aggregator';
+import { IconImage } from '../Aggregator/Search';
+
+interface Props {
+	isOpen: boolean;
+	close: () => void;
+	swap: () => void;
+	fromToken: IToken;
+	toToken: IToken;
+	state: SWAP_STATES;
+	txUrl?: string;
+}
+
+export const SwapModal = ({ isOpen, close, swap, state, fromToken, toToken, txUrl }: Props) => {
+	const states = {
+		[SWAP_STATES.WAITING_FOR_APPROVAL]: (
+			<Box display={'flex'} flexDirection="column" alignItems={'center'} mt="16px">
+				<UnlockIcon w={16} h={16} color="blue.300" mb="8px" />
+				<Text fontSize={'lg'} fontWeight="bold" mt="8px">
+					Enable spending {fromToken?.symbol} on LlamaSwap
+				</Text>
+				<Text fontSize={'md'}>Proceed in your wallet</Text>
+			</Box>
+		),
+
+		[SWAP_STATES.CONFIRMING_APPROVAL]: (
+			<Box display={'flex'} flexDirection="column" alignItems={'center'} mt="16px">
+				<UnlockIcon w={16} h={16} color="green.300" mb="8px" />
+				<Text fontSize={'lg'} fontWeight="bold" mt="8px">
+					Approve submitted <Spinner color="blue.300" ml="8px" w="1rem" h="1rem" mb="-2px" />
+				</Text>
+			</Box>
+		),
+		[SWAP_STATES.WAITING_FOR_SWAP]: (
+			<>
+				<Box display={'flex'} flexDirection="column" alignItems={'center'} mt="16px">
+					<EditIcon w={16} h={16} color="blue.300" mb="8px" />
+					<Text fontSize={'lg'} fontWeight="bold" mt="8px">
+						Please confirm swap
+					</Text>
+				</Box>
+				<Button colorScheme={'messenger'} width="100%" mt="16px" onClick={() => swap()}>
+					Swap
+				</Button>
+			</>
+		),
+		[SWAP_STATES.CONFIRMING_SWAP]: (
+			<>
+				<Box display={'flex'} flexDirection="column" alignItems={'center'} mt="16px">
+					<CheckIcon w={16} h={16} color="green.300" mb="8px" />
+					<Text fontSize={'lg'} fontWeight="bold">
+						Transaction Submitted
+					</Text>
+				</Box>
+				{txUrl ? (
+					<Link
+						href={txUrl}
+						isExternal
+						fontSize={'lg'}
+						textAlign={'center'}
+						padding="6px 1rem"
+						borderRadius="0.375rem"
+						bg="#a2cdff"
+						mt="16px"
+						color="black"
+						w="100%"
+						_hover={{ textDecoration: 'none' }}
+					>
+						View on explorer <ExternalLinkIcon mx="2px" />
+					</Link>
+				) : null}
+			</>
+		)
+	};
+
+	return (
+		<Modal isCentered motionPreset="slideInBottom" closeOnOverlayClick={true} isOpen={isOpen} onClose={() => close()}>
+			<ModalOverlay />
+			<ModalContent h="280px">
+				<ModalCloseButton color="white" mt="8px" />
+
+				<ModalBody
+					display="flex"
+					gap="8px"
+					flexDir="column"
+					alignItems="center"
+					marginY="4rem"
+					color="white"
+					mt="4rem"
+					h="480px"
+				>
+					<Text display={'flex'} fontSize="lg" fontWeight={'bold'} position="absolute" top="18px">
+						Swapping {fromToken?.symbol}
+						<IconImage
+							style={{ marginLeft: '10px', height: '26px', width: '26px', marginTop: '2px', marginRight: '8px' }}
+							src={fromToken?.logoURI}
+							onError={(e) => (e.currentTarget.src = fromToken?.logoURI2 || '/placeholder.png')}
+						/>
+						to {toToken?.symbol}{' '}
+						<IconImage
+							style={{ marginLeft: '10px', height: '26px', width: '26px', marginTop: '2px' }}
+							src={toToken?.logoURI}
+							onError={(e) => (e.currentTarget.src = toToken?.logoURI2 || '/placeholder.png')}
+						/>
+					</Text>{' '}
+					{states[state]}
+				</ModalBody>
+			</ModalContent>
+		</Modal>
+	);
+};