From 2eeea09cf96358a4a07d8253e4549650bab51506 Mon Sep 17 00:00:00 2001 From: Matias Poblete Date: Wed, 21 Aug 2024 11:18:17 -0400 Subject: [PATCH 1/3] =?UTF-8?q?=F0=9F=A9=B9Fix=20unhandled=20error=20that?= =?UTF-8?q?=20collapses=20the=20app=20when=20customSlippage=20is=20set?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Settings/MaxSlippageSettings/index.tsx | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/src/components/Settings/MaxSlippageSettings/index.tsx b/src/components/Settings/MaxSlippageSettings/index.tsx index 603199cd..286c9c0d 100644 --- a/src/components/Settings/MaxSlippageSettings/index.tsx +++ b/src/components/Settings/MaxSlippageSettings/index.tsx @@ -103,15 +103,16 @@ export default function MaxSlippageSettings({ autoSlippage }: { autoSlippage: nu function setCustomSlippage() { // When switching to custom slippage, use `auto` value as a default. - setUserSlippageTolerance(autoSlippage); selectSlippageInput(); } - const removeTrailingZeroes = (num: number) => { - return num + const removeTrailingZeroes = (num: number | SlippageTolerance.Auto) => { + if (num === SlippageTolerance.Auto) return; + const parsedNum = num .toFixed(2) .toString() .replace(/0{1,}$/, ''); + return parsedNum[parsedNum.length - 1] === '.' ? parsedNum.slice(0, -1) : parsedNum; }; useEffect(function () { @@ -139,8 +140,8 @@ export default function MaxSlippageSettings({ autoSlippage }: { autoSlippage: nu } button={ - - {isAuto ? <>Auto : `${removeTrailingZeroes(userSlippageTolerance)}%`} + + {isAuto ? 'Auto' : `${removeTrailingZeroes(userSlippageTolerance)}%`} } > @@ -173,11 +174,11 @@ export default function MaxSlippageSettings({ autoSlippage }: { autoSlippage: nu onChange={(e) => parseSlippageInput(e.target.value)} onBlur={() => { // When the input field is blurred, reset the input field to the default value - setSlippageInput(DEFAULT_SLIPPAGE_INPUT_VALUE); - setSlippageError(false); + //setSlippageInput(DEFAULT_SLIPPAGE_INPUT_VALUE); + //setSlippageError(false); }} onFocus={setCustomSlippage} - type="number" + type="text" step="0.1" /> % From 0bc5f2579bd00095510fb4adc27a4833887940cb Mon Sep 17 00:00:00 2001 From: Matias Poblete Date: Wed, 21 Aug 2024 16:44:42 -0400 Subject: [PATCH 2/3] =?UTF-8?q?=E2=9C=85Add=20tests=20to=20slippage=20conf?= =?UTF-8?q?igs?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- cypress/e2e/flows.test.ts | 67 +++++++++++++++---- .../Settings/MaxSlippageSettings/index.tsx | 8 +-- 2 files changed, 58 insertions(+), 17 deletions(-) diff --git a/cypress/e2e/flows.test.ts b/cypress/e2e/flows.test.ts index c8826067..3e4625b7 100644 --- a/cypress/e2e/flows.test.ts +++ b/cypress/e2e/flows.test.ts @@ -133,19 +133,12 @@ describe('Select tokens & input amount', () => { describe('Input & output amount validation', () => { it('should type an input amount & wait for output amount', () => { cy.visit('/swap'); - //Select input asset -/* cy.get('[data-testid="swap__input__panel"]').within(() => { - cy.get('[data-testid="swap__token__select"]').click(); - }); - cy.get('[data-testid="currency__list__XLM"]').click(); - */ //Select output asset cy.get('[data-testid="swap__output__panel"]').within(() => { cy.get('[data-testid="swap__token__select"]').click(); }); - cy.get('[data-testid="token-search-input"]').type('ngnt'); - cy.get('[data-testid="currency__list__NGNT"]').click(); - + cy.get('[data-testid="token-search-input"]').type('usdc'); + cy.get('[data-testid="currency__list__USDC"]').click(); //Input amount cy.get('[data-testid="swap__input__panel"]').within(() => { @@ -168,8 +161,8 @@ describe('Input & output amount validation', () => { cy.get('[data-testid="swap__input__panel"]').within(() => { cy.get('[data-testid="swap__token__select"]').click(); }); - cy.get('[data-testid="token-search-input"]').type('ngnt'); - cy.get('[data-testid="currency__list__NGNT"]').click(); + cy.get('[data-testid="token-search-input"]').type('usdc'); + cy.get('[data-testid="currency__list__USDC"]').click(); //Input amount cy.get('[data-testid="swap__output__panel"]').within(() => { cy.get('.token-amount-input').type('{backspace}'); @@ -179,14 +172,62 @@ describe('Input & output amount validation', () => { cy.wait(2500); cy.screenshot() cy.get('[data-testid="swap-input-input-panel"]').invoke('val').then((inputAmount: any)=>{ - const belowOutput = Math.floor(parseFloat(outputAmount) * 0.9); - const aboveOutput = Math.ceil(parseFloat(outputAmount) * 1.1); + const belowOutput = Math.floor(parseFloat(outputAmount) * 0.5); + const aboveOutput = Math.ceil(parseFloat(outputAmount) * 1.5); expect(parseFloat(inputAmount)).within(belowOutput, aboveOutput) }) }) }) }); + +describe('Slippage tolerance config', ()=>{ + it('should change slippage tolerance', ()=>{ + cy.visit('/swap'); + cy.get('[data-testid="open-settings-dialog-button"]').click(); + cy.get('[data-testid="max-slippage-settings"]').click(); + cy.get('[data-testid="slippage-input"]').type('1.05'); + cy.get('[data-testid="max-slippage-settings"]').contains('1.05%'); + }) + it('Show display an alert if slippage is too high', ()=>{ + cy.visit('/swap'); + cy.get('[data-testid="open-settings-dialog-button"]').click(); + cy.get('[data-testid="max-slippage-settings"]').click(); + cy.get('[data-testid="slippage-input"]').type('10'); + cy.get('[data-testid="max-slippage-settings"]').contains('10%'); + cy.get('[data-testid="slippage-alert"]').should('exist'); + cy.get('[data-testid="slippage-alert-too-high"]').should('exist'); + }) + it('Show display an alert if slippage is too low', ()=>{ + cy.visit('/swap'); + cy.get('[data-testid="open-settings-dialog-button"]').click(); + cy.get('[data-testid="max-slippage-settings"]').click(); + cy.get('[data-testid="slippage-input"]').type('0.01'); + cy.get('[data-testid="max-slippage-settings"]').contains('0.01%'); + cy.get('[data-testid="slippage-alert"]').should('exist'); + cy.get('[data-testid="slippage-alert-too-low"]').should('exist'); + }) + it('should keep the slippage tolerance after closing the settings', ()=>{ + cy.visit('/swap'); + cy.get('[data-testid="open-settings-dialog-button"]').click(); + cy.get('[data-testid="max-slippage-settings"]').click(); + cy.get('[data-testid="slippage-input"]').type('1.05'); + cy.get('[data-testid="open-settings-dialog-button"]').click(); + cy.get('[data-testid="max-slippage-settings"]').should('not.exist'); + cy.get('[data-testid="open-settings-dialog-button"]').click(); + cy.get('[data-testid="max-slippage-settings"]').should('exist') + cy.get('[data-testid="max-slippage-settings"]').contains('1.05%'); + }) + it('Should set the slippage tolerance to auto when pressing "auto" button', ()=>{ + cy.visit('/swap'); + cy.get('[data-testid="open-settings-dialog-button"]').click(); + cy.get('[data-testid="max-slippage-settings"]').click(); + cy.get('[data-testid="slippage-input"]').type('1.05'); + cy.get('[data-testid="max-slippage-settings"]').contains('1.05%'); + cy.get('[data-testid="slippage-auto-button"]').click(); + cy.get('[data-testid="max-slippage-settings"]').contains('Auto'); + }) +}) // Navigation flow describe('Navigation flow', () => { it('should render the navbar', () => { diff --git a/src/components/Settings/MaxSlippageSettings/index.tsx b/src/components/Settings/MaxSlippageSettings/index.tsx index 286c9c0d..77facf7f 100644 --- a/src/components/Settings/MaxSlippageSettings/index.tsx +++ b/src/components/Settings/MaxSlippageSettings/index.tsx @@ -155,7 +155,7 @@ export default function MaxSlippageSettings({ autoSlippage }: { autoSlippage: nu }} isActive={isAuto} > - + Auto @@ -186,14 +186,14 @@ export default function MaxSlippageSettings({ autoSlippage }: { autoSlippage: nu {tooLow || tooHigh ? ( - + {tooLow ? ( -
+
Slippage below {MINIMUM_RECOMMENDED_SLIPPAGE.toFixed(2)}% may result in a failed transaction
) : ( -
Your transaction may be frontrun and result in an unfavorable trade.
+
Your transaction may be frontrun and result in an unfavorable trade.
)} From efc4ca7a13572b641ae19a0fdcf868da1982a302 Mon Sep 17 00:00:00 2001 From: Matias Poblete Date: Wed, 21 Aug 2024 16:51:02 -0400 Subject: [PATCH 3/3] =?UTF-8?q?=F0=9F=94=A5Removed=20unused=20screenshots?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- cypress/e2e/flows.test.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/cypress/e2e/flows.test.ts b/cypress/e2e/flows.test.ts index 3e4625b7..d6bc8184 100644 --- a/cypress/e2e/flows.test.ts +++ b/cypress/e2e/flows.test.ts @@ -146,7 +146,6 @@ describe('Input & output amount validation', () => { }); //await for calcs cy.wait(5000); - cy.screenshot() //Get the output amount cy.get('[data-testid="swap-output-input-panel"]').invoke('val').as('outputAmount'); //Get the input amount @@ -170,7 +169,6 @@ describe('Input & output amount validation', () => { cy.get('.token-amount-input').type('1'); }); cy.wait(2500); - cy.screenshot() cy.get('[data-testid="swap-input-input-panel"]').invoke('val').then((inputAmount: any)=>{ const belowOutput = Math.floor(parseFloat(outputAmount) * 0.5); const aboveOutput = Math.ceil(parseFloat(outputAmount) * 1.5);