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 ? ( - @@ -1552,7 +1562,6 @@ export function AggregatorContainer() { ) : !isValidSelectedChain ? ( )} @@ -1605,15 +1618,19 @@ export function AggregatorContainer() { selectedRoute.price.isSignatureNeededForSwap && (selectedRoute.price.rawQuote as any).permit2 ? ( ) : null} @@ -1625,20 +1642,6 @@ export function AggregatorContainer() { /> ) : ( )} {!isApproved && selectedRoute && inifiniteApprovalAllowed.includes(selectedRoute.name) && ( )} {!isApproved && selectedRoute ? ( - @@ -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 ( + + + + + ); +};