Skip to content

Commit

Permalink
fixed slippage
Browse files Browse the repository at this point in the history
  • Loading branch information
Ridel1e committed Mar 5, 2024
1 parent c66701e commit 734f3ed
Show file tree
Hide file tree
Showing 3 changed files with 63 additions and 80 deletions.
4 changes: 2 additions & 2 deletions src/common/constants/settings.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@ export const MinerFeeDecimals = 2;
export const defaultSlippage = 3;
export const MIN_SLIPPAGE = 0.01;

export const MAX_SLIPPAGE = 1_000_000;
export const MAX_SLIPPAGE = 50;

export const INFINITY_SLIPPAGE = 1_000_000_000.5;
export const INFINITY_SLIPPAGE = 50;
export const SlippageDecimals = 2;

export const PoolFeeMax = 0.25;
Expand Down
14 changes: 3 additions & 11 deletions src/components/OperationSettings/OperationSettings.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ import { filter, skip } from 'rxjs';
import { MIN_NITRO } from '../../common/constants/erg';
import {
defaultSlippage,
INFINITY_SLIPPAGE,
MAX_SLIPPAGE,
MIN_SLIPPAGE,
} from '../../common/constants/settings';
Expand Down Expand Up @@ -127,11 +126,7 @@ export const OperationSettings: FC<OperationSettingsProps> = ({
filter((value) => !!value && value >= MIN_SLIPPAGE),
),
(slippage) => {
if (slippage === INFINITY_SLIPPAGE) {
setSlippage(INFINITY_SLIPPAGE);
} else {
setSlippage(Math.min(slippage, MAX_SLIPPAGE));
}
setSlippage(Math.min(slippage, MAX_SLIPPAGE));
},
[slippage, nitro],
);
Expand Down Expand Up @@ -278,18 +273,15 @@ export const OperationSettings: FC<OperationSettingsProps> = ({
size="large"
style={{
backgroundColor:
slippage === INFINITY_SLIPPAGE
? 'var(--spectrum-error-border-color)'
: slippageCheck(slippage) || slippageTxFailCheck(slippage)
slippageCheck(slippage) || slippageTxFailCheck(slippage)
? 'var(--spectrum-warning-border-color)'
: 'var(--spectrum-btn-default-color)',
}}
>
<Flex align="center">
<Flex.Item marginRight={2} align="center">
<Typography.Body size="small">
{slippage === INFINITY_SLIPPAGE ? `∞ ` : `${slippage}% `}
<Trans>slippage</Trans>
{slippage}% <Trans>slippage</Trans>
</Typography.Body>
</Flex.Item>
<Flex.Item align="center" style={{ paddingTop: '1px' }}>
Expand Down
125 changes: 58 additions & 67 deletions src/components/OperationSettings/SlippageInput/SlippageInput.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,7 @@ import {
Control,
Flex,
Input,
Switch,
Typography,
} from '@ergolabs/ui-kit';
import { Trans } from '@lingui/macro';
import { ChangeEvent, FC } from 'react';
import styled from 'styled-components';

Expand Down Expand Up @@ -47,76 +44,70 @@ const _SlippageInput: FC<NitroInputProps> = ({

return (
<Flex col>
{value !== INFINITY_SLIPPAGE && (
<Flex.Item marginBottom={2}>
<Box secondary borderRadius="l" glass>
<Flex justify="space-between">
{SLIPPAGE_OPTIONS.sort().map((val, index) => (
<Flex.Item
key={index}
marginRight={1}
style={{ width: '100%' }}
>
<Button
block
type={val === value ? 'primary' : 'text'}
size="middle"
onClick={() => handleClickSlippage(val)}
>
{val} %
</Button>
</Flex.Item>
))}
<Flex.Item>
<Input
inputMode="decimal"
className={className}
style={{ width: '128px' }}
value={value}
placeholder="1"
state={state}
type="number"
min={MIN_SLIPPAGE}
max={MAX_SLIPPAGE}
<Flex.Item marginBottom={2}>
<Box secondary borderRadius="l" glass>
<Flex justify="space-between">
{SLIPPAGE_OPTIONS.sort().map((val, index) => (
<Flex.Item key={index} marginRight={1} style={{ width: '100%' }}>
<Button
block
type={val === value ? 'primary' : 'text'}
size="middle"
suffix="%"
isActive={isCustomSlippage}
onChange={handleInputChange}
/>
onClick={() => handleClickSlippage(val)}
>
{val} %
</Button>
</Flex.Item>
</Flex>
</Box>
</Flex.Item>
)}
<Flex.Item marginBottom={3} display="flex" align="center">
<Flex.Item marginRight={2}>
<Switch
checked={value === INFINITY_SLIPPAGE}
onChange={(e) =>
handleClickSlippage(e ? INFINITY_SLIPPAGE : defaultSlippage)
}
/>
</Flex.Item>
<Typography.Body>
<Trans>Infinity slippage</Trans>
</Typography.Body>
))}
<Flex.Item>
<Input
inputMode="decimal"
className={className}
style={{ width: '128px' }}
value={value}
placeholder="1"
state={state}
type="number"
min={MIN_SLIPPAGE}
max={MAX_SLIPPAGE}
size="middle"
suffix="%"
isActive={isCustomSlippage}
onChange={handleInputChange}
/>
</Flex.Item>
</Flex>
</Box>
</Flex.Item>
{/*<Flex.Item marginBottom={3} display="flex" align="center">*/}
{/* <Flex.Item marginRight={2}>*/}
{/* <Switch*/}
{/* checked={value === INFINITY_SLIPPAGE}*/}
{/* onChange={(e) =>*/}
{/* handleClickSlippage(e ? INFINITY_SLIPPAGE : defaultSlippage)*/}
{/* }*/}
{/* />*/}
{/* </Flex.Item>*/}
{/* <Typography.Body>*/}
{/* <Trans>Infinity slippage</Trans>*/}
{/* </Typography.Body>*/}
{/*</Flex.Item>*/}
<Animation.Expand expanded={!!message && value !== INFINITY_SLIPPAGE}>
<Alert showIcon type={state} message={message} />
</Animation.Expand>
<Animation.Expand expanded={value === INFINITY_SLIPPAGE}>
<Alert
showIcon
type="error"
message={
<Trans>
Using infinity slippage may cause permanent loss of all your funds
in a order. Make sure you understand what you are doing. If not,
reduce the slippage tolerance.
</Trans>
}
/>
</Animation.Expand>
{/*<Animation.Expand expanded={value === INFINITY_SLIPPAGE}>*/}
{/* <Alert*/}
{/* showIcon*/}
{/* type="error"*/}
{/* message={*/}
{/* <Trans>*/}
{/* Using infinity slippage may cause permanent loss of all your funds*/}
{/* in a order. Make sure you understand what you are doing. If not,*/}
{/* reduce the slippage tolerance.*/}
{/* </Trans>*/}
{/* }*/}
{/* />*/}
{/*</Animation.Expand>*/}
</Flex>
);
};
Expand Down

0 comments on commit 734f3ed

Please sign in to comment.