Update

src/swap/components/SwapSettings.tsx

@@ -25,7 +25,7 @@ export function SwapSettings({
   }
 
   if (breakpoint === 'sm') {
-    // Placeholder for mobile bottom sheet implementation
+    // Placeholder for SwapSettingsBottomSheet
     return (
       <div>
         {/* Implement mobile version here, similar to WalletBottomSheet */}
@@ -62,16 +62,19 @@ export function SwapSettings({
             data-testid="ockSwapSettingsDropdown"
           >
             <div className="p-4">
-              <h3 className={cn(themeText.headline, "mb-2")}>Max. slippage</h3>
-              <p className={cn(themeText.body, "text-gray-600 mb-4")}>
-                Your swap will revert if the prices change by more than the selected percentage.
+              <h3 className={cn(themeText.headline, 'mb-2')}>Max. slippage</h3>
+              <p className={cn(themeText.body, 'text-gray-600 mb-4')}>
+                Your swap will revert if the prices change by more than the
+                selected percentage.
               </p>
               <div className="flex items-center justify-between mb-4">
                 <div className="flex space-x-2">
                   <button
                     className={cn(
-                      "px-4 py-2 rounded-full text-sm font-medium",
-                      slippageMode === 'Auto' ? "bg-blue-100 text-blue-600" : "bg-gray-100 text-gray-600"
+                      'px-4 py-2 rounded-full text-sm font-medium',
+                      slippageMode === 'Auto'
+                        ? 'bg-blue-100 text-blue-600'
+                        : 'bg-gray-100 text-gray-600',
                     )}
                     onClick={() => setSlippageMode('Auto')}
                   >
@@ -80,8 +83,10 @@ export function SwapSettings({
                   <button
                     className={cn(
                       themeText.label1,
-                      "px-4 py-2 rounded-full",
-                      slippageMode === 'Custom' ? "bg-blue-100 text-blue-600" : "bg-gray-100 text-gray-600"
+                      'px-4 py-2 rounded-full',
+                      slippageMode === 'Custom'
+                        ? 'bg-blue-100 text-blue-600'
+                        : 'bg-gray-100 text-gray-600',
                     )}
                     onClick={() => setSlippageMode('Custom')}
                   >
@@ -96,7 +101,9 @@ export function SwapSettings({
                     className="w-16 px-2 py-1 text-right border rounded-l-md"
                     disabled={slippageMode === 'Auto'}
                   />
-                  <span className="px-2 py-1 bg-gray-100 border border-l-0 rounded-r-md">%</span>
+                  <span className="px-2 py-1 bg-gray-100 border border-l-0 rounded-r-md">
+                    %
+                  </span>
                 </div>
               </div>
             </div>
@@ -105,4 +112,4 @@ export function SwapSettings({
       </div>
     </div>
   );
-}
+}