diff --git a/components/brave_wallet_ui/common/hooks/balance.ts b/components/brave_wallet_ui/common/hooks/balance.ts index d6955c0bcc2b..f5ff6a928ca1 100644 --- a/components/brave_wallet_ui/common/hooks/balance.ts +++ b/components/brave_wallet_ui/common/hooks/balance.ts @@ -9,7 +9,7 @@ import { BraveWallet, WalletAccountType } from '../../constants/types' import { getTokensCoinType } from '../../utils/network-utils' export default function useBalance (networks: BraveWallet.NetworkInfo[]) { - return React.useCallback((account?: WalletAccountType, token?: BraveWallet.BlockchainToken) => { + const getBalance = React.useCallback((account?: WalletAccountType, token?: BraveWallet.BlockchainToken) => { if (!account || !token) { return '' } @@ -33,4 +33,6 @@ export default function useBalance (networks: BraveWallet.NetworkInfo[]) { return (account.tokenBalanceRegistry || {})[token.contractAddress.toLowerCase()] || '' }, [networks]) + + return getBalance } diff --git a/components/brave_wallet_ui/common/hooks/swap.ts b/components/brave_wallet_ui/common/hooks/swap.ts index ea39b1270aca..dd3f11e9ce5c 100644 --- a/components/brave_wallet_ui/common/hooks/swap.ts +++ b/components/brave_wallet_ui/common/hooks/swap.ts @@ -113,10 +113,7 @@ export default function useSwap ({ fromAsset: fromAssetProp, toAsset: toAssetPro const { getIsSwapSupported, getERC20Allowance } = useLib() // memos - const nativeAsset = React.useMemo( - () => makeNetworkAsset(selectedNetwork), - [selectedNetwork] - ) + const nativeAsset = React.useMemo(() => makeNetworkAsset(selectedNetwork), [selectedNetwork]) const fromAssetBalance = getBalance(selectedAccount, fromAsset) const nativeAssetBalance = getBalance(selectedAccount, nativeAsset) const toAssetBalance = getBalance(selectedAccount, toAsset) @@ -471,7 +468,7 @@ export default function useSwap ({ fromAsset: fromAssetProp, toAsset: toAssetPro }) }, [selectedAccount, selectedNetwork, fromAsset, toAsset]) - const onSwapQuoteRefresh = async () => { + const onSwapQuoteRefresh = React.useCallback(async () => { const customSlippage = { id: 4, slippage: Number(customSlippageTolerance) @@ -480,7 +477,7 @@ export default function useSwap ({ fromAsset: fromAssetProp, toAsset: toAssetPro overrides: { toOrFrom: 'from', slippageTolerance: customSlippageTolerance ? customSlippage : slippageTolerance }, state: { fromAmount, toAmount } }) - } + }, [onSwapParamsChange, fromAmount, toAmount, customSlippageTolerance, slippageTolerance]) /** * onSwapParamsChangeDebounced is a debounced function which delays calling @@ -509,32 +506,24 @@ export default function useSwap ({ fromAsset: fromAssetProp, toAsset: toAssetPro }) }, [toAsset, fromAsset, fromAmount, toAmount, onSwapParamsChange]) - const onSetFromAmount = async (value: string) => { + const onSetFromAmount = React.useCallback(async (value: string) => { setFromAmount(value) await onSwapParamsChangeDebounced({ overrides: { toOrFrom: 'from', amount: value }, state: { fromAmount, toAmount } }) - } + }, [onSwapParamsChangeDebounced, fromAmount, toAmount]) - const onSetToAmount = async (value: string) => { + const onSetToAmount = React.useCallback(async (value: string) => { setToAmount(value) await onSwapParamsChangeDebounced({ overrides: { toOrFrom: 'to', amount: value }, state: { fromAmount, toAmount } }) - } - - const onSetExchangeRate = (value: string) => { - setExchangeRate(value) - } - - const onSelectExpiration = (expiration: ExpirationPresetObjectType) => { - setOrderExpiration(expiration) - } + }, [onSwapParamsChangeDebounced, fromAmount, toAmount]) - const onCustomSlippageToleranceChange = (value: string) => { + const onCustomSlippageToleranceChange = React.useCallback((value: string) => { setCustomSlippageTolerance(value) const customSlippage = { id: 4, @@ -545,26 +534,26 @@ export default function useSwap ({ fromAsset: fromAssetProp, toAsset: toAssetPro overrides: { toOrFrom: 'from', slippageTolerance: slippage }, state: { fromAmount, toAmount } }) - } + }, [onSwapParamsChange, fromAmount, toAmount, slippageTolerance]) - const onSelectSlippageTolerance = (slippage: SlippagePresetObjectType) => { + const onSelectSlippageTolerance = React.useCallback((slippage: SlippagePresetObjectType) => { setSlippageTolerance(slippage) setCustomSlippageTolerance('') onSwapParamsChange({ overrides: { toOrFrom: 'from', slippageTolerance: slippage }, state: { fromAmount, toAmount } }) - } + }, [onSwapParamsChange, fromAmount, toAmount]) - const onToggleOrderType = () => { + const onToggleOrderType = React.useCallback(() => { if (orderType === 'market') { setOrderType('limit') } else { setOrderType('market') } - } + }, [orderType]) - const onSubmitSwap = () => { + const onSubmitSwap = React.useCallback(() => { if (!swapQuote) { return } @@ -603,9 +592,9 @@ export default function useSwap ({ fromAsset: fromAssetProp, toAsset: toAssetPro state: { fromAmount, toAmount }, full: true }) - } + }, [swapQuote, fromAsset, swapValidationError, allowance, selectedAccount, fromAmount, toAmount]) - const onSelectTransactAsset = (asset: BraveWallet.BlockchainToken, toOrFrom: ToOrFromType) => { + const onSelectTransactAsset = React.useCallback((asset: BraveWallet.BlockchainToken, toOrFrom: ToOrFromType) => { if (toOrFrom === 'from') { setFromAsset(asset) } else { @@ -623,9 +612,9 @@ export default function useSwap ({ fromAsset: fromAssetProp, toAsset: toAssetPro state: { fromAmount, toAmount: '0' } }) setIsLoading(false) - } + }, [onSwapParamsChange, fromAmount]) - const onSwapInputChange = (value: string, name: 'to' | 'from' | 'rate') => { + const onSwapInputChange = React.useCallback((value: string, name: 'to' | 'from' | 'rate') => { if (name === 'to') { onSetToAmount(value) } @@ -633,18 +622,16 @@ export default function useSwap ({ fromAsset: fromAssetProp, toAsset: toAssetPro onSetFromAmount(value) } if (name === 'rate') { - onSetExchangeRate(value) + setExchangeRate(value) } - } + }, [onSetToAmount, onSetFromAmount]) - const onFilterAssetList = (asset: BraveWallet.BlockchainToken) => { + const onFilterAssetList = React.useCallback((asset: BraveWallet.BlockchainToken) => { const newList = swapAssetOptions.filter((assets) => assets !== asset) setFilteredAssetList(newList) - } + }, [swapAssetOptions]) - const clearPreset = () => { - setSelectedPreset(undefined) - } + const clearPreset = React.useCallback(() => setSelectedPreset(undefined), []) const onSelectPresetAmount = usePreset( { @@ -819,11 +806,11 @@ export default function useSwap ({ fromAsset: fromAssetProp, toAsset: toAssetPro nativeAssetBalance, onCustomSlippageToleranceChange, onFilterAssetList, - onSelectExpiration, + setOrderExpiration, onSelectPresetAmount, onSelectSlippageTolerance, onSelectTransactAsset, - onSetExchangeRate, + setExchangeRate, onSetFromAmount, onSetToAmount, onSubmitSwap, diff --git a/components/brave_wallet_ui/components/buy-send-swap/swap/index.tsx b/components/brave_wallet_ui/components/buy-send-swap/swap/index.tsx index 31066000b411..ee8b3648de61 100644 --- a/components/brave_wallet_ui/components/buy-send-swap/swap/index.tsx +++ b/components/brave_wallet_ui/components/buy-send-swap/swap/index.tsx @@ -43,7 +43,7 @@ export interface Props { fromAssetBalance: ReturnType['fromAssetBalance'] isSwapButtonDisabled: ReturnType['isSwapButtonDisabled'] onCustomSlippageToleranceChange: ReturnType['onCustomSlippageToleranceChange'] - onSelectExpiration: ReturnType['onSelectExpiration'] + setOrderExpiration: ReturnType['setOrderExpiration'] onSelectPresetAmount: ReturnType['onSelectPresetAmount'] onSelectSlippageTolerance: ReturnType['onSelectSlippageTolerance'] onSubmitSwap: ReturnType['onSubmitSwap'] @@ -73,7 +73,7 @@ function Swap (props: Props) { onChangeSwapView, onCustomSlippageToleranceChange, onFilterAssetList, - onSelectExpiration, + setOrderExpiration, onSelectPresetAmount, onSelectSlippageTolerance, onSubmitSwap, @@ -207,7 +207,7 @@ function Swap (props: Props) { componentType='selector' orderType={orderType} onSelectSlippageTolerance={onSelectSlippageTolerance} - onSelectExpiration={onSelectExpiration} + onSelectExpiration={setOrderExpiration} slippageTolerance={slippageTolerance} orderExpiration={orderExpiration} customSlippageTolerance={customSlippageTolerance} diff --git a/components/brave_wallet_ui/components/buy-send-swap/tabs/swap-tab.tsx b/components/brave_wallet_ui/components/buy-send-swap/tabs/swap-tab.tsx index 60f17a823d95..1779318f8f7f 100644 --- a/components/brave_wallet_ui/components/buy-send-swap/tabs/swap-tab.tsx +++ b/components/brave_wallet_ui/components/buy-send-swap/tabs/swap-tab.tsx @@ -76,7 +76,7 @@ function SwapTab () { onChangeSwapView={onChangeSwapView} onCustomSlippageToleranceChange={swap.onCustomSlippageToleranceChange} onFilterAssetList={onFilterAssetList} - onSelectExpiration={swap.onSelectExpiration} + setOrderExpiration={swap.setOrderExpiration} onSelectPresetAmount={swap.onSelectPresetAmount} onSelectSlippageTolerance={swap.onSelectSlippageTolerance} onSubmitSwap={swap.onSubmitSwap}