diff --git a/src/components/Aggregator/hooks/useTokenApprove.ts b/src/components/Aggregator/hooks/useTokenApprove.ts
index 8559a2ac..34cffe6f 100644
--- a/src/components/Aggregator/hooks/useTokenApprove.ts
+++ b/src/components/Aggregator/hooks/useTokenApprove.ts
@@ -198,11 +198,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 e31b8f4e..4aa107f8 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,
@@ -292,6 +291,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) => (
}
@@ -614,7 +631,7 @@ export function AggregatorContainer() {
? +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) {
@@ -639,9 +656,7 @@ export function AggregatorContainer() {
approve,
approveInfinite,
approveReset,
- isLoading: isApproveLoading,
- isInfiniteLoading: isApproveInfiniteLoading,
- isResetLoading: isApproveResetLoading,
+ isFetchingAllowance,
isConfirmingApproval,
isConfirmingInfiniteApproval,
isConfirmingResetApproval,
@@ -1002,7 +1017,7 @@ export function AggregatorContainer() {
if (
selectedRoute &&
selectedRoute.price &&
- !slippageIsWorng &&
+ !slippageIsWrong &&
selectedChain &&
finalSelectedFromToken &&
finalSelectedToToken &&
@@ -1230,12 +1245,9 @@ export function AggregatorContainer() {
>
{!isConnected ? (
-
+
) : !isValidSelectedChain ? (
) : insufficientBalance ? (
-
+
) : !selectedRoute && isSmallScreen && finalSelectedFromToken && finalSelectedToToken ? (
-
+
) : hasMaxPriceImpact && !isDegenModeEnabled ? (
-
+
) : (
<>
{router && address && (
@@ -1281,15 +1287,19 @@ export function AggregatorContainer() {
need to reset your approval and approve again`}
)}
@@ -1300,15 +1310,19 @@ export function AggregatorContainer() {
selectedRoute.price.isSignatureNeededForSwap &&
(selectedRoute.price.rawQuote as any).permit2 ? (
) : null}
@@ -1321,18 +1335,6 @@ export function AggregatorContainer() {
/>
) : (
)}
{!isApproved && selectedRoute && inifiniteApprovalAllowed.includes(selectedRoute.name) && (
)}
{isSmallScreen && warnings?.length ? (
-
@@ -1436,12 +1451,7 @@ export function AggregatorContainer() {
{!isApproved && selectedRoute ? (
- refetchTokenAllowance?.()}
- >
+ refetchTokenAllowance?.()}>
@@ -1552,7 +1562,6 @@ export function AggregatorContainer() {
) : !isValidSelectedChain ? (
{
if (selectedChain) {
switchChain({ chainId: selectedChain.id });
@@ -1586,15 +1595,19 @@ export function AggregatorContainer() {
need to reset your approval and approve again`}
{
if (approveReset) approveReset();
}}
- aria-disabled={isApproveResetLoading || !selectedRoute}
+ disabled={isConfirmingResetApproval || !selectedRoute}
>
- Reset Approval
+ {isConfirmingResetApproval ? (
+ <>
+
+ Confirming
+ >
+ ) : (
+ 'Reset Approval'
+ )}
)}
@@ -1605,15 +1618,19 @@ export function AggregatorContainer() {
selectedRoute.price.isSignatureNeededForSwap &&
(selectedRoute.price.rawQuote as any).permit2 ? (
{
handleSignatureForMutation();
}}
disabled={signatureForSwapMutation.isPending || signatureForSwapMutation.data}
>
- Sign
+ {signatureForSwapMutation.isPending ? (
+ <>
+
+ Confirming
+ >
+ ) : (
+ 'Sign'
+ )}
) : null}
@@ -1625,20 +1642,6 @@ export function AggregatorContainer() {
/>
) : (
{
if (!isApproved && isGaslessApproval) {
handleGaslessApproval({ isInfiniteApproval: false });
@@ -1657,15 +1660,19 @@ export function AggregatorContainer() {
if (isApproved) handleSwap();
}}
- aria-disabled={
+ disabled={
isUSDTNotApprovedOnEthereum ||
swapMutation.isPending ||
gaslessApprovalMutation.isPending ||
- isApproveLoading ||
- isApproveResetLoading ||
+ isConfirmingApproval ||
+ isConfirmingResetApproval ||
+ !(finalSelectedFromToken && finalSelectedToToken) ||
+ insufficientBalance ||
!selectedRoute ||
- slippageIsWorng ||
+ slippageIsWrong ||
!isAmountSynced ||
+ isConfirmingInfiniteApproval ||
+ isFetchingAllowance ||
signatureForSwapMutation.isPending ||
(selectedRoute.price.isSignatureNeededForSwap
? (selectedRoute.price.rawQuote as any).permit2
@@ -1678,31 +1685,32 @@ export function AggregatorContainer() {
: false)
}
>
- {!selectedRoute
- ? 'Select Aggregator'
- : isApproved
- ? `Swap via ${selectedRoute?.name}`
- : slippageIsWorng
- ? 'Set Slippage'
- : 'Approve'}
+ {!selectedRoute ? (
+ 'Select Aggregator'
+ ) : isConfirmingApproval ||
+ (gaslessApprovalMutation.isPending &&
+ !gaslessApprovalMutation.variables.isInfiniteApproval) ? (
+ <>
+
+ Confirming
+ >
+ ) : swapMutation.isPending ? (
+ <>
+
+ Preparing transaction
+ >
+ ) : isApproved ? (
+ `Swap via ${selectedRoute?.name}`
+ ) : slippageIsWrong ? (
+ 'Set Slippage'
+ ) : (
+ 'Approve'
+ )}
)}
{!isApproved && selectedRoute && inifiniteApprovalAllowed.includes(selectedRoute.name) && (
{
if (!isApproved && isGaslessApproval) {
handleGaslessApproval({ isInfiniteApproval: true });
@@ -1711,28 +1719,32 @@ export function AggregatorContainer() {
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) ? (
+ <>
+
+ Confirming
+ >
+ ) : (
+ 'Approve Infinite'
+ )}
)}
{!isApproved && selectedRoute ? (
- refetchTokenAllowance?.()}
- >
+ refetchTokenAllowance?.()}>
@@ -1791,3 +1803,28 @@ export function AggregatorContainer() {
);
}
+
+const SpinnerWrapper = styled.svg`
+ animation: spin 1s linear infinite;
+
+ @keyframes spin {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+ }
+`;
+const Spinner = () => {
+ return (
+
+
+
+
+ );
+};