From bd9bb93f1d45e052cd311d46d7d6213cc660b941 Mon Sep 17 00:00:00 2001
From: mintdart <96025197+mintdart@users.noreply.github.com>
Date: Thu, 12 Dec 2024 15:52:09 -0600
Subject: [PATCH 1/5] update butttons

---
 .../Aggregator/hooks/useTokenApprove.ts       |   4 +-
 src/components/Aggregator/index.tsx           | 272 ++++++++++--------
 2 files changed, 153 insertions(+), 123 deletions(-)

diff --git a/src/components/Aggregator/hooks/useTokenApprove.ts b/src/components/Aggregator/hooks/useTokenApprove.ts
index e65ebbe0..f7f5f3d0 100644
--- a/src/components/Aggregator/hooks/useTokenApprove.ts
+++ b/src/components/Aggregator/hooks/useTokenApprove.ts
@@ -235,11 +235,9 @@ export const useTokenApprove = ({
 		approve,
 		approveInfinite,
 		approveReset,
-		isLoading: isFetchingAllowance || isLoading,
+		isFetchingAllowance,
 		isConfirmingApproval: isLoading,
-		isInfiniteLoading: isInfiniteLoading,
 		isConfirmingInfiniteApproval: isInfiniteLoading,
-		isResetLoading: isResetLoading,
 		isConfirmingResetApproval: isResetLoading,
 		allowance,
 		shouldRemoveApproval,
diff --git a/src/components/Aggregator/index.tsx b/src/components/Aggregator/index.tsx
index 3098cd66..774b10ab 100644
--- a/src/components/Aggregator/index.tsx
+++ b/src/components/Aggregator/index.tsx
@@ -7,7 +7,6 @@ import { ArrowDown } from 'react-feather';
 import styled from 'styled-components';
 import {
 	useToast,
-	Button,
 	FormControl,
 	FormLabel,
 	Switch,
@@ -293,6 +292,24 @@ const ConnectButtonWrapper = styled.div`
 	}
 `;
 
+const Button = styled.button`
+	background: #a2cdff;
+	color: #1a202c;
+	border-radius: 6px;
+	font-size: 16px;
+	font-weight: 600;
+	display: flex;
+	gap: 4px;
+	align-items: center;
+	justify-content: center;
+	padding: 8px;
+
+	&:disabled {
+		cursor: not-allowed;
+		opacity: 0.6;
+	}
+`;
+
 export const SwapInputArrow = (props) => (
 	<IconButton
 		icon={<ArrowDown size={14} />}
@@ -726,9 +743,7 @@ export function AggregatorContainer({ tokenList }) {
 		approve,
 		approveInfinite,
 		approveReset,
-		isLoading: isApproveLoading,
-		isInfiniteLoading: isApproveInfiniteLoading,
-		isResetLoading: isApproveResetLoading,
+		isFetchingAllowance,
 		isConfirmingApproval,
 		isConfirmingInfiniteApproval,
 		isConfirmingResetApproval,
@@ -1155,12 +1170,9 @@ export function AggregatorContainer({ tokenList }) {
 
 					<SwapWrapper>
 						{!isConnected ? (
-							<Button colorScheme={'messenger'} onClick={openConnectModal}>
-								Connect Wallet
-							</Button>
+							<Button onClick={openConnectModal}>Connect Wallet</Button>
 						) : !isValidSelectedChain ? (
 							<Button
-								colorScheme={'messenger'}
 								onClick={() => {
 									if (selectedChain) {
 										switchChain({ chainId: selectedChain.id });
@@ -1177,17 +1189,11 @@ export function AggregatorContainer({ tokenList }) {
 								Switch Network
 							</Button>
 						) : insufficientBalance ? (
-							<Button colorScheme={'messenger'} aria-disabled>
-								Insufficient Balance
-							</Button>
+							<Button disabled>Insufficient Balance</Button>
 						) : !selectedRoute && isSmallScreen && finalSelectedFromToken && finalSelectedToToken ? (
-							<Button colorScheme={'messenger'} onClick={() => setUiState(STATES.ROUTES)}>
-								Select Aggregator
-							</Button>
+							<Button onClick={() => setUiState(STATES.ROUTES)}>Select Aggregator</Button>
 						) : hasMaxPriceImpact && !isDegenModeEnabled ? (
-							<Button colorScheme={'messenger'} aria-disabled>
-								Price impact is too large
-							</Button>
+							<Button disabled>Price impact is too large</Button>
 						) : (
 							<>
 								{router && address && (
@@ -1206,15 +1212,19 @@ export function AggregatorContainer({ tokenList }) {
 														need to reset your approval and approve again`}
 													</Text>
 													<Button
-														isLoading={isApproveResetLoading}
-														loadingText={isConfirmingResetApproval ? 'Confirming' : 'Preparing transaction'}
-														colorScheme={'messenger'}
 														onClick={() => {
 															if (approveReset) approveReset();
 														}}
-														aria-disabled={isApproveResetLoading || !selectedRoute}
+														disabled={isConfirmingResetApproval || !selectedRoute}
 													>
-														Reset Approval
+														{isConfirmingResetApproval ? (
+															<>
+																<Spinner />
+																<span>Confirming</span>
+															</>
+														) : (
+															'Reset Approval'
+														)}
 													</Button>
 												</Flex>
 											)}
@@ -1228,18 +1238,6 @@ export function AggregatorContainer({ tokenList }) {
 												/>
 											) : (
 												<Button
-													isLoading={
-														swapMutation.isPending ||
-														isApproveLoading ||
-														(gaslessApprovalMutation.isPending && !gaslessApprovalMutation.variables.isInfiniteApproval)
-													}
-													loadingText={
-														isConfirmingApproval ||
-														(gaslessApprovalMutation.isPending && !gaslessApprovalMutation.variables.isInfiniteApproval)
-															? 'Confirming'
-															: 'Preparing transaction'
-													}
-													colorScheme={'messenger'}
 													onClick={() => {
 														//scroll Routes into view
 														!selectedRoute && routesRef.current?.scrollIntoView({ behavior: 'smooth' });
@@ -1261,43 +1259,47 @@ export function AggregatorContainer({ tokenList }) {
 
 														if (isApproved) handleSwap();
 													}}
-													aria-disabled={
+													disabled={
 														isUSDTNotApprovedOnEthereum ||
 														swapMutation.isPending ||
 														gaslessApprovalMutation.isPending ||
-														isApproveLoading ||
-														isApproveResetLoading ||
+														isConfirmingApproval ||
+														isConfirmingResetApproval ||
 														!(finalSelectedFromToken && finalSelectedToToken) ||
 														insufficientBalance ||
 														!selectedRoute ||
 														slippageIsWorng ||
 														!isAmountSynced ||
-														isApproveInfiniteLoading
+														isConfirmingInfiniteApproval ||
+														isFetchingAllowance
 													}
 												>
-													{!selectedRoute
-														? 'Select Aggregator'
-														: isApproved
-															? `Swap via ${selectedRoute.name}`
-															: slippageIsWorng
-																? 'Set Slippage'
-																: 'Approve'}
+													{!selectedRoute ? (
+														'Select Aggregator'
+													) : isConfirmingApproval ||
+													  (gaslessApprovalMutation.isPending &&
+															!gaslessApprovalMutation.variables.isInfiniteApproval) ? (
+														<>
+															<Spinner />
+															<span>Confirming</span>
+														</>
+													) : swapMutation.isPending ? (
+														<>
+															<Spinner />
+															<span>Preparing transaction</span>
+														</>
+													) : isApproved ? (
+														`Swap via ${selectedRoute?.name}`
+													) : slippageIsWorng ? (
+														'Set Slippage'
+													) : (
+														'Approve'
+													)}
 												</Button>
 											)}
 
 											{!isApproved && selectedRoute && inifiniteApprovalAllowed.includes(selectedRoute.name) && (
 												<Button
-													colorScheme={'messenger'}
-													loadingText={
-														isConfirmingInfiniteApproval ||
-														(gaslessApprovalMutation.isPending && gaslessApprovalMutation.variables.isInfiniteApproval)
-															? 'Confirming'
-															: 'Preparing transaction'
-													}
-													isLoading={
-														isApproveInfiniteLoading ||
-														(gaslessApprovalMutation.isPending && gaslessApprovalMutation.variables.isInfiniteApproval)
-													}
 													onClick={() => {
 														if (!isApproved && isGaslessApproval) {
 															handleGaslessApproval({ isInfiniteApproval: true });
@@ -1306,24 +1308,33 @@ export function AggregatorContainer({ tokenList }) {
 
 														if (approveInfinite) approveInfinite();
 													}}
-													aria-disabled={
+													disabled={
 														isUSDTNotApprovedOnEthereum ||
 														swapMutation.isPending ||
 														gaslessApprovalMutation.isPending ||
-														isApproveLoading ||
-														isApproveResetLoading ||
-														isApproveInfiniteLoading ||
+														isConfirmingApproval ||
+														isConfirmingResetApproval ||
+														isConfirmingInfiniteApproval ||
 														!selectedRoute
 													}
 												>
-													{'Approve Infinite'}
+													{isConfirmingInfiniteApproval ||
+													(gaslessApprovalMutation.isPending &&
+														gaslessApprovalMutation.variables.isInfiniteApproval) ? (
+														<>
+															<Spinner />
+															<span>Confirming</span>
+														</>
+													) : (
+														'Approve Infinite'
+													)}
 												</Button>
 											)}
 
 											{isSmallScreen && warnings?.length ? (
 												<Popover>
 													<PopoverTrigger>
-														<Button backgroundColor={'rgb(224, 148, 17)'} maxWidth="100px">
+														<Button style={{ background: 'rgb(224, 148, 17)', maxWidth: '100px' }}>
 															{warnings.length} Warning{warnings.length === 1 ? '' : 's'}
 														</Button>
 													</PopoverTrigger>
@@ -1333,12 +1344,7 @@ export function AggregatorContainer({ tokenList }) {
 
 											{!isApproved && selectedRoute ? (
 												<Tooltip2 content="Already approved? Click to refetch token allowance">
-													<Button
-														colorScheme={'messenger'}
-														width={'24px'}
-														padding={'4px'}
-														onClick={() => refetchTokenAllowance?.()}
-													>
+													<Button style={{height: "100%"}} onClick={() => refetchTokenAllowance?.()}>
 														<RepeatIcon w="16px	" h="16px" />
 													</Button>
 												</Tooltip2>
@@ -1449,7 +1455,6 @@ export function AggregatorContainer({ tokenList }) {
 										</ConnectButtonWrapper>
 									) : !isValidSelectedChain ? (
 										<Button
-											colorScheme={'messenger'}
 											onClick={() => {
 												if (selectedChain) {
 													switchChain({ chainId: selectedChain.id });
@@ -1483,15 +1488,19 @@ export function AggregatorContainer({ tokenList }) {
 																		need to reset your approval and approve again`}
 																</Text>
 																<Button
-																	isLoading={isApproveResetLoading}
-																	loadingText={isConfirmingResetApproval ? 'Confirming' : 'Preparing transaction'}
-																	colorScheme={'messenger'}
 																	onClick={() => {
 																		if (approveReset) approveReset();
 																	}}
-																	aria-disabled={isApproveResetLoading || !selectedRoute}
+																	disabled={isConfirmingResetApproval || !selectedRoute}
 																>
-																	Reset Approval
+																	{isConfirmingResetApproval ? (
+																		<>
+																			<Spinner />
+																			<span>Confirming</span>
+																		</>
+																	) : (
+																		'Reset Approval'
+																	)}
 																</Button>
 															</Flex>
 														)}
@@ -1504,20 +1513,6 @@ export function AggregatorContainer({ tokenList }) {
 															/>
 														) : (
 															<Button
-																isLoading={
-																	swapMutation.isPending ||
-																	isApproveLoading ||
-																	(gaslessApprovalMutation.isPending &&
-																		!gaslessApprovalMutation.variables.isInfiniteApproval)
-																}
-																loadingText={
-																	isConfirmingApproval ||
-																	(gaslessApprovalMutation.isPending &&
-																		!gaslessApprovalMutation.variables.isInfiniteApproval)
-																		? 'Confirming'
-																		: 'Preparing transaction'
-																}
-																colorScheme={'messenger'}
 																onClick={() => {
 																	if (!isApproved && isGaslessApproval) {
 																		handleGaslessApproval({ isInfiniteApproval: false });
@@ -1536,42 +1531,47 @@ export function AggregatorContainer({ tokenList }) {
 
 																	if (isApproved) handleSwap();
 																}}
-																aria-disabled={
+																disabled={
 																	isUSDTNotApprovedOnEthereum ||
 																	swapMutation.isPending ||
 																	gaslessApprovalMutation.isPending ||
-																	isApproveLoading ||
-																	isApproveResetLoading ||
+																	isConfirmingApproval ||
+																	isConfirmingResetApproval ||
+																	!(finalSelectedFromToken && finalSelectedToToken) ||
+																	insufficientBalance ||
 																	!selectedRoute ||
 																	slippageIsWorng ||
-																	!isAmountSynced
+																	!isAmountSynced ||
+																	isConfirmingInfiniteApproval ||
+																	isFetchingAllowance
 																}
 															>
-																{!selectedRoute
-																	? 'Select Aggregator'
-																	: isApproved
-																		? `Swap via ${selectedRoute?.name}`
-																		: slippageIsWorng
-																			? 'Set Slippage'
-																			: 'Approve'}
+																{!selectedRoute ? (
+																	'Select Aggregator'
+																) : isConfirmingApproval ||
+																  (gaslessApprovalMutation.isPending &&
+																		!gaslessApprovalMutation.variables.isInfiniteApproval) ? (
+																	<>
+																		<Spinner />
+																		<span>Confirming</span>
+																	</>
+																) : swapMutation.isPending ? (
+																	<>
+																		<Spinner />
+																		<span>Preparing transaction</span>
+																	</>
+																) : isApproved ? (
+																	`Swap via ${selectedRoute?.name}`
+																) : slippageIsWorng ? (
+																	'Set Slippage'
+																) : (
+																	'Approve'
+																)}
 															</Button>
 														)}
 
 														{!isApproved && selectedRoute && inifiniteApprovalAllowed.includes(selectedRoute.name) && (
 															<Button
-																colorScheme={'messenger'}
-																loadingText={
-																	isConfirmingInfiniteApproval ||
-																	(gaslessApprovalMutation.isPending &&
-																		gaslessApprovalMutation.variables.isInfiniteApproval)
-																		? 'Confirming'
-																		: 'Preparing transaction'
-																}
-																isLoading={
-																	isApproveInfiniteLoading ||
-																	(gaslessApprovalMutation.isPending &&
-																		gaslessApprovalMutation.variables.isInfiniteApproval)
-																}
 																onClick={() => {
 																	if (!isApproved && isGaslessApproval) {
 																		handleGaslessApproval({ isInfiniteApproval: true });
@@ -1580,26 +1580,33 @@ export function AggregatorContainer({ tokenList }) {
 
 																	if (approveInfinite) approveInfinite();
 																}}
-																aria-disabled={
+																disabled={
 																	isUSDTNotApprovedOnEthereum ||
 																	swapMutation.isPending ||
 																	gaslessApprovalMutation.isPending ||
-																	isApproveLoading ||
-																	isApproveResetLoading ||
-																	isApproveInfiniteLoading ||
+																	isConfirmingApproval ||
+																	isConfirmingResetApproval ||
+																	isConfirmingInfiniteApproval ||
 																	!selectedRoute
 																}
 															>
-																{'Approve Infinite'}
+																{isConfirmingInfiniteApproval ||
+																(gaslessApprovalMutation.isPending &&
+																	gaslessApprovalMutation.variables.isInfiniteApproval) ? (
+																	<>
+																		<Spinner />
+																		<span>Confirming</span>
+																	</>
+																) : (
+																	'Approve Infinite'
+																)}
 															</Button>
 														)}
 
 														{!isApproved && selectedRoute ? (
 															<Tooltip2 content="Already approved? Click to refetch token allowance">
 																<Button
-																	colorScheme={'messenger'}
-																	width={'24px'}
-																	padding={'4px'}
+																	style={{height: "100%"}}
 																	onClick={() => refetchTokenAllowance?.()}
 																>
 																	<RepeatIcon w="16px	" h="16px" />
@@ -1660,3 +1667,28 @@ export function AggregatorContainer({ tokenList }) {
 		</Wrapper>
 	);
 }
+
+const SpinnerWrapper = styled.svg`
+	animation: spin 1s linear infinite;
+
+	@keyframes spin {
+		from {
+			transform: rotate(0deg);
+		}
+		to {
+			transform: rotate(360deg);
+		}
+	}
+`;
+const Spinner = () => {
+	return (
+		<SpinnerWrapper height={16} width={16} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+			<circle style={{ opacity: '0.25' }} cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+			<path
+				style={{ opacity: '0.75' }}
+				fill="currentColor"
+				d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+			></path>
+		</SpinnerWrapper>
+	);
+};

From f8d634f103612245af7177c45960bdf416815f76 Mon Sep 17 00:00:00 2001
From: mintdart <96025197+mintdart@users.noreply.github.com>
Date: Thu, 12 Dec 2024 15:55:54 -0600
Subject: [PATCH 2/5] wording

---
 src/components/Aggregator/index.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/Aggregator/index.tsx b/src/components/Aggregator/index.tsx
index 774b10ab..73f3eca4 100644
--- a/src/components/Aggregator/index.tsx
+++ b/src/components/Aggregator/index.tsx
@@ -718,7 +718,7 @@ export function AggregatorContainer({ tokenList }) {
 			? +selectedRoute.fromAmount > Number(balance.data.value)
 			: false;
 
-	const slippageIsWorng = Number.isNaN(Number(slippage)) || slippage === '';
+	const slippageIsWrong = Number.isNaN(Number(slippage)) || slippage === '';
 
 	const forceRefreshTokenBalance = () => {
 		if (chainOnWallet && address) {
@@ -970,7 +970,7 @@ export function AggregatorContainer({ tokenList }) {
 		if (
 			selectedRoute &&
 			selectedRoute.price &&
-			!slippageIsWorng &&
+			!slippageIsWrong &&
 			selectedChain &&
 			finalSelectedFromToken &&
 			finalSelectedToToken &&
@@ -1268,7 +1268,7 @@ export function AggregatorContainer({ tokenList }) {
 														!(finalSelectedFromToken && finalSelectedToToken) ||
 														insufficientBalance ||
 														!selectedRoute ||
-														slippageIsWorng ||
+														slippageIsWrong ||
 														!isAmountSynced ||
 														isConfirmingInfiniteApproval ||
 														isFetchingAllowance
@@ -1290,7 +1290,7 @@ export function AggregatorContainer({ tokenList }) {
 														</>
 													) : isApproved ? (
 														`Swap via ${selectedRoute?.name}`
-													) : slippageIsWorng ? (
+													) : slippageIsWrong ? (
 														'Set Slippage'
 													) : (
 														'Approve'
@@ -1540,7 +1540,7 @@ export function AggregatorContainer({ tokenList }) {
 																	!(finalSelectedFromToken && finalSelectedToToken) ||
 																	insufficientBalance ||
 																	!selectedRoute ||
-																	slippageIsWorng ||
+																	slippageIsWrong ||
 																	!isAmountSynced ||
 																	isConfirmingInfiniteApproval ||
 																	isFetchingAllowance
@@ -1562,7 +1562,7 @@ export function AggregatorContainer({ tokenList }) {
 																	</>
 																) : isApproved ? (
 																	`Swap via ${selectedRoute?.name}`
-																) : slippageIsWorng ? (
+																) : slippageIsWrong ? (
 																	'Set Slippage'
 																) : (
 																	'Approve'

From 7b1c27afd0ca397fe79d4a5558b99b7b56445d46 Mon Sep 17 00:00:00 2001
From: 0xngmi <0xngmi@protonmail.com>
Date: Thu, 1 May 2025 23:58:49 +0100
Subject: [PATCH 3/5] Merge branch 'master' into update-buttons

---
 src/components/Aggregator/adapters/0x.ts        | 1 -
 src/components/Aggregator/adapters/openocean.ts | 1 -
 2 files changed, 2 deletions(-)

diff --git a/src/components/Aggregator/adapters/0x.ts b/src/components/Aggregator/adapters/0x.ts
index bd917c4f..1a03126d 100644
--- a/src/components/Aggregator/adapters/0x.ts
+++ b/src/components/Aggregator/adapters/0x.ts
@@ -1,4 +1,3 @@
-import BigNumber from 'bignumber.js';
 import { defillamaReferrerAddress } from '../constants';
 import { sendTx } from '../utils/sendTx';
 import { zeroAddress } from 'viem';
diff --git a/src/components/Aggregator/adapters/openocean.ts b/src/components/Aggregator/adapters/openocean.ts
index ee837457..ccdec708 100644
--- a/src/components/Aggregator/adapters/openocean.ts
+++ b/src/components/Aggregator/adapters/openocean.ts
@@ -1,4 +1,3 @@
-import BigNumber from 'bignumber.js';
 import { sendTx } from '../utils/sendTx';
 import { zeroAddress } from 'viem';
 

From 5ee378da848e1e0566e7cc42678d0fdfd0fec2a8 Mon Sep 17 00:00:00 2001
From: mintdart <96025197+mintdart@users.noreply.github.com>
Date: Sat, 10 May 2025 09:39:39 +0900
Subject: [PATCH 4/5] update buttons

---
 src/components/Aggregator/index.tsx | 42 ++++++++++++++---------------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/src/components/Aggregator/index.tsx b/src/components/Aggregator/index.tsx
index a524c5b1..d3e5c66b 100644
--- a/src/components/Aggregator/index.tsx
+++ b/src/components/Aggregator/index.tsx
@@ -384,13 +384,8 @@ export function AggregatorContainer() {
 	const routesRef = useRef<HTMLDivElement>(null);
 	const router = useRouter();
 
-	const {  toTokenAddress } = useQueryParams();
-	const {
-		selectedChain,
-		selectedToToken,
-		finalSelectedFromToken,
-		finalSelectedToToken
-	} = useSelectedChainAndTokens();
+	const { toTokenAddress } = useQueryParams();
+	const { selectedChain, selectedToToken, finalSelectedFromToken, finalSelectedToToken } = useSelectedChainAndTokens();
 	const isValidSelectedChain = selectedChain && chainOnWallet ? selectedChain.id === chainOnWallet.id : false;
 	const isOutputTrade = amountOut && amountOut !== '';
 
@@ -1199,15 +1194,19 @@ export function AggregatorContainer() {
 											selectedRoute.price.isSignatureNeededForSwap &&
 											(selectedRoute.price.rawQuote as any).permit2 ? (
 												<Button
-													isLoading={signatureForSwapMutation.isPending}
-													loadingText={'Confirming'}
-													colorScheme={'messenger'}
 													onClick={() => {
 														handleSignatureForMutation();
 													}}
-													disabled={(signatureForSwapMutation.isPending || signatureForSwapMutation.data) ? true : false}
+													disabled={signatureForSwapMutation.isPending || signatureForSwapMutation.data ? true : false}
 												>
-													Sign
+													{signatureForSwapMutation.isPending ? (
+														<>
+															<Spinner />
+															<span>Confirming</span>
+														</>
+													) : (
+														'Sign'
+													)}
 												</Button>
 											) : null}
 
@@ -1336,7 +1335,7 @@ export function AggregatorContainer() {
 
 											{!isApproved && selectedRoute ? (
 												<Tooltip2 content="Already approved? Click to refetch token allowance">
-													<Button style={{height: "100%"}} onClick={() => refetchTokenAllowance?.()}>
+													<Button style={{ height: '100%' }} onClick={() => refetchTokenAllowance?.()}>
 														<RepeatIcon w="16px	" h="16px" />
 													</Button>
 												</Tooltip2>
@@ -1503,15 +1502,19 @@ export function AggregatorContainer() {
 														selectedRoute.price.isSignatureNeededForSwap &&
 														(selectedRoute.price.rawQuote as any).permit2 ? (
 															<Button
-																isLoading={signatureForSwapMutation.isPending}
-																loadingText={'Confirming'}
-																colorScheme={'messenger'}
 																onClick={() => {
 																	handleSignatureForMutation();
 																}}
 																disabled={signatureForSwapMutation.isPending || signatureForSwapMutation.data}
 															>
-																Sign
+																{signatureForSwapMutation.isPending ? (
+																	<>
+																		<Spinner />
+																		<span>Confirming</span>
+																	</>
+																) : (
+																	'Sign'
+																)}
 															</Button>
 														) : null}
 
@@ -1625,10 +1628,7 @@ export function AggregatorContainer() {
 
 														{!isApproved && selectedRoute ? (
 															<Tooltip2 content="Already approved? Click to refetch token allowance">
-																<Button
-																	style={{height: "100%"}}
-																	onClick={() => refetchTokenAllowance?.()}
-																>
+																<Button style={{ height: '100%' }} onClick={() => refetchTokenAllowance?.()}>
 																	<RepeatIcon w="16px	" h="16px" />
 																</Button>
 															</Tooltip2>

From 2d7d217c18e8c54bd3a745624e8e35ccc113a465 Mon Sep 17 00:00:00 2001
From: mintdart <96025197+mintdart@users.noreply.github.com>
Date: Sat, 10 May 2025 10:04:03 +0900
Subject: [PATCH 5/5] fix

---
 src/components/Aggregator/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Aggregator/index.tsx b/src/components/Aggregator/index.tsx
index d3e5c66b..4053d8fb 100644
--- a/src/components/Aggregator/index.tsx
+++ b/src/components/Aggregator/index.tsx
@@ -1703,7 +1703,7 @@ const SpinnerWrapper = styled.svg`
 const Spinner = () => {
 	return (
 		<SpinnerWrapper height={16} width={16} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-			<circle style={{ opacity: '0.25' }} cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+			<circle style={{ opacity: '0.25' }} cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
 			<path
 				style={{ opacity: '0.75' }}
 				fill="currentColor"