diff --git a/src/buy/components/BuyAmountInput.test.tsx b/src/buy/components/BuyAmountInput.test.tsx index 12931f05f2..1d2ee8cbc5 100644 --- a/src/buy/components/BuyAmountInput.test.tsx +++ b/src/buy/components/BuyAmountInput.test.tsx @@ -2,8 +2,6 @@ import { render, screen, fireEvent } from '@testing-library/react'; import { type Mock, beforeEach, describe, expect, it, vi } from 'vitest'; import { BuyAmountInput } from './BuyAmountInput'; import { useBuyContext } from './BuyProvider'; -import { TextInput } from '../../internal/components/TextInput'; -import { Token, TokenChip } from '../../token'; vi.mock('./BuyProvider', () => ({ useBuyContext: vi.fn(), diff --git a/src/buy/components/BuyAmountInput.tsx b/src/buy/components/BuyAmountInput.tsx index 7a62d2862b..006dc39293 100644 --- a/src/buy/components/BuyAmountInput.tsx +++ b/src/buy/components/BuyAmountInput.tsx @@ -2,8 +2,8 @@ import { useCallback } from 'react'; import { isValidAmount } from '../../core/utils/isValidAmount'; import { TextInput } from '../../internal/components/TextInput'; import { cn, pressable } from '../../styles/theme'; -import { TokenChip } from '../../token'; import { formatAmount } from '../../swap/utils/formatAmount'; +import { TokenChip } from '../../token'; import { useBuyContext } from './BuyProvider'; export function BuyAmountInput() { diff --git a/src/buy/components/BuyButton.test.tsx b/src/buy/components/BuyButton.test.tsx index 23a2bc0fcd..af4dfa0613 100644 --- a/src/buy/components/BuyButton.test.tsx +++ b/src/buy/components/BuyButton.test.tsx @@ -1,9 +1,7 @@ -import { render, screen, fireEvent } from '@testing-library/react'; +import { fireEvent, render, screen } from '@testing-library/react'; import { type Mock, beforeEach, describe, expect, it, vi } from 'vitest'; import { BuyButton } from './BuyButton'; import { useBuyContext } from './BuyProvider'; -import { Spinner } from '../../internal/components/Spinner'; -import { checkmarkSvg } from '../../internal/svg/checkmarkSvg'; vi.mock('./BuyProvider', () => ({ useBuyContext: vi.fn(), diff --git a/src/buy/components/BuyDropdown.tsx b/src/buy/components/BuyDropdown.tsx index c6a14793dd..bbdabcbdcd 100644 --- a/src/buy/components/BuyDropdown.tsx +++ b/src/buy/components/BuyDropdown.tsx @@ -40,7 +40,7 @@ export function BuyDropdown() { } }; }, - [address, to, projectId], + [address, to, projectId, startPopupMonitor], ); const formattedAmountUSD = useMemo(() => { diff --git a/src/buy/components/BuyOnrampItem.test.tsx b/src/buy/components/BuyOnrampItem.test.tsx index aca971234e..a85ebd3d02 100644 --- a/src/buy/components/BuyOnrampItem.test.tsx +++ b/src/buy/components/BuyOnrampItem.test.tsx @@ -1,5 +1,5 @@ -import { render, screen, fireEvent } from '@testing-library/react'; -import { beforeEach, describe, expect, it, Mock, vi } from 'vitest'; +import { fireEvent, render, screen } from '@testing-library/react'; +import { type Mock, beforeEach, describe, expect, it, vi } from 'vitest'; import { BuyOnrampItem } from './BuyOnrampItem'; import { useBuyContext } from './BuyProvider'; diff --git a/src/buy/components/BuyProvider.tsx b/src/buy/components/BuyProvider.tsx index 689e44835f..ec00cc86b3 100644 --- a/src/buy/components/BuyProvider.tsx +++ b/src/buy/components/BuyProvider.tsx @@ -13,21 +13,21 @@ import { useCapabilitiesSafe } from '../../core-react/internal/hooks/useCapabili import { useValue } from '../../core-react/internal/hooks/useValue'; import { useOnchainKit } from '../../core-react/useOnchainKit'; import { buildSwapTransaction } from '../../core/api/buildSwapTransaction'; -import { getBuyQuote } from '../utils/getBuyQuote'; import { setupOnrampEventListeners } from '../../fund'; -import type { EventMetadata, OnrampError } from '../../fund/types'; -import { GENERIC_ERROR_MESSAGE } from '../../transaction/constants'; -import { isUserRejectedRequestError } from '../../transaction/utils/isUserRejectedRequestError'; +import type { EventMetadata } from '../../fund/types'; import { FALLBACK_DEFAULT_MAX_SLIPPAGE } from '../../swap/constants'; import { useAwaitCalls } from '../../swap/hooks/useAwaitCalls'; import { useLifecycleStatus } from '../../swap/hooks/useLifecycleStatus'; import type { SwapUnit } from '../../swap/types'; import { isSwapError } from '../../swap/utils/isSwapError'; import { processSwapTransaction } from '../../swap/utils/processSwapTransaction'; +import { GENERIC_ERROR_MESSAGE } from '../../transaction/constants'; +import { isUserRejectedRequestError } from '../../transaction/utils/isUserRejectedRequestError'; import { useBuyTokens } from '../hooks/useBuyTokens'; import { usePopupMonitor } from '../hooks/usePopupMonitor'; import { useResetBuyInputs } from '../hooks/useResetBuyInputs'; -import { BuyContextType, BuyProviderReact } from '../types'; +import type { BuyContextType, BuyProviderReact } from '../types'; +import { getBuyQuote } from '../utils/getBuyQuote'; const emptyContext = {} as BuyContextType; @@ -114,7 +114,7 @@ export function BuyProvider({ statusName: 'success', statusData: {}, }); - }, []); + }, [updateLifecycleStatus]); const onPopupClose = useCallback(() => { updateLifecycleStatus({ @@ -124,7 +124,7 @@ export function BuyProvider({ maxSlippage: config.maxSlippage, }, }); - }, [updateLifecycleStatus]); + }, [updateLifecycleStatus, config.maxSlippage]); useEffect(() => { const unsubscribe = setupOnrampEventListeners({ diff --git a/src/buy/components/BuyTokenItem.test.tsx b/src/buy/components/BuyTokenItem.test.tsx index 7496138e48..7d7c9c75ee 100644 --- a/src/buy/components/BuyTokenItem.test.tsx +++ b/src/buy/components/BuyTokenItem.test.tsx @@ -1,9 +1,9 @@ -import { render, screen, fireEvent } from '@testing-library/react'; -import { beforeEach, describe, expect, it, Mock, vi } from 'vitest'; -import { BuyTokenItem } from './BuyTokenItem'; -import { useBuyContext } from './BuyProvider'; +import { fireEvent, render, screen } from '@testing-library/react'; +import { type Mock, beforeEach, describe, expect, it, vi } from 'vitest'; import { getRoundedAmount } from '../../core/utils/getRoundedAmount'; import { ethToken } from '../../token/constants'; +import { useBuyContext } from './BuyProvider'; +import { BuyTokenItem } from './BuyTokenItem'; vi.mock('./BuyProvider', () => ({ useBuyContext: vi.fn(), diff --git a/src/buy/components/BuyTokenItem.tsx b/src/buy/components/BuyTokenItem.tsx index b130c73fa7..949d0bfe3c 100644 --- a/src/buy/components/BuyTokenItem.tsx +++ b/src/buy/components/BuyTokenItem.tsx @@ -1,8 +1,8 @@ import { useCallback, useMemo } from 'react'; import { getRoundedAmount } from '../../core/utils/getRoundedAmount'; import { cn, color } from '../../styles/theme'; -import { TokenImage } from '../../token'; import type { SwapUnit } from '../../swap/types'; +import { TokenImage } from '../../token'; import { useBuyContext } from './BuyProvider'; export function BuyTokenItem({ swapUnit }: { swapUnit?: SwapUnit }) { diff --git a/src/buy/hooks/usePopupMonitor.ts b/src/buy/hooks/usePopupMonitor.ts index c9414541be..2d079a8694 100644 --- a/src/buy/hooks/usePopupMonitor.ts +++ b/src/buy/hooks/usePopupMonitor.ts @@ -1,24 +1,27 @@ -import { useRef, useEffect, useCallback } from 'react'; +import { useCallback, useEffect, useRef } from 'react'; export const usePopupMonitor = (onClose?: () => void) => { const intervalRef = useRef(null); // Start monitoring the popup - const startPopupMonitor = useCallback((popupWindow: Window) => { - if (intervalRef.current) { - clearInterval(intervalRef.current); - } - intervalRef.current = window.setInterval(() => { - if (popupWindow.closed) { - if (intervalRef.current) { - clearInterval(intervalRef.current); - intervalRef.current = null; - } - console.log('Popup closed'); - onClose?.(); + const startPopupMonitor = useCallback( + (popupWindow: Window) => { + if (intervalRef.current) { + clearInterval(intervalRef.current); } - }, 500); - }, []); + intervalRef.current = window.setInterval(() => { + if (popupWindow.closed) { + if (intervalRef.current) { + clearInterval(intervalRef.current); + intervalRef.current = null; + } + console.log('Popup closed'); + onClose?.(); + } + }, 500); + }, + [onClose], + ); // Stop monitoring the popup const stopPopupMonitor = useCallback(() => { diff --git a/src/buy/types.ts b/src/buy/types.ts index 71b8693097..4aa8a124b9 100644 --- a/src/buy/types.ts +++ b/src/buy/types.ts @@ -1,12 +1,12 @@ -import { +import type { LifecycleStatus, LifecycleStatusUpdate, SwapConfig, SwapError, SwapUnit, } from '@/swap/types'; -import { Token } from '@/token'; -import { Address, TransactionReceipt } from 'viem'; +import type { Token } from '@/token'; +import type { Address, TransactionReceipt } from 'viem'; export type BuyReact = { className?: string; // Optional className override for top div element.