From 5306dd06612e9683d4ff2a3ccd197096e4d79d39 Mon Sep 17 00:00:00 2001 From: Zach Pomerantz Date: Thu, 25 Aug 2022 14:22:20 -0700 Subject: [PATCH] fix: clean up integration exports (#171) * fix: export enums * fix: simplify onSwitchTokens * fix: allow boolean returns in handlers * fix: simplify swap controller * test: update switch tests --- .../ConnectWallet/ConnectWallet.tsx | 2 +- src/components/Swap/SwapButton/index.tsx | 2 +- src/components/TokenSelect/index.tsx | 2 +- src/hooks/swap/index.test.tsx | 12 ++--------- src/hooks/swap/index.ts | 9 ++------- src/hooks/swap/useSyncController.ts | 15 +++++++++----- src/hooks/useSyncWidgetEventHandlers.ts | 10 +++------- src/index.tsx | 5 +++-- src/state/swap/index.ts | 20 +++++-------------- src/state/wallet.ts | 4 +++- 10 files changed, 31 insertions(+), 50 deletions(-) diff --git a/src/components/ConnectWallet/ConnectWallet.tsx b/src/components/ConnectWallet/ConnectWallet.tsx index 2b3c2cc4b..f172edc4f 100644 --- a/src/components/ConnectWallet/ConnectWallet.tsx +++ b/src/components/ConnectWallet/ConnectWallet.tsx @@ -27,7 +27,7 @@ export default function ConnectWallet({ disabled }: ConnectWalletProps) { const onConnectWalletClick = useAtomValue(onConnectWalletClickAtom) const onClick = useCallback(async () => { - const open = await onConnectWalletClick?.()?.catch(() => false) + const open = await Promise.resolve(onConnectWalletClick?.()).catch(() => false) setOpen(open ?? true) }, [onConnectWalletClick]) diff --git a/src/components/Swap/SwapButton/index.tsx b/src/components/Swap/SwapButton/index.tsx index 298b7fc0b..7e2f89b86 100644 --- a/src/components/Swap/SwapButton/index.tsx +++ b/src/components/Swap/SwapButton/index.tsx @@ -168,7 +168,7 @@ export default memo(function SwapButton({ disabled }: SwapButtonProps) { : trade.state === TradeState.VALID ? { onClick: async () => { - const open = await onReviewSwapClick?.()?.catch(() => false) + const open = await Promise.resolve(onReviewSwapClick?.())?.catch(() => false) setOpen(open ?? true) }, } diff --git a/src/components/TokenSelect/index.tsx b/src/components/TokenSelect/index.tsx index 35e04f13f..09c8d77fc 100644 --- a/src/components/TokenSelect/index.tsx +++ b/src/components/TokenSelect/index.tsx @@ -133,7 +133,7 @@ export default memo(function TokenSelect({ collapsed, disabled, field, onSelect, const [open, setOpen] = useState(false) const { onTokenSelectorClick } = useAtomValue(swapEventHandlersAtom) const onOpen = useCallback(async () => { - const open = await onTokenSelectorClick?.(field)?.catch(() => false) + const open = await Promise.resolve(onTokenSelectorClick?.(field)).catch(() => false) setOpen(open ?? true) }, [field, onTokenSelectorClick]) const selectAndClose = useCallback( diff --git a/src/hooks/swap/index.test.tsx b/src/hooks/swap/index.test.tsx index 90ee3d97f..da79d05fb 100644 --- a/src/hooks/swap/index.test.tsx +++ b/src/hooks/swap/index.test.tsx @@ -1,4 +1,3 @@ -import { TradeType } from '@uniswap/sdk-core' import { SupportedChainId } from 'constants/chains' import { DAI, UNI, USDC_MAINNET } from 'constants/tokens' import { useAtomValue } from 'jotai/utils' @@ -19,13 +18,6 @@ const INITIAL_SWAP: Swap = { describe('swap state', () => { describe('useSwitchSwapCurrencies', () => { - const SWITCHED_SWAP = { - amount: INITIAL_SWAP.amount, - type: TradeType.EXACT_OUTPUT, - inputToken: INITIAL_SWAP[Field.OUTPUT], - outputToken: INITIAL_SWAP[Field.INPUT], - } - it('swaps currencies', () => { const spy = jest.fn() const { rerender } = renderHook( @@ -40,7 +32,7 @@ describe('swap state', () => { ], } ) - expect(spy).toHaveBeenCalledWith(SWITCHED_SWAP) + expect(spy).toHaveBeenCalled() const { result } = rerender(() => useAtomValue(swapAtom)) expect(result.current).toMatchObject({ @@ -66,7 +58,7 @@ describe('swap state', () => { ], } ) - expect(spy).toHaveBeenCalledWith(SWITCHED_SWAP) + expect(spy).toHaveBeenCalled() const { result } = rerender(() => useAtomValue(swapAtom)) expect(result.current).toMatchObject(INITIAL_SWAP) diff --git a/src/hooks/swap/index.ts b/src/hooks/swap/index.ts index 9b61fab89..f26f9f5cd 100644 --- a/src/hooks/swap/index.ts +++ b/src/hooks/swap/index.ts @@ -1,4 +1,4 @@ -import { Currency, CurrencyAmount, TradeType } from '@uniswap/sdk-core' +import { Currency, CurrencyAmount } from '@uniswap/sdk-core' import { useAtom } from 'jotai' import { useAtomValue, useUpdateAtom } from 'jotai/utils' import { useCallback, useMemo } from 'react' @@ -23,12 +23,7 @@ export function useSwitchSwapCurrencies() { const setSwap = useUpdateAtom(swapAtom) return useCallback(() => { setSwap((swap) => { - onSwitchTokens?.({ - type: swap.independentField === Field.INPUT ? TradeType.EXACT_OUTPUT : TradeType.EXACT_INPUT, - amount: swap.amount, - inputToken: swap[Field.OUTPUT], - outputToken: swap[Field.INPUT], - }) + onSwitchTokens?.() const oldOutput = swap[Field.OUTPUT] swap[Field.OUTPUT] = swap[Field.INPUT] swap[Field.INPUT] = oldOutput diff --git a/src/hooks/swap/useSyncController.ts b/src/hooks/swap/useSyncController.ts index e28e58a8f..9123d5ec1 100644 --- a/src/hooks/swap/useSyncController.ts +++ b/src/hooks/swap/useSyncController.ts @@ -1,12 +1,18 @@ -import { TradeType } from '@uniswap/sdk-core' +import { Currency, TradeType } from '@uniswap/sdk-core' import { useUpdateAtom } from 'jotai/utils' import { useEffect, useRef } from 'react' -import { controlledAtom as swapAtom, Field, Swap, SwapController } from 'state/swap' +import { controlledAtom as swapAtom, Field, Swap } from 'state/swap' import { controlledAtom as settingsAtom, Settings } from 'state/swap/settings' -export type { SwapController } from 'state/swap' export type SwapSettingsController = Settings +export interface SwapController { + type?: TradeType + amount?: string + [Field.INPUT]?: Currency + [Field.OUTPUT]?: Currency +} + export default function useSyncController({ value, settings, @@ -36,10 +42,9 @@ function toSwap(value?: SwapController): Swap | undefined { if (!value) return undefined return { + ...value, independentField: value.type === TradeType.EXACT_INPUT ? Field.INPUT : Field.OUTPUT, amount: value.amount || '', - [Field.INPUT]: value.inputToken, - [Field.OUTPUT]: value.outputToken, } } diff --git a/src/hooks/useSyncWidgetEventHandlers.ts b/src/hooks/useSyncWidgetEventHandlers.ts index 0d85b3959..62a9de877 100644 --- a/src/hooks/useSyncWidgetEventHandlers.ts +++ b/src/hooks/useSyncWidgetEventHandlers.ts @@ -1,8 +1,7 @@ import { useUpdateAtom } from 'jotai/utils' import { useEffect } from 'react' -import { onConnectWalletClickAtom } from 'state/wallet' - -export type OnConnectWalletClick = () => void | Promise +import { OnConnectWalletClick, onConnectWalletClickAtom } from 'state/wallet' +export type { OnConnectWalletClick } from 'state/wallet' export interface WidgetEventHandlers { onConnectWalletClick?: OnConnectWalletClick @@ -10,8 +9,5 @@ export interface WidgetEventHandlers { export default function useSyncWidgetEventHandlers({ onConnectWalletClick }: WidgetEventHandlers): void { const setOnConnectWalletClick = useUpdateAtom(onConnectWalletClickAtom) - useEffect( - () => setOnConnectWalletClick((old) => (old = onConnectWalletClick)), - [onConnectWalletClick, setOnConnectWalletClick] - ) + useEffect(() => setOnConnectWalletClick(onConnectWalletClick), [onConnectWalletClick, setOnConnectWalletClick]) } diff --git a/src/index.tsx b/src/index.tsx index cb4fce1e8..bd641dd6a 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -3,7 +3,8 @@ import 'polyfills' import Swap, { SwapProps } from 'components/Swap' import Widget, { WidgetProps } from 'components/Widget' export type { Provider as EthersProvider } from '@ethersproject/abstract-provider' -export type { Currency, TradeType } from '@uniswap/sdk-core' +export type { Currency } from '@uniswap/sdk-core' +export { TradeType } from '@uniswap/sdk-core' export type { TokenInfo } from '@uniswap/token-lists' export type { Provider as Eip1193Provider } from '@web3-react/types' export type { ErrorHandler } from 'components/Error/ErrorBoundary' @@ -17,7 +18,6 @@ export type { DefaultAddress, TokenDefaults } from 'hooks/swap/useSyncTokenDefau export type { OnTxFail, OnTxSubmit, OnTxSuccess, TransactionEventHandlers } from 'hooks/transactions' export type { OnConnectWalletClick, WidgetEventHandlers } from 'hooks/useSyncWidgetEventHandlers' export type { - Field, OnAmountChange, OnReviewSwapClick, OnSettingsReset, @@ -28,6 +28,7 @@ export type { OnTransactionDeadlineChange, SwapEventHandlers, } from 'state/swap' +export { Field } from 'state/swap' export type { Slippage } from 'state/swap/settings' export type { Theme } from 'theme' export { darkTheme, defaultTheme, lightTheme } from 'theme' diff --git a/src/state/swap/index.ts b/src/state/swap/index.ts index 2a1f9460a..2d1d90330 100644 --- a/src/state/swap/index.ts +++ b/src/state/swap/index.ts @@ -1,4 +1,4 @@ -import { Currency, TradeType } from '@uniswap/sdk-core' +import { Currency } from '@uniswap/sdk-core' import { FeeOptions } from '@uniswap/v3-sdk' import { SupportedChainId } from 'constants/chains' import { nativeOnChain } from 'constants/tokens' @@ -12,13 +12,6 @@ export enum Field { OUTPUT = 'OUTPUT', } -export interface SwapController { - type?: TradeType - amount?: string - inputToken?: Currency - outputToken?: Currency -} - export interface Swap { independentField: Field amount: string @@ -59,23 +52,20 @@ export type OnTokenChange = (field: Field, token: Currency) => void /** An integration hook called when the user enters a new amount. */ export type OnAmountChange = (field: Field, amount: string) => void -/** - * An integration hook called when the user switches the tokens. - * The values represent already-switched state, to make it easier to update controlled state. - */ -export type OnSwitchTokens = (values: SwapController) => void +/** An integration hook called when the user switches the tokens. */ +export type OnSwitchTokens = () => void /** * An integration hook called when the user clicks 'Review swap'. * If the hook resolves to false or rejects, the review dialog will not open. */ -export type OnReviewSwapClick = () => void | Promise +export type OnReviewSwapClick = () => void | boolean | Promise /** * An integration hook called when the user clicks the token selector. * If the hook resolve to false or rejects, the token selector will not open. */ -export type OnTokenSelectorClick = (field: Field) => void | Promise +export type OnTokenSelectorClick = (field: Field) => void | boolean | Promise export interface SwapEventHandlers { onSettingsReset?: OnSettingsReset diff --git a/src/state/wallet.ts b/src/state/wallet.ts index eca80b501..c3419e46e 100644 --- a/src/state/wallet.ts +++ b/src/state/wallet.ts @@ -1,4 +1,6 @@ import { atom } from 'jotai' +export type OnConnectWalletClick = () => void | boolean | Promise + // If set, allows integrator to add behavior when 'Connect wallet to swap' button is clicked -export const onConnectWalletClickAtom = atom<(() => void | Promise) | undefined>(undefined) +export const onConnectWalletClickAtom = atom(undefined)