Skip to content

Commit

Permalink
Merge branch 'main' of https://github.com/soroswap/frontend into fix/…
Browse files Browse the repository at this point in the history
…checkTrustlinesBeforeSwap
  • Loading branch information
MattPoblete committed Sep 6, 2024
2 parents 6a02d4e + a65ff77 commit 935b421
Show file tree
Hide file tree
Showing 20 changed files with 352 additions and 127 deletions.
5 changes: 5 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -118,6 +118,11 @@ cp .env.production.example .env

You have successfully set up Soroswap on your local machine! Start swapping, pooling, and exploring the possibilities of decentralized finance (DeFi) on the Soroban network.

If you want to add or remove supported protocols, you can do so by editing the `functions/generateRoute.ts:79-97` file and adding or removing the protocols you want to support on swap.

> [!HINT]
> You can found the list of supported protocols in the `soroswap-router-sdk` repository.

## 🧪🔨 Testing 🧪🔨
To execute the tests, you must first start the development container. To do this, run the following command from your host machine:

Expand Down
16 changes: 7 additions & 9 deletions pages/liquidity/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,17 +16,15 @@ import useGetLpTokens from 'hooks/useGetLpTokens';
import { useRouter } from 'next/router';
import { useContext, useState } from 'react';
import SEO from '../../src/components/SEO';
import { DEFAULT_SLIPPAGE_INPUT_VALUE } from 'components/Settings/MaxSlippageSettings';

const PageWrapper = styled(AutoColumn)`
position: relative;
background: ${({ theme }) => `linear-gradient(${theme.palette.customBackground.bg2}, ${
theme.palette.customBackground.bg2
}) padding-box,
linear-gradient(150deg, rgba(136,102,221,1) 0%, rgba(${
theme.palette.mode == 'dark' ? '33,29,50,1' : '255,255,255,1'
}) 35%, rgba(${
theme.palette.mode == 'dark' ? '33,29,50,1' : '255,255,255,1'
}) 65%, rgba(136,102,221,1) 100%) border-box`};
background: ${({ theme }) => `linear-gradient(${theme.palette.customBackground.bg2}, ${theme.palette.customBackground.bg2
}) padding-box,
linear-gradient(150deg, rgba(136,102,221,1) 0%, rgba(${theme.palette.mode == 'dark' ? '33,29,50,1' : '255,255,255,1'
}) 35%, rgba(${theme.palette.mode == 'dark' ? '33,29,50,1' : '255,255,255,1'
}) 65%, rgba(136,102,221,1) 100%) border-box`};
border: 1px solid transparent;
border-radius: 16px;
padding: 32px;
Expand Down Expand Up @@ -108,7 +106,7 @@ export default function LiquidityPage() {
<div style={{ width: '100%' }}>
<AutoRow style={{ justifyContent: 'space-between' }}>
<SubHeader>Your liquidity</SubHeader>
<SettingsTab autoSlippage={0.5} />
<SettingsTab autoSlippage={DEFAULT_SLIPPAGE_INPUT_VALUE} />
</AutoRow>
<div>
<BodySmall>List of your liquidity positions</BodySmall>
Expand Down
13 changes: 5 additions & 8 deletions src/components/Liquidity/Add/AddLiquidityComponent.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,14 +38,11 @@ import AddModalHeader from './AddModalHeader';

export const PageWrapper = styled('main')`
position: relative;
background: ${({ theme }) => `linear-gradient(${theme.palette.customBackground.bg2}, ${
theme.palette.customBackground.bg2
}) padding-box,
linear-gradient(150deg, rgba(136,102,221,1) 0%, rgba(${
theme.palette.mode == 'dark' ? '33,29,50,1' : '255,255,255,1'
}) 35%, rgba(${
theme.palette.mode == 'dark' ? '33,29,50,1' : '255,255,255,1'
}) 65%, rgba(136,102,221,1) 100%) border-box`};
background: ${({ theme }) => `linear-gradient(${theme.palette.customBackground.bg2}, ${theme.palette.customBackground.bg2
}) padding-box,
linear-gradient(150deg, rgba(136,102,221,1) 0%, rgba(${theme.palette.mode == 'dark' ? '33,29,50,1' : '255,255,255,1'
}) 35%, rgba(${theme.palette.mode == 'dark' ? '33,29,50,1' : '255,255,255,1'
}) 65%, rgba(136,102,221,1) 100%) border-box`};
border: 1px solid transparent;
border-radius: 16px;
padding: 32px;
Expand Down
5 changes: 3 additions & 2 deletions src/components/Liquidity/AddRemoveHeader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import Link from 'next/link';
import { ReactNode } from 'react';
import { ArrowLeft, Settings } from 'react-feather';
import { flexRowNoWrap } from 'themes/styles';
import { DEFAULT_SLIPPAGE_INPUT_VALUE } from 'components/Settings/MaxSlippageSettings';

// import Row, { RowBetween } from '../Row'
// import SettingsTab from '../Settings'
Expand All @@ -30,7 +31,7 @@ const Tabs = styled('div')`
justify-content: space-evenly;
`;

const StyledHistoryLink = styled(Link)<{ flex?: string }>`
const StyledHistoryLink = styled(Link) <{ flex?: string }>`
flex: ${({ flex }) => flex ?? 'none'};
`;

Expand Down Expand Up @@ -107,7 +108,7 @@ export function AddRemoveTabs({
</SubHeader>
<Box style={{ marginRight: '.5rem' }}>{children}</Box>
<RowFixed style={{ padding: '6px 12px' }}>
<SettingsTab autoSlippage={0.5} />
<SettingsTab autoSlippage={DEFAULT_SLIPPAGE_INPUT_VALUE} />
</RowFixed>
</RowBetween>
</Tabs>
Expand Down
27 changes: 12 additions & 15 deletions src/components/Liquidity/Remove/RemoveLiquidityComponent.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -32,14 +32,11 @@ import { AddRemoveTabs } from '../AddRemoveHeader';

export const PageWrapper = styled('main')`
position: relative;
background: ${({ theme }) => `linear-gradient(${theme.palette.customBackground.bg2}, ${
theme.palette.customBackground.bg2
}) padding-box,
linear-gradient(150deg, rgba(136,102,221,1) 0%, rgba(${
theme.palette.mode == 'dark' ? '33,29,50,1' : '255,255,255,1'
}) 35%, rgba(${
theme.palette.mode == 'dark' ? '33,29,50,1' : '255,255,255,1'
}) 65%, rgba(136,102,221,1) 100%) border-box`};
background: ${({ theme }) => `linear-gradient(${theme.palette.customBackground.bg2}, ${theme.palette.customBackground.bg2
}) padding-box,
linear-gradient(150deg, rgba(136,102,221,1) 0%, rgba(${theme.palette.mode == 'dark' ? '33,29,50,1' : '255,255,255,1'
}) 35%, rgba(${theme.palette.mode == 'dark' ? '33,29,50,1' : '255,255,255,1'
}) 65%, rgba(136,102,221,1) 100%) border-box`};
border: 1px solid transparent;
border-radius: 16px;
padding: 32px;
Expand All @@ -57,13 +54,13 @@ export const PageWrapper = styled('main')`
}
`;

const StyledTokenName = styled('span')<{ active?: boolean }>`
const StyledTokenName = styled('span') <{ active?: boolean }>`
${({ active }) => (active ? ' margin: 0 0.25rem 0 0.25rem;' : ' margin: 0 0.25rem 0 0.25rem;')}
color: ${({ theme }) => theme.palette.custom.textPrimary};
font-size: 20px;
`;

const Container = styled('div')<{ transparent?: boolean }>`
const Container = styled('div') <{ transparent?: boolean }>`
border-radius: 16px;
padding: 1.25rem;
border: 1px solid ${({ theme }) => theme.palette.custom.textSecondary};
Expand Down Expand Up @@ -390,8 +387,8 @@ export default function RemoveLiquidityComponent() {
>
{currencyA && currencyA.code && currencyA.code.length > 20
? currencyA.code.slice(0, 4) +
'...' +
currencyA.code.slice(currencyA.code.length - 5, currencyA.code.length)
'...' +
currencyA.code.slice(currencyA.code.length - 5, currencyA.code.length)
: currencyA?.code}
</StyledTokenName>
{isLoadingPairInfo ? (
Expand All @@ -412,8 +409,8 @@ export default function RemoveLiquidityComponent() {
>
{currencyB && currencyB.code && currencyB.code.length > 20
? currencyB.code.slice(0, 4) +
'...' +
currencyB.code.slice(currencyB.code.length - 5, currencyB.code.length)
'...' +
currencyB.code.slice(currencyB.code.length - 5, currencyB.code.length)
: currencyB?.code}
</StyledTokenName>
{isLoadingPairInfo ? (
Expand All @@ -438,7 +435,7 @@ export default function RemoveLiquidityComponent() {
</div>
</Column>
</Container>
Slippage Tolerance 0.5%
Slippage Tolerance {allowedSlippage}%
{!sorobanContext.address ? (
<ButtonLight onClick={() => setConnectWalletModalOpen(true)}>{error}</ButtonLight>
) : (
Expand Down
9 changes: 5 additions & 4 deletions src/components/Providers.tsx
Original file line number Diff line number Diff line change
@@ -1,15 +1,14 @@
import { Analytics } from '@vercel/analytics/react';
import { AppContext, AppContextType, ColorModeContext, SnackbarIconType } from 'contexts';
import { CssBaseline, ThemeProvider } from 'soroswap-ui';
import { AppContext, AppContextType, ColorModeContext, SnackbarIconType, ProtocolsStatus } from 'contexts';
import { Provider } from 'react-redux';
import { theme } from 'soroswap-ui';
import { useMemo, useState } from 'react';
import InkathonProvider from 'inkathon/InkathonProvider';
import MainLayout from './Layout/MainLayout';
import MySorobanReactProvider from 'soroban/MySorobanReactProvider';
import store from 'state';
import { SorobanContextType } from '@soroban-react/core';
import { SoroswapThemeProvider } from 'soroswap-ui';

export default function Providers({
children,
sorobanReactProviderProps,
Expand All @@ -20,7 +19,7 @@ export default function Providers({
const [isConnectWalletModal, setConnectWalletModal] = useState<boolean>(false);

const [maxHops, setMaxHops] = useState<number>(2);

const [protocolsStatus, setProtocolsStatus] = useState<ProtocolsStatus[]>([]);
const [openSnackbar, setOpenSnackbar] = useState<boolean>(false);
const [snackbarMessage, setSnackbarMessage] = useState<string>('');
const [snackbarTitle, setSnackbarTitle] = useState<string>('Swapped');
Expand Down Expand Up @@ -54,6 +53,8 @@ export default function Providers({
Settings: {
maxHops,
setMaxHops,
protocolsStatus,
setProtocolsStatus,
},
};

Expand Down
6 changes: 3 additions & 3 deletions src/components/Settings/MaxSlippageSettings/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ enum SlippageError {

const Option = styled(Row, {
shouldForwardProp: (prop) => prop !== 'isActive',
})<{ isActive: boolean }>`
}) <{ isActive: boolean }>`
width: auto;
cursor: pointer;
padding: 6px 12px;
Expand All @@ -37,7 +37,7 @@ const NUMBER_WITH_MAX_TWO_DECIMAL_PLACES = /^(?:\d+(?:\.\d{0,2})?|\.\d{0,2})?$/;
const MINIMUM_RECOMMENDED_SLIPPAGE = 0.05;
const MAXIMUM_RECOMMENDED_SLIPPAGE = 1;

export const DEFAULT_SLIPPAGE_INPUT_VALUE = 0.5;
export const DEFAULT_SLIPPAGE_INPUT_VALUE = 1;

export default function MaxSlippageSettings({ autoSlippage }: { autoSlippage: number }) {
const theme = useTheme();
Expand Down Expand Up @@ -193,7 +193,7 @@ export default function MaxSlippageSettings({ autoSlippage }: { autoSlippage: nu
transaction
</div>
) : (
<div data-testid='slippage-alert-too-high'>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
5 changes: 3 additions & 2 deletions src/components/Settings/MenuButton/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,14 @@ import { styled, useMediaQuery, useTheme } from 'soroswap-ui';
import { Settings } from 'react-feather';
import settingsIcon from '../../../assets/svg/settingsIcon.svg';
import Image from 'next/image';
import { DEFAULT_SLIPPAGE_INPUT_VALUE } from '../MaxSlippageSettings';

const Icon = styled(Settings)`
height: 24px;
width: 24px;
`;

const Button = styled('button')<{ isActive: boolean }>`
const Button = styled('button') <{ isActive: boolean }>`
border: none;
background-color: transparent;
margin: 0;
Expand Down Expand Up @@ -43,7 +44,7 @@ const ButtonContent = () => {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down('md'));

if (userSlippageTolerance === 0.5) {
if (userSlippageTolerance === DEFAULT_SLIPPAGE_INPUT_VALUE) {
return (
<IconContainer>
<Image
Expand Down
133 changes: 133 additions & 0 deletions src/components/Settings/ProtocolsSettings/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,133 @@
import Expand from 'components/Expand';
import QuestionHelper from 'components/QuestionHelper';
import Row, { RowBetween } from 'components/Row';
import { BodySmall } from 'components/Text';
import { AppContext } from 'contexts';
import { useRouterSDK } from 'functions/generateRoute';
import React, { useContext, useEffect, useState } from 'react'
import { Box, styled, Switch, SwitchProps, Typography, useTheme } from 'soroswap-ui';
import { useSWRConfig } from 'swr';


export const CustomSwitch = styled((props: SwitchProps) => (
<Switch sx={{ my: 1 }} focusVisibleClassName=".Mui-focusVisible" disableRipple {...props} />
))(({ theme }) => ({
width: 42,
height: 26,
padding: 0,
alignContent: 'center',
alignItems: 'center',
'& .MuiSwitch-switchBase': {
padding: 0,
margin: 3,
'&.Mui-checked': {
transform: 'translateX(16px)',
color: '#8866DD',
'& .MuiSwitch-thumb:before': {
backgroundColor: '#8866DD',
borderRadius: 32,
},
'& + .MuiSwitch-track': {
backgroundColor: theme.palette.background.paper,
opacity: 1,
border: 0,
},
},
},
'& .MuiSwitch-thumb': {
backgroundColor: 'rgba(136, 102, 221, 0.25)',
width: 20,
height: 20,
'&:before': {
content: "''",
position: 'absolute',
width: '100%',
height: '100%',
left: 0,
top: 0,
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
},
},
'& .MuiSwitch-track': {
borderRadius: 32,
backgroundColor: theme.palette.background.paper,
opacity: 1,
},
}));


const firstLetterUppercase = (string: string) => {
return string.charAt(0).toUpperCase() + string.slice(1);
}
const ProtocolsSettings = () => {
const { resetRouterSdkCache } = useRouterSDK();
const theme = useTheme();
const [isOpen, setIsOpen] = useState<boolean>(false);
const { protocolsStatus, setProtocolsStatus } = useContext(AppContext).Settings;
const { mutate } = useSWRConfig();

const switchProtocolValue = (key: string) => {
const newProtocolsStatus = protocolsStatus.map((protocol) => {
if (protocol.key === key) {
return {
key: protocol.key,
value: !protocol.value,
};
}
return protocol;
});
const hasTrueValue = newProtocolsStatus.some((protocol) => protocol.value);
if (hasTrueValue) {
resetRouterSdkCache();
setProtocolsStatus(newProtocolsStatus);
mutate(
(key: any) => {
return true;
},
undefined,
{ revalidate: true },
);
}
else return;
}

return (

<Expand
testId="protocols-settings"
isOpen={isOpen}
onToggle={() => setIsOpen(!isOpen)}
header={
<Row width="auto">
<Typography color={theme.palette.secondary.main}>Protocols</Typography>
<QuestionHelper
text={
<div>
The protocols Soroswap.finance will use to calculate the most efficient path for your transaction.
</div>
}
/>
</Row>
}
button={<></>}
>
<RowBetween gap="md" width={'100%'}>
<Box sx={{ ml: 2 }} width={'100%'} >
{protocolsStatus.map((option, index) => {
return (
<Row key={index} gap="4px" justify='space-between' align='center'>
<BodySmall fontWeight={100} color={theme.palette.secondary.main} >{firstLetterUppercase(option.key)}</BodySmall>
<CustomSwitch checked={option.value} onClick={() => { switchProtocolValue(option.key) }} color="secondary" />
</Row>
)
})}
</Box>
</RowBetween>

</Expand>

)
}

export default ProtocolsSettings
2 changes: 2 additions & 0 deletions src/components/Settings/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { useRef, useState } from 'react';
import MaxSlippageSettings from './MaxSlippageSettings';
import MenuButton from './MenuButton';
import MaxHopsSettings from './MaxHopsSettings';
import ProtocolsSettings from './ProtocolsSettings';

const Menu = styled('div')`
position: relative;
Expand Down Expand Up @@ -74,6 +75,7 @@ export default function SettingsTab({
<ExpandColumn>
<MaxSlippageSettings autoSlippage={autoSlippage} />
<MaxHopsSettings />
<ProtocolsSettings />
</ExpandColumn>
</AnimatedDropdown>
</MenuFlyout>
Expand Down
Loading

0 comments on commit 935b421

Please sign in to comment.