From 4c6e099f02273d8ea84c88e6e3a6cc97fbd1ea49 Mon Sep 17 00:00:00 2001 From: Micaela Estabillo Date: Tue, 11 Feb 2025 18:05:23 -0800 Subject: [PATCH 1/3] chore: hide network selector in Swaps asset picker --- .../controllers/bridge/bridge-controller.ts | 4 +- .../bridge/prepare/prepare-bridge-page.tsx | 113 ++++++++++-------- 2 files changed, 64 insertions(+), 53 deletions(-) diff --git a/app/scripts/controllers/bridge/bridge-controller.ts b/app/scripts/controllers/bridge/bridge-controller.ts index 90a2a4dee193..27d7f230805d 100644 --- a/app/scripts/controllers/bridge/bridge-controller.ts +++ b/app/scripts/controllers/bridge/bridge-controller.ts @@ -207,9 +207,7 @@ export default class BridgeController extends StaticIntervalPollingController
{ this.#abortController?.abort('New quote request'); this.#abortController = new AbortController(); - if (updatedQuoteRequest.srcChainId === updatedQuoteRequest.destChainId) { - return; - } + const { bridgeState } = this.state; this.update((_state) => { _state.bridgeState = { diff --git a/ui/pages/bridge/prepare/prepare-bridge-page.tsx b/ui/pages/bridge/prepare/prepare-bridge-page.tsx index affc55ccde9f..609d202cf3db 100644 --- a/ui/pages/bridge/prepare/prepare-bridge-page.tsx +++ b/ui/pages/bridge/prepare/prepare-bridge-page.tsx @@ -178,6 +178,8 @@ const PrepareBridgePage = () => { const millisecondsUntilNextRefresh = useCountdownTimer(); + const isSwap = useIsMultichainSwap(); + const [rotateSwitchTokens, setRotateSwitchTokens] = useState(false); // Resets the banner visibility when the estimated return is low @@ -275,9 +277,10 @@ const PrepareBridgePage = () => { srcChainId: fromChain?.chainId ? Number(hexToDecimal(fromChain.chainId)) : undefined, - destChainId: toChain?.chainId - ? Number(hexToDecimal(toChain.chainId)) - : undefined, + destChainId: + isSwap && fromChain?.chainId + ? Number(hexToDecimal(fromChain.chainId)) + : toChain?.chainId && Number(hexToDecimal(toChain.chainId)), // This override allows quotes to be returned when the rpcUrl is a tenderly fork // Otherwise quotes get filtered out by the bridge-api when the wallet's real // balance is less than the tenderly balance @@ -285,6 +288,7 @@ const PrepareBridgePage = () => { slippage, }), [ + isSwap, fromToken, toToken, fromChain?.chainId, @@ -366,8 +370,6 @@ const PrepareBridgePage = () => { } }, [fromChain, fromToken, fromTokens, search, isFromTokensLoading]); - const isSwap = useIsMultichainSwap(); - return ( { value: token.address, }); }} - networkProps={{ - network: fromChain, - networks: fromChains, - onNetworkChange: (networkConfig) => { - networkConfig.chainId !== fromChain?.chainId && - trackInputEvent({ - input: 'chain_source', - value: networkConfig.chainId, - }); - if (networkConfig.chainId === toChain?.chainId) { - dispatch(setToChainId(null)); - dispatch(setToToken(null)); - } - if (isNetworkAdded(networkConfig)) { - dispatch( - setActiveNetwork( - networkConfig.rpcEndpoints[ - networkConfig.defaultRpcEndpointIndex - ].networkClientId, - ), - ); - } - dispatch(setFromToken(null)); - dispatch(setFromTokenInputValue(null)); - }, - header: t('yourNetworks'), - }} - isMultiselectEnabled + networkProps={ + isSwap + ? undefined + : { + network: fromChain, + networks: fromChains, + onNetworkChange: (networkConfig) => { + networkConfig.chainId !== fromChain?.chainId && + trackInputEvent({ + input: 'chain_source', + value: networkConfig.chainId, + }); + if (networkConfig.chainId === toChain?.chainId) { + dispatch(setToChainId(null)); + dispatch(setToToken(null)); + } + if (isNetworkAdded(networkConfig)) { + dispatch( + setActiveNetwork( + networkConfig.rpcEndpoints[ + networkConfig.defaultRpcEndpointIndex + ].networkClientId, + ), + ); + } + dispatch(setFromToken(null)); + dispatch(setFromTokenInputValue(null)); + }, + header: t('yourNetworks'), + } + } + isMultiselectEnabled={!isSwap} onMaxButtonClick={(value: string) => { dispatch(setFromTokenInputValue(value)); }} @@ -505,23 +511,30 @@ const PrepareBridgePage = () => { }); dispatch(setToToken(token)); }} - networkProps={{ - network: toChain, - networks: toChains, - onNetworkChange: (networkConfig) => { - networkConfig.chainId !== toChain?.chainId && - trackInputEvent({ - input: 'chain_destination', - value: networkConfig.chainId, - }); - dispatch(setToChainId(networkConfig.chainId)); - dispatch(setToToken(null)); - }, - header: isSwap ? t('swapSwapTo') : t('bridgeTo'), - shouldDisableNetwork: ({ chainId }) => - chainId === fromChain?.chainId, - }} - customTokenListGenerator={toChain ? toTokenListGenerator : undefined} + networkProps={ + isSwap + ? undefined + : { + network: toChain, + networks: toChains, + onNetworkChange: (networkConfig) => { + networkConfig.chainId !== toChain?.chainId && + trackInputEvent({ + input: 'chain_destination', + value: networkConfig.chainId, + }); + dispatch(setToChainId(networkConfig.chainId)); + dispatch(setToToken(null)); + }, + header: isSwap ? t('swapSwapTo') : t('bridgeTo'), + shouldDisableNetwork: ({ chainId }) => + chainId === fromChain?.chainId, + } + } + customTokenListGenerator={ + // TODO use custom generator when we have a way to get all tokens for an unimported chain + toChain && !isSwap ? toTokenListGenerator : undefined + } amountInFiat={ activeQuote?.toTokenAmount?.valueInCurrency || undefined } From 04a514b97600697210e430800087c1d57ac1fffa Mon Sep 17 00:00:00 2001 From: Micaela Estabillo Date: Wed, 12 Feb 2025 14:52:36 -0800 Subject: [PATCH 2/3] fix: show network badge in swap view --- .../bridge/prepare/components/bridge-asset-picker-button.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/pages/bridge/prepare/components/bridge-asset-picker-button.tsx b/ui/pages/bridge/prepare/components/bridge-asset-picker-button.tsx index b04da2b981fa..8296a950f541 100644 --- a/ui/pages/bridge/prepare/components/bridge-asset-picker-button.tsx +++ b/ui/pages/bridge/prepare/components/bridge-asset-picker-button.tsx @@ -68,9 +68,9 @@ export const BridgeAssetPickerButton = ({ From 9efe9f912c086c7d8ec184bd6324c15961f732cc Mon Sep 17 00:00:00 2001 From: Micaela Estabillo Date: Wed, 12 Feb 2025 15:13:47 -0800 Subject: [PATCH 3/3] chore: flip swqp tokens --- .../bridge/prepare/prepare-bridge-page.tsx | 24 +++++++++++-------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/ui/pages/bridge/prepare/prepare-bridge-page.tsx b/ui/pages/bridge/prepare/prepare-bridge-page.tsx index 609d202cf3db..afc6ad6886c1 100644 --- a/ui/pages/bridge/prepare/prepare-bridge-page.tsx +++ b/ui/pages/bridge/prepare/prepare-bridge-page.tsx @@ -474,10 +474,10 @@ const PrepareBridgePage = () => { disabled={ isSwitchingTemporarilyDisabled || !isValidQuoteRequest(quoteRequest, false) || - !isNetworkAdded(toChain) + (!isSwap && !isNetworkAdded(toChain)) } onClick={() => { - if (!isNetworkAdded(toChain)) { + if (!isSwap && !isNetworkAdded(toChain)) { return; } setRotateSwitchTokens(!rotateSwitchTokens); @@ -486,15 +486,19 @@ const PrepareBridgePage = () => { event: MetaMetricsEventName.InputSourceDestinationFlipped, properties: flippedRequestProperties, }); - const toChainClientId = - toChain?.defaultRpcEndpointIndex !== undefined && - toChain?.rpcEndpoints - ? toChain.rpcEndpoints[toChain.defaultRpcEndpointIndex] - .networkClientId - : undefined; - toChainClientId && dispatch(setActiveNetwork(toChainClientId)); + if (!isSwap) { + // Only flip networks if bridging + const toChainClientId = + toChain?.defaultRpcEndpointIndex !== undefined && + toChain?.rpcEndpoints && + isNetworkAdded(toChain) + ? toChain.rpcEndpoints[toChain.defaultRpcEndpointIndex] + .networkClientId + : undefined; + toChainClientId && dispatch(setActiveNetwork(toChainClientId)); + fromChain?.chainId && dispatch(setToChainId(fromChain.chainId)); + } dispatch(setFromToken(toToken)); - fromChain?.chainId && dispatch(setToChainId(fromChain.chainId)); dispatch(setToToken(fromToken)); }} />