diff --git a/apps/web/src/app/pages/trade/xswap/_components/SwapPanel.tsx b/apps/web/src/app/pages/trade/xswap/_components/SwapPanel.tsx index 339c46acf..ed3d40cf7 100644 --- a/apps/web/src/app/pages/trade/xswap/_components/SwapPanel.tsx +++ b/apps/web/src/app/pages/trade/xswap/_components/SwapPanel.tsx @@ -135,13 +135,19 @@ export default function SwapPanel() { [onPercentSelection, maxInputAmount], ); - const handleMaxBridgeAmountClick = (amount: CurrencyAmount) => { - onUserInput(Field.OUTPUT, amount?.toFixed(4)); - }; + const handleMaxBridgeAmountClick = useCallback( + (amount: CurrencyAmount) => { + onUserInput(Field.OUTPUT, amount?.toFixed(4)); + }, + [onUserInput], + ); - const handleMaxWithdrawAmountClick = (amount: CurrencyAmount) => { - onUserInput(Field.OUTPUT, amount?.toFixed(4)); - }; + const handleMaxWithdrawAmountClick = useCallback( + (amount: CurrencyAmount) => { + onUserInput(Field.OUTPUT, amount?.toFixed(4)); + }, + [onUserInput], + ); const rates = useRatesWithOracle(); @@ -167,6 +173,10 @@ export default function SwapPanel() { return formattedAmounts[Field.OUTPUT]; }, [mmTrade.isMMBetter, mmTrade.trade?.outputAmount, formattedAmounts, independentField]); + const handleActivateSolanaAccount = useCallback(() => { + handleOutputType('0.002'); + }, [handleOutputType]); + return ( <> @@ -311,9 +321,7 @@ export default function SwapPanel() { destinationChainId={direction.to} currencyAmount={parsedAmounts[Field.OUTPUT]} recipient={recipient ?? ''} - onActivate={() => { - handleOutputType('0.002'); - }} + onActivate={handleActivateSolanaAccount} /> diff --git a/apps/web/src/store/swap/hooks.ts b/apps/web/src/store/swap/hooks.ts index 1162b6667..808fa5d00 100644 --- a/apps/web/src/store/swap/hooks.ts +++ b/apps/web/src/store/swap/hooks.ts @@ -100,14 +100,17 @@ export function useSwapActionHandlers() { [dispatch], ); - return { - onSwitchTokens, - onCurrencySelection, - onUserInput, - onChangeRecipient, - onPercentSelection, - onChainSelection, - }; + return useMemo( + () => ({ + onSwitchTokens, + onCurrencySelection, + onUserInput, + onChangeRecipient, + onPercentSelection, + onChainSelection, + }), + [onSwitchTokens, onCurrencySelection, onUserInput, onChangeRecipient, onPercentSelection, onChainSelection], + ); } // try to parse a user entered amount for a given token @@ -445,27 +448,59 @@ export function useDerivedSwapInfo(): { inputError = t`Swap`; } - return { - account, - trade, - currencies, - _currencies, - currencyBalances, - parsedAmount, - inputError, - percents, - price, - direction, - dependentField, - parsedAmounts, - formattedAmounts, - canBridge, - maximumBridgeAmount, - stellarValidation, - stellarTrustlineValidation, - maximumOutputAmount, - canSwap, - }; + // Memoize the direction object + const memoizedDirection = useMemo( + () => ({ + from: currencies[Field.INPUT]?.xChainId || '0x1.icon', + to: currencies[Field.OUTPUT]?.xChainId || '0x1.icon', + }), + [currencies[Field.INPUT]?.xChainId, currencies[Field.OUTPUT]?.xChainId], + ); + + return useMemo( + () => ({ + account, + trade, + currencies, + _currencies, + currencyBalances, + parsedAmount, + inputError, + percents, + price, + direction: memoizedDirection, + dependentField, + parsedAmounts, + formattedAmounts, + canBridge, + maximumBridgeAmount, + stellarValidation, + stellarTrustlineValidation, + maximumOutputAmount, + canSwap, + }), + [ + account, + trade, + currencies, + _currencies, + currencyBalances, + parsedAmount, + inputError, + percents, + price, + memoizedDirection, + dependentField, + parsedAmounts, + formattedAmounts, + canBridge, + maximumBridgeAmount, + stellarValidation, + stellarTrustlineValidation, + maximumOutputAmount, + canSwap, + ], + ); } export function useInitialSwapLoad(): void { @@ -624,13 +659,23 @@ export function useDerivedMMTradeInfo(trade: Trade convert(outputCurrency?.wrapped, trade?.outputAmount), + [outputCurrency, trade?.outputAmount], + ); + const swapInput = useMemo( + () => convert(inputCurrency?.wrapped, trade?.inputAmount), + [inputCurrency, trade?.inputAmount], + ); - return { - isMMBetter: isExactInput + return useMemo(() => { + const isMMBetter = isExactInput ? mmTrade?.outputAmount && (swapOutput ? mmTrade.outputAmount.greaterThan(swapOutput) : true) - : mmTrade?.inputAmount && (swapInput ? mmTrade.inputAmount.lessThan(swapInput) : true), - trade: mmTrade, - }; + : mmTrade?.inputAmount && (swapInput ? mmTrade.inputAmount.lessThan(swapInput) : true); + + return { + isMMBetter, + trade: mmTrade, + }; + }, [isExactInput, mmTrade, swapOutput, swapInput]); }