Skip to content

feat: add reset button to advanced controls and remove preset buttons #587

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.

Sign up for GitHub

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

Merged
chad-js merged 1 commit into from
Feb 19, 2026
Merged

feat: add reset button to advanced controls and remove preset buttons #587

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
31 changes: 12 additions & 19 deletions src/features/leverage-tokens/components/SlippageInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,11 @@ import { Button } from '@/components/ui/button'
import { Card } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
import { cn } from '@/lib/utils/cn'

interface SlippageInputProps {
label: string
tooltipText?: string
presets: ReadonlyArray<string>
defaultValue: string
value: string
onChange: (value: string) => void
inputRef?: Ref<HTMLInputElement>
Expand All @@ -23,7 +22,7 @@ interface SlippageInputProps {
export function SlippageInput({
label,
tooltipText,
presets,
defaultValue,
value,
onChange,
inputRef,
Expand All @@ -34,6 +33,7 @@ export function SlippageInput({
placeholder = '0.5',
}: SlippageInputProps) {
const [tooltipOpen, setTooltipOpen] = useState(false)
const isResetDisabled = value === defaultValue

const handleStepChange = (direction: 'up' | 'down') => {
const currentValue = parseFloat(value) || 0
Expand Down Expand Up @@ -73,22 +73,6 @@ export function SlippageInput({
)}
</div>
<div className="flex items-center space-x-2">
{presets.map((preset) => (
<Button
key={preset}
variant={value === preset ? 'default' : 'outline'}
size="sm"
onClick={() => onChange(preset)}
className={cn(
'h-8 px-3 text-xs transition-colors',
value === preset
? 'border border-brand-purple bg-brand-purple text-primary-foreground hover:opacity-90'
: 'border border-divider-line text-secondary-foreground hover:bg-[color-mix(in_srgb,var(--surface-elevated) 35%,transparent)] hover:text-foreground',
)}
>
{preset}%
</Button>
))}
<div className="flex items-center space-x-1">
<div className="relative">
<Input
Expand Down Expand Up @@ -118,6 +102,15 @@ export function SlippageInput({
</div>
<Percent className="h-3 w-3 text-muted-foreground" />
</div>
<Button
variant="outline"
size="sm"
onClick={() => onChange(defaultValue)}
disabled={isResetDisabled}
className="h-8 border border-divider-line px-3 text-xs text-secondary-foreground transition-colors hover:bg-[color-mix(in_srgb,var(--surface-elevated) 35%,transparent)] hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent disabled:hover:text-secondary-foreground"
>
Reset
</Button>
</div>
</div>
</Card>
Expand Down
25 changes: 12 additions & 13 deletions src/features/leverage-tokens/components/leverage-token-mint-modal/InputStep.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,10 @@ import { Separator } from '../../../../components/ui/separator'
import { Skeleton } from '../../../../components/ui/skeleton'
import {
AMOUNT_PERCENTAGE_PRESETS,
FLASH_LOAN_ADJUSTMENT_PRESETS_PERCENT_DISPLAY,
DEFAULT_FLASH_LOAN_ADJUSTMENT_PERCENT_DISPLAY,
DEFAULT_SLIPPAGE_PERCENT_DISPLAY,
DEFAULT_SWAP_SLIPPAGE_PERCENT_DISPLAY,
MIN_MINT_AMOUNT_DISPLAY,
SHARE_SLIPPAGE_PRESETS_PERCENT_DISPLAY_MINT,
SWAP_SLIPPAGE_PRESETS_PERCENT_DISPLAY,
} from '../../constants'
import { SlippageInput } from '../SlippageInput'

Expand Down Expand Up @@ -174,13 +174,6 @@ export function InputStep({
return { label: `Mint ${leverageTokenConfig.symbol}`, busy: false }
})()

const shareSlippagePresets =
leverageTokenConfig.slippagePresets?.mint?.presetsShareSlippage ??
SHARE_SLIPPAGE_PRESETS_PERCENT_DISPLAY_MINT
const flashLoanAdjustmentPresets =
leverageTokenConfig.slippagePresets?.mint?.presetsFlashLoanAdjustment ??
FLASH_LOAN_ADJUSTMENT_PRESETS_PERCENT_DISPLAY

return (
<div className="space-y-6">
<div className="space-y-4">
Expand Down Expand Up @@ -272,7 +265,10 @@ export function InputStep({
<SlippageInput
label="Leverage Token Slippage Tolerance"
tooltipText="The maximum allowed difference between previewed Leverage Tokens received and actual Leverage Tokens received when executed onchain."
presets={shareSlippagePresets}
defaultValue={
leverageTokenConfig.slippagePresets?.mint?.defaultShareSlippage ??
DEFAULT_SLIPPAGE_PERCENT_DISPLAY
}
value={shareSlippage}
onChange={onShareSlippageChange}
inputRef={shareSlippageInputRef}
Expand All @@ -284,7 +280,7 @@ export function InputStep({
<SlippageInput
label="Swap Slippage Tolerance"
tooltipText="Advanced setting. The default value works in most cases."
presets={SWAP_SLIPPAGE_PRESETS_PERCENT_DISPLAY}
defaultValue={DEFAULT_SWAP_SLIPPAGE_PERCENT_DISPLAY}
Comment thread
fredwes marked this conversation as resolved.
value={swapSlippage}
onChange={onSwapSlippageChange}
step={0.01}
Expand All @@ -295,7 +291,10 @@ export function InputStep({
<SlippageInput
label="Flash Loan Adjustment"
tooltipText="Advanced setting. The default value works in most cases."
presets={flashLoanAdjustmentPresets}
defaultValue={
leverageTokenConfig.slippagePresets?.mint?.defaultFlashLoanAdjustment ??
DEFAULT_FLASH_LOAN_ADJUSTMENT_PERCENT_DISPLAY
}
value={flashLoanAdjustment}
onChange={onFlashLoanAdjustmentChange}
step={0.1}
Expand Down
19 changes: 9 additions & 10 deletions src/features/leverage-tokens/components/leverage-token-redeem-modal/InputStep.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,10 @@ import { Separator } from '../../../../components/ui/separator'
import { Skeleton } from '../../../../components/ui/skeleton'
import {
AMOUNT_PERCENTAGE_PRESETS,
COLLATERAL_SLIPPAGE_PRESETS_PERCENT_DISPLAY_REDEEM,
COLLATERAL_SWAP_ADJUSTMENT_PRESETS_PERCENT_DISPLAY,
DEFAULT_COLLATERAL_SLIPPAGE_PERCENT_DISPLAY,
DEFAULT_COLLATERAL_SWAP_ADJUSTMENT_PERCENT_DISPLAY,
DEFAULT_SWAP_SLIPPAGE_PERCENT_DISPLAY,
MIN_REDEEM_AMOUNT_DISPLAY,
SWAP_SLIPPAGE_PRESETS_PERCENT_DISPLAY,
} from '../../constants'
import type { SwapConfig } from '../../leverageTokens.config'

Expand Down Expand Up @@ -168,10 +168,6 @@ export function InputStep({
return { label: `Redeem ${leverageTokenConfig.symbol}`, busy: false }
})()

const collateralSlippagePresets =
leverageTokenConfig.slippagePresets?.redeem?.presetsCollateralSlippage ??
COLLATERAL_SLIPPAGE_PRESETS_PERCENT_DISPLAY_REDEEM

return (
<div className="space-y-6">
<div className="space-y-4">
Expand Down Expand Up @@ -254,7 +250,10 @@ export function InputStep({
<SlippageInput
label={`${leverageTokenConfig.collateralAsset.symbol} Slippage Tolerance`}
tooltipText={`The maximum allowed difference between the previewed ${leverageTokenConfig.collateralAsset.symbol} amount received and actual amount received when executed onchain.`}
presets={collateralSlippagePresets}
defaultValue={
leverageTokenConfig.slippagePresets?.redeem?.defaultCollateralSlippage ??
DEFAULT_COLLATERAL_SLIPPAGE_PERCENT_DISPLAY
}
value={collateralSlippage}
onChange={onCollateralSlippageChange}
inputRef={collateralSlippageInputRef}
Expand All @@ -266,7 +265,7 @@ export function InputStep({
<SlippageInput
label={`Collateral Swap Adjustment`}
tooltipText="Advanced setting. The default value works in most cases."
presets={COLLATERAL_SWAP_ADJUSTMENT_PRESETS_PERCENT_DISPLAY}
defaultValue={DEFAULT_COLLATERAL_SWAP_ADJUSTMENT_PERCENT_DISPLAY}
Comment thread
fredwes marked this conversation as resolved.
value={collateralSwapAdjustment}
onChange={onCollateralSwapAdjustmentChange}
step={0.01}
Expand All @@ -277,7 +276,7 @@ export function InputStep({
<SlippageInput
label="Swap Slippage Tolerance"
tooltipText="Advanced setting. The default value works in most cases."
presets={SWAP_SLIPPAGE_PRESETS_PERCENT_DISPLAY}
defaultValue={DEFAULT_SWAP_SLIPPAGE_PERCENT_DISPLAY}
Comment thread
fredwes marked this conversation as resolved.
value={swapSlippage}
onChange={onSwapSlippageChange}
step={0.01}
Expand Down
5 changes: 0 additions & 5 deletions src/features/leverage-tokens/leverageTokens.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,12 +126,9 @@ export interface LeverageTokenConfig {
mint?: {
defaultShareSlippage?: string
defaultFlashLoanAdjustment?: string
presetsShareSlippage?: Array<string>
presetsFlashLoanAdjustment?: Array<string>
}
redeem?: {
defaultCollateralSlippage?: string
presetsCollateralSlippage?: Array<string>
}
}

Expand Down Expand Up @@ -819,9 +816,7 @@ export const leverageTokenConfigs: Record<string, LeverageTokenConfig> = {
slippagePresets: {
mint: {
defaultShareSlippage: '1.7',
presetsShareSlippage: ['1.0', '1.5', '2.0'],
defaultFlashLoanAdjustment: '1.7',
presetsFlashLoanAdjustment: ['1.0', '1.5', '2.0'],
},
},
test: {
Expand Down