3rd times the charm redesign

coinbase · Aug 28, 2024 · e1be19d · e1be19d
1 parent 126775e
commit e1be19d
Show file tree

Hide file tree

Showing 25 changed files with 752 additions and 439 deletions.
diff --git a/.changeset/chilly-rice-repeat.md b/.changeset/chilly-rice-repeat.md
@@ -0,0 +1,5 @@
+---
+"@coinbase/onchainkit": patch
+---
+
+- **feat**: Introducing the SwapSettings component, a dropdown that allows you to easily customize slippage during swaps. It features subcomponents for slippage options and includes a toggle icon. by @0xAlec @cpcramer #1051
diff --git a/.changeset/clean-mirrors-sparkle.md b/.changeset/clean-mirrors-sparkle.md
diff --git a/playground/nextjs-app-router/components/demo/Swap.tsx b/playground/nextjs-app-router/components/demo/Swap.tsx
@@ -5,6 +5,11 @@ import {
   SwapAmountInput,
   SwapButton,
   SwapMessage,
+  SwapSettings,
+  SwapSettingsSlippageDescription,
+  SwapSettingsSlippageInput,
+  SwapSettingsSlippageTitle,
+  SwapSettingsSlippageToggle,
   SwapToggleButton,
 } from '@coinbase/onchainkit/swap';
 import type { Token } from '@coinbase/onchainkit/token';
@@ -87,6 +92,15 @@ function SwapComponent() {
       )}
       {address ? (
         <Swap className="border bg-[#ffffff]" onStatus={handleOnStatus}>
+          <SwapSettings>
+            <SwapSettingsSlippageTitle>Max. slippage</SwapSettingsSlippageTitle>
+            <SwapSettingsSlippageDescription>
+              Your swap will revert if the prices change by more than the
+              selected percentage.
+            </SwapSettingsSlippageDescription>
+            <SwapSettingsSlippageToggle />
+            <SwapSettingsSlippageInput />
+          </SwapSettings>
           <SwapAmountInput
             label="Sell"
             swappableTokens={swappableTokens}

diff --git a/site/docs/pages/swap/types.mdx b/site/docs/pages/swap/types.mdx
@@ -180,16 +180,6 @@ type SwapReact = {
 };
 ```
 
-## `SwapSettingsReact`
-
-```ts
-type SwapSettingsReact = {
-  className?: string; // Optional className override for top div element.
-  icon?: ReactNode; // Optional icon override
-  text?: string; // Optional text override
-};
-```
-
 ## `SwapToggleButtonReact`
 
 ```ts

diff --git a/src/swap/components/SlippageDescription.tsx b/src/swap/components/SlippageDescription.tsx
diff --git a/src/swap/components/SlippageInput.tsx b/src/swap/components/SlippageInput.tsx
diff --git a/src/swap/components/SlippageLabel.tsx b/src/swap/components/SlippageLabel.tsx
diff --git a/src/swap/components/SlippageLayout.tsx b/src/swap/components/SlippageLayout.tsx
diff --git a/src/swap/components/Swap.tsx b/src/swap/components/Swap.tsx
@@ -60,7 +60,7 @@ export function Swap({
           >
             {title}
           </h3>
-          <div>{swapSettings}</div>
+          {swapSettings}
         </div>
         {inputs[0]}
         <div className="relative h-1">{toggleButton}</div>