Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: Update SwapSettingsSlippageInput to use Config #1263

Merged
merged 6 commits into from
Sep 17, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/late-bottles-greet.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@coinbase/onchainkit': patch
---

-**chore**: updated `SwapSettingsSlippageInput` to use the input config defaultMaxSlippage value. By @cpcramer #1263.
1 change: 1 addition & 0 deletions src/swap/components/SwapProvider.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -330,6 +330,7 @@ export function SwapProvider({

const value = useValue({
address,
config,
from,
handleAmountChange,
handleToggle,
Expand Down
83 changes: 61 additions & 22 deletions src/swap/components/SwapSettingsSlippageInput.test.tsx
Original file line number Diff line number Diff line change
@@ -1,20 +1,22 @@
import { fireEvent, render, screen } from '@testing-library/react';
import { beforeEach, describe, expect, it, vi } from 'vitest';
import { DEFAULT_MAX_SLIPPAGE } from '../constants';
import { SwapSettingsSlippageInput } from './SwapSettingsSlippageInput';

const mockSetLifecycleStatus = vi.fn();
let mockLifecycleStatus = {
statusName: 'init',
statusData: {
isMissingRequiredField: false,
maxSlippage: 3,
maxSlippage: DEFAULT_MAX_SLIPPAGE,
},
};

vi.mock('./SwapProvider', () => ({
useSwapContext: () => ({
updateLifecycleStatus: mockSetLifecycleStatus,
lifecycleStatus: mockLifecycleStatus,
config: { maxSlippage: DEFAULT_MAX_SLIPPAGE },
}),
}));

Expand All @@ -29,14 +31,16 @@ describe('SwapSettingsSlippageInput', () => {
statusName: 'init',
statusData: {
isMissingRequiredField: false,
maxSlippage: 3,
maxSlippage: DEFAULT_MAX_SLIPPAGE,
},
};
});

it('renders with default props', () => {
render(<SwapSettingsSlippageInput />);
expect(screen.getByRole('textbox')).toHaveValue('3');
expect(screen.getByRole('textbox')).toHaveValue(
DEFAULT_MAX_SLIPPAGE.toString(),
);
expect(screen.getByText('%')).toBeInTheDocument();
expect(screen.getByRole('button', { name: 'Auto' })).toBeInTheDocument();
expect(screen.getByRole('button', { name: 'Custom' })).toBeInTheDocument();
Expand All @@ -58,11 +62,13 @@ describe('SwapSettingsSlippageInput', () => {
expect(screen.getByRole('textbox')).toHaveValue('1.5');
});

it('allows input changes in Custom mode', () => {
it('allows input changes in Custom mode but maintains default value', () => {
render(<SwapSettingsSlippageInput />);
fireEvent.click(screen.getByRole('button', { name: 'Custom' }));
fireEvent.change(screen.getByRole('textbox'), { target: { value: '2.5' } });
expect(screen.getByRole('textbox')).toHaveValue('2.5');
expect(screen.getByRole('textbox')).toHaveValue(
DEFAULT_MAX_SLIPPAGE.toString(),
);
expect(mockSetLifecycleStatus).toHaveBeenCalledWith({
statusName: 'slippageChange',
statusData: {
Expand All @@ -76,12 +82,19 @@ describe('SwapSettingsSlippageInput', () => {
expect(screen.getByRole('textbox')).toBeDisabled();
});

it('prevents invalid input', () => {
it('handles invalid input by maintaining default value', () => {
render(<SwapSettingsSlippageInput />);
fireEvent.click(screen.getByRole('button', { name: 'Custom' }));
fireEvent.change(screen.getByRole('textbox'), { target: { value: 'abc' } });
expect(screen.getByRole('textbox')).toHaveValue('3');
expect(mockSetLifecycleStatus).not.toHaveBeenCalled();
expect(screen.getByRole('textbox')).toHaveValue(
DEFAULT_MAX_SLIPPAGE.toString(),
);
expect(mockSetLifecycleStatus).toHaveBeenCalledWith({
statusName: 'slippageChange',
statusData: {
maxSlippage: 0,
},
});
});

it('handles decimal input correctly', () => {
Expand All @@ -90,7 +103,9 @@ describe('SwapSettingsSlippageInput', () => {
fireEvent.change(screen.getByRole('textbox'), {
target: { value: '2.75' },
});
expect(screen.getByRole('textbox')).toHaveValue('2.75');
expect(screen.getByRole('textbox')).toHaveValue(
DEFAULT_MAX_SLIPPAGE.toString(),
);
expect(mockSetLifecycleStatus).toHaveBeenCalledWith({
statusName: 'slippageChange',
statusData: {
Expand Down Expand Up @@ -124,12 +139,19 @@ describe('SwapSettingsSlippageInput', () => {
);
});

it('handles empty input correctly', () => {
it('handles empty input by maintaining default value', () => {
render(<SwapSettingsSlippageInput />);
fireEvent.click(screen.getByRole('button', { name: 'Custom' }));
fireEvent.change(screen.getByRole('textbox'), { target: { value: '' } });
expect(screen.getByRole('textbox')).toHaveValue('0');
expect(mockSetLifecycleStatus).not.toHaveBeenCalled();
expect(screen.getByRole('textbox')).toHaveValue(
DEFAULT_MAX_SLIPPAGE.toString(),
);
expect(mockSetLifecycleStatus).toHaveBeenCalledWith({
statusName: 'slippageChange',
statusData: {
maxSlippage: 0,
},
});
});

it('uses lifecycleStatus maxSlippage when available', () => {
Expand Down Expand Up @@ -159,36 +181,53 @@ describe('SwapSettingsSlippageInput', () => {
expect(screen.getByRole('textbox')).not.toBeDisabled();
});

it('handles non-numeric input correctly', () => {
it('handles non-numeric input by maintaining default value', () => {
render(<SwapSettingsSlippageInput />);
fireEvent.click(screen.getByRole('button', { name: 'Custom' }));
fireEvent.change(screen.getByRole('textbox'), { target: { value: 'abc' } });
expect(screen.getByRole('textbox')).toHaveValue('3');
expect(mockSetLifecycleStatus).not.toHaveBeenCalled();
expect(screen.getByRole('textbox')).toHaveValue(
DEFAULT_MAX_SLIPPAGE.toString(),
);
expect(mockSetLifecycleStatus).toHaveBeenCalledWith({
statusName: 'slippageChange',
statusData: {
maxSlippage: 0,
},
});
});

it('updates slippage when switching from Custom to Auto', () => {
render(<SwapSettingsSlippageInput />);
fireEvent.click(screen.getByRole('button', { name: 'Custom' }));
fireEvent.change(screen.getByRole('textbox'), { target: { value: '5' } });
fireEvent.click(screen.getByRole('button', { name: 'Auto' }));
expect(screen.getByRole('textbox')).toHaveValue('3');
expect(screen.getByRole('textbox')).toHaveValue(
DEFAULT_MAX_SLIPPAGE.toString(),
);
expect(mockSetLifecycleStatus).toHaveBeenLastCalledWith({
statusName: 'slippageChange',
statusData: {
maxSlippage: 3,
maxSlippage: 5,
},
});
});

it('maintains custom value when in Custom mode', () => {
it('maintains default value when switching between Auto and Custom mode', () => {
render(<SwapSettingsSlippageInput />);
expect(screen.getByRole('textbox')).toHaveValue(
DEFAULT_MAX_SLIPPAGE.toString(),
);
fireEvent.click(screen.getByRole('button', { name: 'Custom' }));
expect(screen.getByRole('textbox')).toHaveValue(
DEFAULT_MAX_SLIPPAGE.toString(),
);
fireEvent.change(screen.getByRole('textbox'), { target: { value: '5' } });
expect(screen.getByRole('textbox')).toHaveValue('5');
expect(screen.getByRole('textbox')).toHaveValue(
DEFAULT_MAX_SLIPPAGE.toString(),
);
fireEvent.click(screen.getByRole('button', { name: 'Auto' }));
fireEvent.click(screen.getByRole('button', { name: 'Custom' }));
fireEvent.change(screen.getByRole('textbox'), { target: { value: '7' } });
expect(screen.getByRole('textbox')).toHaveValue('7');
expect(screen.getByRole('textbox')).toHaveValue(
DEFAULT_MAX_SLIPPAGE.toString(),
);
});
});
53 changes: 25 additions & 28 deletions src/swap/components/SwapSettingsSlippageInput.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,47 +12,44 @@ const SLIPPAGE_SETTINGS = {
export function SwapSettingsSlippageInput({
className,
}: SwapSettingsSlippageInputReact) {
const { updateLifecycleStatus, lifecycleStatus } = useSwapContext();
const getMaxSlippage = useCallback(() => {
return lifecycleStatus.statusData.maxSlippage;
}, [lifecycleStatus.statusData]);
Comment on lines -16 to -18
Copy link
Contributor Author

@cpcramer cpcramer Sep 16, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed the getMaxSlippage function. useCallback is not providing many performance benefits here. Likely it's even slower than accessing lifecycleStatus.statusData.maxSlippage directly

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice

const {
config: { maxSlippage: defaultMaxSlippage },
updateLifecycleStatus,
lifecycleStatus,
} = useSwapContext();

// Set initial slippage values to match previous selection or default,
// ensuring consistency when dropdown is reopened
const [slippage, setSlippage] = useState(getMaxSlippage());
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not needed anymore

const [slippageSetting, setSlippageSetting] = useState(
getMaxSlippage() === DEFAULT_MAX_SLIPPAGE
lifecycleStatus.statusData.maxSlippage === defaultMaxSlippage
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok nice

? SLIPPAGE_SETTINGS.AUTO
: SLIPPAGE_SETTINGS.CUSTOM,
);

const updateSlippage = useCallback(
(newSlippage: number) => {
setSlippage(newSlippage);
updateLifecycleStatus({
statusName: 'slippageChange',
statusData: {
maxSlippage: newSlippage,
},
});
if (newSlippage !== lifecycleStatus.statusData.maxSlippage) {
updateLifecycleStatus({
statusName: 'slippageChange',
statusData: {
maxSlippage: newSlippage,
},
});
}
},
[updateLifecycleStatus],
[lifecycleStatus.statusData.maxSlippage, updateLifecycleStatus],
);

// Handles user input for custom slippage
// Parses the input and updates slippage if valid
// Handles user input for custom slippage.
// Parses the input and updates slippage state.
const handleSlippageChange = useCallback(
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Well done in updating the comments as well

(newSlippage: string) => {
// Empty '' when the input field is cleared.
if (newSlippage === '') {
setSlippage(0);
return;
}
(e: React.ChangeEvent<HTMLInputElement>) => {
const newSlippage = e.target.value;
const parsedSlippage = Number.parseFloat(newSlippage);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

parseFloat('2.') = 2 preventing you from entering decimals

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this is a fast follow update. I belieeve we will need to update getSwapQuote and buildSwapTransaction as well - this is where number <> string conversation happens again

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok, parseFloat(2.2) = 2.2, its just typing the interim step will remove the dot before you type the next number

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@cpcramer in your update to getSwapQuote and buildSwapTransaction - can you prevent the APIs from calling when amount=0? seems to be an edge case fired off from the component occasionally

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yep!

const isValidNumber = !Number.isNaN(parsedSlippage);

const newSlippageNumber = Number.parseFloat(newSlippage);
if (!Number.isNaN(newSlippageNumber)) {
updateSlippage(newSlippageNumber);
}
// Update slippage to parsed value if valid, otherwise set to 0
updateSlippage(isValidNumber ? parsedSlippage : 0);
},
[updateSlippage],
);
Expand Down Expand Up @@ -119,8 +116,8 @@ export function SwapSettingsSlippageInput({
<input
id="slippage-input"
type="text"
value={slippage}
onChange={(e) => handleSlippageChange(e.target.value)}
value={lifecycleStatus.statusData.maxSlippage}
onChange={handleSlippageChange}
disabled={slippageSetting === SLIPPAGE_SETTINGS.AUTO}
className={cn(
color.foreground,
Expand Down
9 changes: 6 additions & 3 deletions src/swap/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -162,8 +162,13 @@ export type SwapButtonReact = {
disabled?: boolean; // Disables swap button
};

type SwapConfig = {
maxSlippage: number; // Maximum acceptable slippage for a swap. (default: 10) This is as a percent, not basis points;
};

export type SwapContextType = {
address?: Address; // Used to check if user is connected in SwapButton
config: SwapConfig;
from: SwapUnit;
lifecycleStatus: LifecycleStatus;
handleAmountChange: (
Expand Down Expand Up @@ -239,9 +244,7 @@ export type SwapProviderReact = {
export type SwapReact = {
children: ReactNode;
className?: string; // Optional className override for top div element.
config?: {
maxSlippage: number; // Maximum acceptable slippage for a swap. (default: 10) This is as a percent, not basis points
};
config?: SwapConfig;
experimental?: {
useAggregator: boolean; // Whether to use a DEX aggregator. (default: true)
};
Expand Down
Loading