Skip to content

Commit

Permalink
Merge pull request #520 from soroswap/fix/unhandledCustomSlippageError
Browse files Browse the repository at this point in the history 
🩹Fix unhandled error that collapses the app when customSlippage is set
  • Loading branch information
@chopan123
chopan123 authored Aug 29, 2024
2 parents b9e9c89 + efc4ca7 commit b918dcc
Show file tree
Hide file tree
Showing 2 changed files with 67 additions and 27 deletions.
69 changes: 54 additions & 15 deletions cypress/e2e/flows.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,27 +133,19 @@ 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(() => {
cy.get('.token-amount-input').type('1');
});
//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
Expand All @@ -168,25 +160,72 @@ 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}');
cy.get('.token-amount-input').type('{backspace}');
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.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', () => {
Expand Down
25 changes: 13 additions & 12 deletions src/components/Settings/MaxSlippageSettings/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 () {
Expand Down Expand Up @@ -139,8 +140,8 @@ export default function MaxSlippageSettings({ autoSlippage }: { autoSlippage: nu
</Row>
}
button={
<Typography color={theme.palette.primary.main}>
{isAuto ? <>Auto</> : `${removeTrailingZeroes(userSlippageTolerance)}%`}
<Typography>
{isAuto ? 'Auto' : `${removeTrailingZeroes(userSlippageTolerance)}%`}
</Typography>
}
>
Expand All @@ -154,7 +155,7 @@ export default function MaxSlippageSettings({ autoSlippage }: { autoSlippage: nu
}}
isActive={isAuto}
>
<Typography color={theme.palette.primary.main} component="div">
<Typography color={theme.palette.primary.main} component="div" data-testid='slippage-auto-button'>
Auto
</Typography>
</Option>
Expand All @@ -173,26 +174,26 @@ 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"
/>
<Typography color={theme.palette.primary.main}>%</Typography>
</InputContainer>
</RowBetween>
{tooLow || tooHigh ? (
<RowBetween gap="md">
<Alert severity="warning">
<Alert severity="warning" data-testid='slippage-alert'>
{tooLow ? (
<div>
<div data-testid='slippage-alert-too-low'>
Slippage below {MINIMUM_RECOMMENDED_SLIPPAGE.toFixed(2)}% may result in a failed
transaction
</div>
) : (
<div>Your transaction may be frontrun and result in an unfavorable trade.</div>
<div data-testid='slippage-alert-too-high'>Your transaction may be frontrun and result in an unfavorable trade.</div>
)}
</Alert>
</RowBetween>
Expand Down

0 comments on commit b918dcc

Please sign in to comment.