Skip to content

Commit

Permalink
merged
Browse files Browse the repository at this point in the history
  • Loading branch information
@esteblock
esteblock committed Sep 3, 2024
2 parents 67cb23d + 54ac337 commit a0d187f
Show file tree
Hide file tree
Showing 7 changed files with 255 additions and 168 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
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
"@scio-labs/use-inkathon": "^0.8.1",
"@soroban-react/chains": "9.1.13",
"@soroban-react/connect-button": "9.1.13",
"@soroban-react/contracts": "9.1.13",
"@soroban-react/contracts": "9.2.2",
"@soroban-react/core": "9.1.13",
"@soroban-react/events": "9.1.13",
"@soroban-react/freighter": "9.1.13",
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
84 changes: 13 additions & 71 deletions src/components/Swap/AdvancedSwapDetails.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { BodySmall } from 'components/Text';
import React from 'react';
import { BodySmall, } from 'components/Text';
import { Box, styled } from 'soroswap-ui';
import { ChevronRight } from '@mui/icons-material';
import { useSorobanReact } from '@soroban-react/core';
import Column from 'components/Column';
import { LoadingRows } from 'components/Loader/styled';
import CurrencyLogo from 'components/Logo/CurrencyLogo';
Expand All @@ -10,19 +9,11 @@ import { Separator } from 'components/SearchModal/styleds';
import { MouseoverTooltip } from 'components/Tooltip';
import { formatTokenAmount } from 'helpers/format';
import { useAllTokens } from 'hooks/tokens/useAllTokens';
import { findToken } from 'hooks/tokens/useToken';
import React, { useEffect, useState } from 'react';
import { Percent } from 'soroswap-router-sdk';
import { InterfaceTrade, PlatformType } from 'state/routing/types';
import SwapPathComponent from './SwapPathComponent';
import { InterfaceTrade } from 'state/routing/types';

export const PathBox = styled(Box)`
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
`;

interface AdvancedSwapDetailsProps {
export interface AdvancedSwapDetailsProps {
trade: InterfaceTrade | undefined;
allowedSlippage: number;
syncing?: boolean;
Expand Down Expand Up @@ -63,6 +54,13 @@ export const formattedPriceImpact = (priceImpact: Percent | Number | undefined)
return `~${priceImpact?.toFixed(2)}%`;
};

export const FormattedProtocolName = (protocol: string) => {
return protocol.charAt(0).toUpperCase() + protocol.slice(1);
}
export const calculatePercentage = (parts: number, totalParts: number) => {
return (parts / totalParts) * 100;
}

export function AdvancedSwapDetails({
trade,
allowedSlippage,
Expand All @@ -72,42 +70,8 @@ export function AdvancedSwapDetails({
// const { chainId } = useWeb3React()
// const nativeCurrency = useNativeCurrency(chainId)
// const txCount = getTransactionCount(trade)
const sorobanContext = useSorobanReact();
const { tokensAsMap, isLoading } = useAllTokens();

const [pathArray, setPathArray] = useState<string[]>([]);

const [pathTokensIsLoading, setPathTokensIsLoading] = useState(false);

useEffect(() => {
(async () => {
if (!trade?.path || isLoading) return;
if (trade.platform == PlatformType.ROUTER) {
setPathTokensIsLoading(true);
const promises = trade.path.map(async (contract) => {
const asset = await findToken(contract, tokensAsMap, sorobanContext);
const code = asset?.code == 'native' ? 'XLM' : asset?.code;
return code;
});
const results = await Promise.allSettled(promises);

const fulfilledValues = results
.filter((result) => result.status === 'fulfilled' && result.value)
.map((result) => (result.status === 'fulfilled' && result.value ? result.value : ''));
setPathArray(fulfilledValues);
setPathTokensIsLoading(false);
} else if (trade.platform == PlatformType.STELLAR_CLASSIC) {
setPathTokensIsLoading(true);
const codes = trade.path.map((address) => {
if (address == 'native') return 'XLM';
return address.split(':')[0];
});
setPathArray(codes);
setPathTokensIsLoading(false);
}
})();
}, [trade?.path, isLoading, sorobanContext]);

return (
<Column gap="md">
<Separator />
Expand Down Expand Up @@ -160,29 +124,7 @@ export function AdvancedSwapDetails({
</BodySmall>
</TextWithLoadingPlaceholder>
</RowBetween>
{
<RowBetween>
<RowFixed>
<MouseoverTooltip
title={`
Routing through these assets resulted in the best price for your trade
`}
>
<BodySmall color="textSecondary">Path</BodySmall>
</MouseoverTooltip>
</RowFixed>
<TextWithLoadingPlaceholder syncing={pathTokensIsLoading} width={100}>
<PathBox data-testid="swap__details__path">
{pathArray?.map((contract, index) => (
<React.Fragment key={index}>
{contract}
{index !== pathArray.length - 1 && <ChevronRight style={{ opacity: '50%' }} />}
</React.Fragment>
))}
</PathBox>
</TextWithLoadingPlaceholder>
</RowBetween>
}
<SwapPathComponent trade={trade} />
{trade?.platform && (
<RowBetween>
<MouseoverTooltip title={'The platform where the swap will be made.'}>
Expand Down
Loading

0 comments on commit a0d187f

Please sign in to comment.