feat: Add Swap Settings SwapProvider

[cpcramer]

What changed? Why?

Add SwapSettings Component

This PR introduces a new SwapSettings component, providing a dropdown interface for users to customize slippage settings during swaps. The component is composed of several subcomponents that manage different aspects of the slippage settings.

Key changes and additions:

• Create SwapSettings component with subcomponents:
  • SwapSettingsSlippageDescription
  • SwapSettingsSlippageInput
  • SwapSettingsSlippageLayout
  • SwapSettingsSlippageLabel
  • SwapSettingsSlippageLayoutBottomSheet for mobile view
• Add swapSettings SVG icon
• Update Swap component to include and render SwapSettings
• Implement click-outside functionality to close the dropdown
• Add full test coverage for all new files and components

Functionality:

• Display settings dropdown when the SVG icon is clicked
• Allow users to toggle between Auto and Custom slippage modes
• Enable custom slippage percentage input
• Provide styling and text override options for various subcomponents

This enhancement gives users more control over their swap settings while maintaining a clean and intuitive interface.
Recording:

Screen.Recording.2024-08-28.at.12.25.46.PM.mov

Notes to reviewers
see design in Slack

Fast follow PRs

• Polish styling

How has it been tested?
locally

Idle states

Hover states

Override state

Responsive

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
onchainkit-coverage	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 11, 2024 10:23pm
onchainkit-playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 11, 2024 10:23pm
onchainkit-routes	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 11, 2024 10:23pm

[Zizzamia]

Amazing, and I left only one note that could be done as fast-follow.