Add Slippage Slider Component

[tlip]

Description

This pull request introduces a SlippageSlider component. Although it was designed for the amount of allowable slippage in a swap (1-5%), it has been created to be somewhat customizable to facilitate future cases of reusability:

• Custom ranges
• Custom tick increments
• A function to format the text/content in the tooltip

Checklist

• There is a related GitHub issue
• Tests are included if applicable
• Any added code is fully documented

Issue

Resolves Issue #2026

[wachunei]

It looks good 👍, I'd suggest these changes:

• safe range/step numbers as mentioned in the other comment (this is mostly a dev experience improvement)
• add a boolean prop to have onChange called when the slider snaps in place (we are most likely responding to a snap change in the ui than upon release)

Update:

I just realized the defaultValue does not correctly set the slider at the right position

[wachunei]

Refactor includes:

• Slider does not depend on device dimensions anymore
• Slider does not need to be centered in the screen
• Slider calls onChange when changing slider position (although it can be called only when gesture is finished by setting changeOnRelease prop to true)
• All the position/layout was redone so changing paddings and diameters won't affect the positing of the elements within the component
• Slider reacts to changed value from the props and sets the position correctly
• Gradient image was updated and stretches correctly, the rounded tips are overflows and not part of the image.
• When range is not divisible by increment the component won't crash
• PanHandlers are memoized (they were recreated every render)

Reviewer refactored code

[estebanmino]

do we need this?

[wachunei]

Removed 👌

[estebanmino]

Suggested change

	style={[styles.slider, { left: sliderPosition }, { backgroundColor: sliderColor }]}
	style={[styles.slider, { left: sliderPosition, backgroundColor: sliderColor }]}

[wachunei]

Fixed 👍

[estebanmino]

shouldn't this check be in the view above?

[wachunei]

This is the modal itself (not the slider). I think the check and range values belong here instead of the amount view.