Skip to content

Commit

Permalink
Merge branch 'main' of https://github.com/soroswap/frontend into dev/…
Browse files Browse the repository at this point in the history 
…lit-collective
  • Loading branch information
@MattPoblete
MattPoblete committed Aug 5, 2024
2 parents ab389e1 + 95c44b2 commit f6b8d74
Show file tree
Hide file tree
Showing 13 changed files with 800 additions and 237 deletions.
21 changes: 17 additions & 4 deletions cypress/e2e/flows.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ describe('Bridge flow', () => {
});

// Swap flow
describe('Select tokens & input ammount', () => {
describe('Select tokens & input amount', () => {
it('should navigate to swap', () => {
cy.visit('/swap');
cy.contains('You sell');
Expand All @@ -38,7 +38,7 @@ describe('Select tokens & input ammount', () => {
cy.get('[data-testid="token-search-input"]').type('xlm');
cy.get('[data-testid="currency__list__XLM"]').click();
});
it('should type an input ammount & expect for a token out', () => {
it('should type an input amount & wait for output amount', () => {
cy.visit('/swap');
//Select input asset
cy.get('[data-testid="swap__input__panel"]').within(() => {
Expand All @@ -60,7 +60,7 @@ describe('Select tokens & input ammount', () => {
//await for calcs
cy.wait(5000);

//Get the output ammount
//Get the output amount
cy.get('[data-testid="swap__output__panel"]').within(() => {
cy.get('.token-amount-input').invoke('val').as('outputAmount');
});
Expand Down Expand Up @@ -90,7 +90,7 @@ describe('Select tokens & input ammount', () => {
//await for calcs
cy.wait(2500);

//Get the output ammount
//Get the output amount
cy.get('[data-testid="swap__output__panel"]').within(() => {
cy.get('.token-amount-input').invoke('val').as('outputAmount');
});
Expand All @@ -111,6 +111,19 @@ describe('Select tokens & input ammount', () => {
cy.get('@priceImpact').should('exist');
cy.get('@expectedOutput').should('exist');
cy.get('@path').should('exist');
cy.contains('Price Impact')
cy.contains('Expected output')
cy.contains('Path')

cy.get('[data-testid="swap__details__priceImpact"]').as('priceImpact')
cy.get('[data-testid="swap__details__expectedOutput"]').as('expectedOutput')
cy.get('[data-testid="swap__details__path"]').as('path')
cy.get('[data-testid="swap__details__platform"]').as('platform')

cy.get('@priceImpact').should('exist')
cy.get('@expectedOutput').should('exist')
cy.get('@path').should('exist')
cy.get('@platform').should('exist')

cy.get('@priceImpact').contains('%');
cy.get('@expectedOutput').contains('XLM');
Expand Down
30 changes: 15 additions & 15 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,21 +26,21 @@
"@polkadot/types": "^10.12.6",
"@reduxjs/toolkit": "^2.2.1",
"@scio-labs/use-inkathon": "^0.8.1",
"@soroban-react/chains": "9.1.12",
"@soroban-react/connect-button": "9.1.12",
"@soroban-react/contracts": "9.1.12",
"@soroban-react/core": "9.1.12",
"@soroban-react/events": "9.1.12",
"@soroban-react/freighter": "9.1.12",
"@soroban-react/hana": "9.1.12",
"@soroban-react/lobstr": "9.1.12",
"@soroban-react/types": "9.1.12",
"@soroban-react/utils": "9.1.12",
"@soroban-react/wallet-data": "9.1.12",
"@soroban-react/xbull": "9.1.12",
"@soroban-react/chains": "9.1.13",
"@soroban-react/connect-button": "9.1.13",
"@soroban-react/contracts": "9.1.13",
"@soroban-react/core": "9.1.13",
"@soroban-react/events": "9.1.13",
"@soroban-react/freighter": "9.1.13",
"@soroban-react/hana": "9.1.13",
"@soroban-react/lobstr": "9.1.13",
"@soroban-react/types": "9.1.13",
"@soroban-react/utils": "9.1.13",
"@soroban-react/wallet-data": "9.1.13",
"@soroban-react/xbull": "9.1.13",
"@stellar/freighter-api": "1.7.1",
"@stellar/frontend-helpers": "^2.1.4",
"@stellar/stellar-sdk": "11.3.0",
"@stellar/stellar-sdk": "12.2.0",
"@types/qs": "^6.9.7",
"@types/react": "18.2.33",
"@types/react-dom": "18.2.14",
Expand Down Expand Up @@ -73,7 +73,7 @@
"react-virtualized-auto-sizer": "^1.0.20",
"react-window": "^1.8.9",
"redux": "^4.2.1",
"soroswap-router-sdk": "^1.2.9",
"soroswap-router-sdk": "^1.2.10",
"soroswap-ui": "^1.0.0",
"swr": "^2.2.0",
"typescript": "5.3.3",
Expand Down Expand Up @@ -106,4 +106,4 @@
"src"
]
}
}
}
56 changes: 35 additions & 21 deletions src/components/Swap/AdvancedSwapDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ 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 } from 'state/routing/types';
import { InterfaceTrade, PlatformType } from 'state/routing/types';

export const PathBox = styled(Box)`
display: flex;
Expand Down Expand Up @@ -47,7 +47,7 @@ export function TextWithLoadingPlaceholder({
);
}

export const formattedPriceImpact = (priceImpact: Percent | undefined) => {
export const formattedPriceImpact = (priceImpact: Percent | Number | undefined) => {
if (!priceImpact) return 0;

const value = priceImpact?.toFixed(3);
Expand Down Expand Up @@ -82,23 +82,29 @@ export function AdvancedSwapDetails({
useEffect(() => {
(async () => {
if (!trade?.path || isLoading) return;

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);
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]);

Expand All @@ -108,12 +114,12 @@ export function AdvancedSwapDetails({
{networkFees != 0 && (
<RowBetween>
<MouseoverTooltip
title={'The fee paid to miners who process your transaction. This must be paid in XLM.'}
title={'The fee paid to process your transaction. This must be paid always in XLM.'}
>
<BodySmall color="textSecondary">Network fee</BodySmall>
</MouseoverTooltip>
<TextWithLoadingPlaceholder syncing={syncing} width={50}>
<BodySmall>~{networkFees} XLM</BodySmall>
<BodySmall display={'flex'}>~{networkFees} XLM</BodySmall>
</TextWithLoadingPlaceholder>
</RowBetween>
)}
Expand Down Expand Up @@ -177,6 +183,14 @@ export function AdvancedSwapDetails({
</TextWithLoadingPlaceholder>
</RowBetween>
}
{trade?.platform && (
<RowBetween>
<MouseoverTooltip title={'The platform where the swap will be made.'}>
<BodySmall color="textSecondary">Platform</BodySmall>
</MouseoverTooltip>
<BodySmall data-testid="swap__details__platform">{trade.platform}</BodySmall>
</RowBetween>
)}
</Column>
);
}
50 changes: 32 additions & 18 deletions src/components/Swap/SwapModalFooter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import useGetReservesByPair from 'hooks/useGetReservesByPair';
import { getSwapAmounts } from 'hooks/useSwapCallback';
import React, { ReactNode, useEffect, useState } from 'react';
import { AlertTriangle, ChevronRight } from 'react-feather';
import { InterfaceTrade, TradeType } from 'state/routing/types';
import { InterfaceTrade, PlatformType, TradeType } from 'state/routing/types';
import { PathBox, TextWithLoadingPlaceholder, formattedPriceImpact } from './AdvancedSwapDetails';
import { Label } from './SwapModalHeaderAmount';
import { getExpectedAmountOfOne } from './TradePrice';
Expand Down Expand Up @@ -107,23 +107,29 @@ export default function SwapModalFooter({
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);

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);
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]);

Expand All @@ -148,7 +154,7 @@ export default function SwapModalFooter({
>
<Label cursor="help">Network fees</Label>
</MouseoverTooltip>
<DetailRowValue>~{networkFees} XML</DetailRowValue>
<DetailRowValue display={'flex'}>~{networkFees}{' '}XML</DetailRowValue>
{/* <MouseoverTooltip placement="right" title={'<GasBreakdownTooltip trade={trade} />'}>
</MouseoverTooltip> */}
</Row>
Expand Down Expand Up @@ -220,6 +226,14 @@ export default function SwapModalFooter({
</PathBox>
</TextWithLoadingPlaceholder>
</RowBetween>
{trade?.platform && (
<RowBetween>
<MouseoverTooltip title={'The platform where the swap will be made.'}>
<Label>Platform</Label>
</MouseoverTooltip>
<BodySmall data-testid="swap__details__platform">{trade.platform}</BodySmall>
</RowBetween>
)}
</DetailsContainer>
{showAcceptChanges ? (
<SwapShowAcceptChanges data-testid="show-accept-changes">
Expand Down
Loading

0 comments on commit f6b8d74

Please sign in to comment.