Commit c55e1af1 authored by eddie's avatar eddie Committed by GitHub

fix: reset confirm trade modal state when chain switches (#6667)

<!-- Your PR title must follow conventional commits: https://github.com/Uniswap/interface#pr-title -->

## Description
<!-- Summary of change, including motivation and context. -->
<!-- Use verb-driven language: "Fixes XYZ" instead of "This change fixes XYZ" -->

Resets the swap component's local state when the chain changes, to fix Confirmation Modal behavior


<!-- Delete inapplicable lines: -->
_Linear ticket:_ https://linear.app/uniswap/issue/WEB-2161/wonky-swap-modal-behavior-after-switching-chains
_Slack thread:_ https://uniswapteam.slack.com/archives/C047U65H422/p1685467094162069?thread_ts=1685459249.400839&cid=C047U65H422


<!-- Delete this section if your change does not affect UI. -->
## Screen capture

### Before

https://github.com/Uniswap/interface/assets/66155195/115e243a-858b-490d-be9e-269174cc7561


### After

https://github.com/Uniswap/interface/assets/66155195/a47b3606-08ac-490f-abc8-01acf2423efb 



## Test plan

<!-- Delete this section if your change is not a bug fix. -->
### Reproducing the error

<!-- Include steps to reproduce the bug. -->
1. swap on a l2
2. via the metamask extension (or in whatever wallet), trigger a chain-change event (e.g. from optimism to mainnet)
    a. this does not repro if you change chains from within the app selector.
4. fill in the input details for a new trade (ideally with different tokens so you can notice the bug easily)
5. see that the Confirm Swap modal opens automatically when it shouldn't, and it has the wrong trade details

### QA (ie manual testing)

<!-- Include steps to test the change, ensuring no regression. -->
- [x] same steps as above, ensuring the modal behaves correctly 


#### Devices
<!-- If applicable, include different devices and screen sizes that may be affected, and how you've tested them. -->


### Automated testing

<!-- If N/A, check and note so it is obvious to your reviewers and does not show up as an incomplete task. -->
<!-- eg - [x] Unit test N/A -->
- [ ] Unit test
- [ ] Integration/E2E test
parent 87cbd1ab
...@@ -252,6 +252,13 @@ export function Swap({ ...@@ -252,6 +252,13 @@ export function Swap({
outputCurrencyId: combinedInitialState.OUTPUT.currencyId ?? undefined, outputCurrencyId: combinedInitialState.OUTPUT.currencyId ?? undefined,
}) })
) )
// reset local state
setSwapState({
tradeToConfirm: undefined,
swapError: undefined,
showConfirm: false,
txHash: undefined,
})
} }
}, [connectedChainId, prefilledState, previousConnectedChainId, previousPrefilledState]) }, [connectedChainId, prefilledState, previousConnectedChainId, previousPrefilledState])
...@@ -337,13 +344,11 @@ export function Swap({ ...@@ -337,13 +344,11 @@ export function Swap({
const [{ showConfirm, tradeToConfirm, swapError, txHash }, setSwapState] = useState<{ const [{ showConfirm, tradeToConfirm, swapError, txHash }, setSwapState] = useState<{
showConfirm: boolean showConfirm: boolean
tradeToConfirm?: InterfaceTrade tradeToConfirm?: InterfaceTrade
attemptingTxn: boolean
swapError?: Error swapError?: Error
txHash?: string txHash?: string
}>({ }>({
showConfirm: false, showConfirm: false,
tradeToConfirm: undefined, tradeToConfirm: undefined,
attemptingTxn: false,
swapError: undefined, swapError: undefined,
txHash: undefined, txHash: undefined,
}) })
...@@ -397,7 +402,6 @@ export function Swap({ ...@@ -397,7 +402,6 @@ export function Swap({
} }
setSwapState((currentState) => ({ setSwapState((currentState) => ({
...currentState, ...currentState,
attemptingTxn: true,
swapError: undefined, swapError: undefined,
txHash: undefined, txHash: undefined,
})) }))
...@@ -405,7 +409,6 @@ export function Swap({ ...@@ -405,7 +409,6 @@ export function Swap({
.then((hash) => { .then((hash) => {
setSwapState((currentState) => ({ setSwapState((currentState) => ({
...currentState, ...currentState,
attemptingTxn: false,
swapError: undefined, swapError: undefined,
txHash: hash, txHash: hash,
})) }))
...@@ -430,7 +433,6 @@ export function Swap({ ...@@ -430,7 +433,6 @@ export function Swap({
.catch((error) => { .catch((error) => {
setSwapState((currentState) => ({ setSwapState((currentState) => ({
...currentState, ...currentState,
attemptingTxn: false,
swapError: error, swapError: error,
txHash: undefined, txHash: undefined,
})) }))
...@@ -701,7 +703,6 @@ export function Swap({ ...@@ -701,7 +703,6 @@ export function Swap({
onClick={() => { onClick={() => {
setSwapState({ setSwapState({
tradeToConfirm: trade, tradeToConfirm: trade,
attemptingTxn: false,
swapError: undefined, swapError: undefined,
showConfirm: true, showConfirm: true,
txHash: undefined, txHash: undefined,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment