Skip to content

Commit b7bd188

Browse files
authored
fix: do not render keyboard when quote reloads after slippage change (MetaMask#25633)
<!-- Please submit this PR as a draft initially. Do not mark it as "Ready for review" until the template has been completely filled out, and PR status checks have passed at least once. --> ## **Description** Do not render keyboard when quote reloads after slippage change <!-- Write a short description of the changes included in this pull request, also include relevant motivation and context. Have in mind the following questions: 1. What is the reason for the change? 2. What is the improvement/solution? --> ## **Changelog** <!-- If this PR is not End-User-Facing and should not show up in the CHANGELOG, you can choose to either: 1. Write `CHANGELOG entry: null` 2. Label with `no-changelog` If this PR is End-User-Facing, please write a short User-Facing description in the past tense like: `CHANGELOG entry: Added a new tab for users to see their NFTs` `CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker` (This helps the Release Engineer do their job more quickly and accurately) --> CHANGELOG entry: do not render keyboard when quote reloads after slippage change ## **Related issues** Fixes: https://consensyssoftware.atlassian.net/browse/SWAPS-3932 ## **Manual testing steps** ```gherkin Feature: my feature name Scenario: user [verb for user action] Given [describe expected initial app state] When user [verb for user action] Then [describe expected outcome] ``` ## **Screenshots/Recordings** <!-- If applicable, add screenshots and/or recordings to visualize the before and after of your change. --> ### **Before** https://github.com/user-attachments/assets/f37ca261-31ca-4c7d-9a18-8e68acb2f113 <!-- [screenshots/recordings] --> ### **After** <!-- [screenshots/recordings] --> ## **Pre-merge author checklist** - [x] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile Coding Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md). - [x] I've completed the PR template to the best of my ability - [x] I've included tests if applicable - [x] I've documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [x] I've applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **Pre-merge reviewer checklist** - [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.
1 parent 65f1d33 commit b7bd188

2 files changed

Lines changed: 51 additions & 1 deletion

File tree

app/components/UI/Bridge/Views/BridgeView/BridgeView.view.test.tsx

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -214,6 +214,52 @@ describeForPlatforms('BridgeView', () => {
214214
expect(await findByText(expected)).toBeOnTheScreen();
215215
});
216216

217+
it('hides keypad when refreshing quote with input unfocused', () => {
218+
const now = Date.now();
219+
const previousQuote = { ...mockQuoteWithMetadata };
220+
221+
const { queryByTestId } = renderBridgeView({
222+
deterministicFiat: true,
223+
overrides: {
224+
bridge: {
225+
sourceAmount: '1',
226+
sourceToken: {
227+
address: '0x0000000000000000000000000000000000000000',
228+
chainId: '0x1',
229+
decimals: 18,
230+
symbol: 'ETH',
231+
name: 'Ether',
232+
},
233+
destToken: {
234+
address: '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48',
235+
chainId: '0x1',
236+
decimals: 6,
237+
symbol: 'USDC',
238+
name: 'USD Coin',
239+
},
240+
},
241+
engine: {
242+
backgroundState: {
243+
BridgeController: {
244+
quotes: [previousQuote as unknown as Record<string, unknown>],
245+
recommendedQuote: previousQuote as unknown as Record<
246+
string,
247+
unknown
248+
>,
249+
quotesLastFetched: now - 1000,
250+
quotesLoadingStatus: 'LOADING',
251+
quoteFetchError: null,
252+
},
253+
},
254+
},
255+
} as unknown as Record<string, unknown>,
256+
});
257+
258+
// Keypad should NOT be visible when refreshing quote with valid inputs and unfocused input
259+
// This simulates the scenario after user changes slippage - quote is loading but input is not focused
260+
expect(queryByTestId(BuildQuoteSelectors.KEYPAD_DELETE_BUTTON)).toBeNull();
261+
});
262+
217263
it('navigates to dest token selector on press', async () => {
218264
const TokenSelectorProbe: React.FC<{
219265
route?: { params?: { type?: string } };

app/components/UI/Bridge/Views/BridgeView/index.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -257,8 +257,12 @@ const BridgeView = () => {
257257
const isError = isNoQuotesAvailable || quoteFetchError;
258258

259259
// Primary condition for keypad visibility - when input is focused or we don't have valid inputs
260+
// Also hide the keypad when a new quote is loading and input field is not focused like after
261+
// user changing the slippage value.
260262
const shouldDisplayKeypad =
261-
isInputFocused || !hasValidBridgeInputs || (!activeQuote && !isError);
263+
isInputFocused ||
264+
!hasValidBridgeInputs ||
265+
(!activeQuote && !isError && !isLoading);
262266
// Hide quote whenever the keypad is displayed
263267
const shouldDisplayQuoteDetails = activeQuote && !shouldDisplayKeypad;
264268

0 commit comments

Comments
 (0)