Skip to content

Feat/audit mint redeem flow copy and design #595

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

Open
chad-js wants to merge 3 commits into
base: main
Choose a base branch
from
+196 −126
Open

Feat/audit mint redeem flow copy and design #595

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0437325
feat: update mint and redeem flow copy, icons, text layout
chad-js Feb 27, 2026
4405fca
fix mobile spacing in confirm step
chad-js Feb 27, 2026
9fb5089
add padding to horizontal align with input text
chad-js Feb 27, 2026
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
55 changes: 40 additions & 15 deletions src/features/leverage-tokens/components/leverage-token-mint-modal/ConfirmStep.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { ArrowDown, TrendingUp, Zap } from 'lucide-react'
import { ArrowDown, Zap } from 'lucide-react'
import { AssetDisplay } from '../../../../components/ui/asset-display'
import { Button } from '../../../../components/ui/button'
import { Card } from '../../../../components/ui/card'
Expand All @@ -18,6 +18,16 @@ interface LeverageTokenConfig {
name: string
leverageRatio: number
chainId: number
collateralAsset: {
symbol: string
name: string
address: string
}
debtAsset: {
symbol: string
name: string
address: string
}
}

interface ConfirmStepProps {
Expand Down Expand Up @@ -69,10 +79,10 @@ export function ConfirmStep({

<Card variant="gradient" className="gap-0 border border-border bg-card p-4">
<div className="space-y-3">
<div className="flex items-center justify-between">
<span className="text-sm text-secondary-foreground">Minting</span>
<div className="flex items-center">
<span className="mr-2 font-medium text-foreground">
<div className="flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between">
<span className="text-sm text-secondary-foreground">Depositing</span>
<div className="flex items-center justify-end gap-2">
<span className="font-medium text-foreground">
{amount} {selectedToken.symbol}
</span>
<AssetDisplay asset={selectedToken} size="sm" variant="logo-only" />
Expand All @@ -83,19 +93,34 @@ export function ConfirmStep({
<ArrowDown className="h-4 w-4 text-muted-foreground" />
</div>

<div className="flex items-center justify-between">
<div className="flex flex-col gap-1 sm:flex-row sm:items-start sm:justify-between">
<span className="text-sm text-secondary-foreground">Receiving</span>
<div className="flex items-center">
<span className="mr-2 font-medium text-foreground">
<div className="grid grid-cols-[1fr_auto] justify-items-end gap-x-2 gap-y-1">
<div className="col-start-1 row-start-1 text-right font-medium leading-tight text-foreground">
{expectedTokens} {leverageTokenConfig.symbol}
{expectedDebtAmount && expectedDebtAmount !== '0' && debtAssetSymbol && (
<>
{' '}
</div>
<div className="col-start-2 row-start-1 flex -space-x-1">
<AssetDisplay
asset={leverageTokenConfig.collateralAsset}
size="sm"
variant="logo-only"
/>
<AssetDisplay asset={leverageTokenConfig.debtAsset} size="sm" variant="logo-only" />
</div>
{expectedDebtAmount && expectedDebtAmount !== '0' && debtAssetSymbol && (
<>
<div className="col-start-1 row-start-2 flex items-center justify-end text-right text-xs leading-tight text-secondary-foreground">
+ {expectedDebtAmount} {debtAssetSymbol}
</>
)}
</span>
<TrendingUp className="h-4 w-4 text-brand-purple" />
</div>
<div className="col-start-2 row-start-2 flex items-center justify-end">
<AssetDisplay
asset={leverageTokenConfig.debtAsset}
size="sm"
variant="logo-only"
/>
</div>
</>
)}
</div>
</div>
</div>
Expand Down
83 changes: 44 additions & 39 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
@@ -1,4 +1,4 @@
import { AlertTriangle, ArrowDown, Loader2, Settings, TrendingUp } from 'lucide-react'
import { AlertTriangle, ArrowDown, Loader2, Settings } from 'lucide-react'
import { useEffect, useId, useRef } from 'react'
import { cn } from '@/lib/utils/cn'
import { Alert } from '../../../../components/ui/alert'
Expand Down Expand Up @@ -36,6 +36,12 @@ interface LeverageTokenConfig {
address: string
decimals: number
}
debtAsset: {
symbol: string
name: string
address: string
decimals: number
}
slippagePresets?: {
mint?: {
defaultShareSlippage?: string
Expand Down Expand Up @@ -316,48 +322,47 @@ export function InputStep({
<Card variant="gradient" className="gap-0 border border-border bg-card p-4">
<div className="mb-2 flex items-center justify-between">
<div className="text-sm text-secondary-foreground">Preview</div>
{isCalculating && (
<div className="flex items-center text-xs text-slate-400" aria-live="polite">
<Loader2 className="h-3 w-3 animate-spin" aria-label="Calculating" />
</div>
)}
</div>

<div className="flex items-end justify-between">
<div className="flex-1">
<div className="text-xl font-medium text-foreground">
{isCalculating ? <Skeleton className="h-6 w-20" /> : expectedTokens}
</div>
{!isCalculating && (
<>
<div className="text-xs text-secondary-foreground">
{expectedExcessDebt && expectedExcessDebt !== '0' && debtAssetSymbol && (
<>
{' '}
+ {expectedExcessDebt} {debtAssetSymbol}
</>
)}
</div>
<div className="text-xs text-secondary-foreground">
{expectedTokensUsdOutStr &&
expectedDebtUsdOutStr &&
expectedTotalUsdOutStr &&
expectedDebtUsdOutStr !== '0'
? `≈ $${expectedTokensUsdOutStr} + $${expectedDebtUsdOutStr} = $${expectedTotalUsdOutStr}`
: `≈ $${expectedTokensUsdOutStr}`}
</div>
</>
<div className="flex items-center gap-1.5">
{isCalculating && (
<Loader2 className="h-3 w-3 animate-spin text-slate-400" aria-label="Calculating" />
)}
</div>

<div className="ml-4 flex items-center space-x-2">
<div className="flex h-6 w-6 items-center justify-center rounded-full bg-accent">
<TrendingUp className="h-3 w-3 text-brand-purple" />
<div className="flex -space-x-1">
<AssetDisplay
asset={leverageTokenConfig.collateralAsset}
size="sm"
variant="logo-only"
/>
<AssetDisplay asset={leverageTokenConfig.debtAsset} size="sm" variant="logo-only" />
</div>
<div className="text-sm font-medium text-foreground">
<span className="text-sm font-medium text-foreground">
{leverageTokenConfig.symbol}
</div>
</span>
</div>
</div>

<div>
<div className="text-2xl font-semibold text-foreground">
{isCalculating ? <Skeleton className="h-7 w-28" /> : expectedTokens}
</div>
{!isCalculating && (
<>
<div className="text-xs text-secondary-foreground">
{expectedExcessDebt && expectedExcessDebt !== '0' && debtAssetSymbol && (
<>
+ {expectedExcessDebt} {debtAssetSymbol}
</>
)}
</div>
<div className="text-xs text-secondary-foreground">
{expectedTokensUsdOutStr &&
expectedDebtUsdOutStr &&
expectedTotalUsdOutStr &&
expectedDebtUsdOutStr !== '0'
? `≈ $${expectedTokensUsdOutStr} + $${expectedDebtUsdOutStr} = $${expectedTotalUsdOutStr}`
: `≈ $${expectedTokensUsdOutStr}`}
</div>
</>
)}
</div>
</Card>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/features/leverage-tokens/components/leverage-token-mint-modal/PendingStep.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ export function PendingStep({
<Card variant="gradient" className="border border-border bg-card p-4">
<div className="space-y-2 text-sm">
<div className="flex justify-between">
<span className="text-secondary-foreground">Minting</span>
<span className="text-secondary-foreground">Receiving</span>
<span className="text-foreground">
{expectedTokens} {leverageTokenConfig.symbol}
{expectedDebtAmount && expectedDebtAmount !== '0' && debtAssetSymbol && (
Expand Down
6 changes: 3 additions & 3 deletions src/features/leverage-tokens/components/leverage-token-mint-modal/SuccessStep.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,15 +42,15 @@ export function SuccessStep({
</div>
<h3 className="text-lg font-medium text-foreground mb-2">Mint Success!</h3>
<p className="text-secondary-foreground text-center max-w-sm text-sm">
Your {amount} {selectedToken.symbol} has been successfully minted into {expectedTokens}{' '}
{leverageTokenSymbol}.
Your {amount} {selectedToken.symbol} has been successfully deposited to mint{' '}
{expectedTokens} {leverageTokenSymbol}.
</p>
</div>

<Card variant="gradient" className="border border-border bg-card p-4">
<div className="space-y-2 text-sm">
<div className="flex justify-between">
<span className="text-secondary-foreground">Minted</span>
<span className="text-secondary-foreground">Deposited</span>
<span className="text-foreground">
{amount} {selectedToken.symbol}
</span>
Expand Down
8 changes: 6 additions & 2 deletions src/features/leverage-tokens/components/leverage-token-mint-modal/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -917,6 +917,8 @@ export function LeverageTokenMintModal({
name: leverageTokenConfig.name,
leverageRatio: leverageTokenConfig.leverageRatio,
chainId: leverageTokenConfig.chainId,
collateralAsset: leverageTokenConfig.collateralAsset,
debtAsset: leverageTokenConfig.debtAsset,
}}
onConfirm={handleConfirm}
disabled={
Expand Down Expand Up @@ -971,8 +973,10 @@ export function LeverageTokenMintModal({
<MultiStepModal
isOpen={isOpen}
onClose={handleClose}
title={currentStep === 'success' ? 'Mint Success' : 'Mint Leverage Token'}
description={currentStep === 'success' ? 'Your leverage tokens have been successfully.' : ''}
title={currentStep === 'success' ? 'Mint Success' : 'Mint Leverage Tokens'}
description={
currentStep === 'success' ? 'Your leverage tokens have been successfully minted.' : ''
}
currentStep={currentStep}
steps={steps}
className="max-w-xl border border-[var(--divider-line)] bg-[var(--surface-card)]"
Expand Down
66 changes: 47 additions & 19 deletions src/features/leverage-tokens/components/leverage-token-redeem-modal/ConfirmStep.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { ArrowDown, TrendingDown, Zap } from 'lucide-react'
import { ArrowDown, Zap } from 'lucide-react'
import { AssetDisplay } from '../../../../components/ui/asset-display'
import { Button } from '../../../../components/ui/button'
import { Card } from '../../../../components/ui/card'
import { Skeleton } from '../../../../components/ui/skeleton'
Expand All @@ -17,6 +18,16 @@ interface LeverageTokenConfig {
name: string
leverageRatio: number
chainId: number
collateralAsset: {
symbol: string
name: string
address: string
}
debtAsset: {
symbol: string
name: string
address: string
}
}

interface ConfirmStepProps {
Expand Down Expand Up @@ -74,33 +85,54 @@ export function ConfirmStep({

<Card variant="gradient" className="gap-0 border border-border bg-card p-4">
<div className="space-y-3">
<div className="flex items-center justify-between">
<div className="flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between">
<span className="text-sm text-secondary-foreground">Redeeming</span>
<div className="flex items-center">
<span className="mr-2 font-medium text-foreground">
<div className="flex items-center justify-end gap-2">
<span className="font-medium text-foreground">
{amount} {selectedToken.symbol}
</span>
<TrendingDown className="h-4 w-4 text-brand-purple" />
<div className="flex -space-x-1">
<AssetDisplay
asset={leverageTokenConfig.collateralAsset}
size="sm"
variant="logo-only"
/>
<AssetDisplay asset={leverageTokenConfig.debtAsset} size="sm" variant="logo-only" />
</div>
</div>
</div>

<div className="flex justify-center py-2">
<ArrowDown className="h-4 w-4 text-muted-foreground" />
</div>

<div className="flex items-center justify-between">
<div className="flex flex-col gap-1 sm:flex-row sm:items-start sm:justify-between">
<span className="text-sm text-secondary-foreground">Receiving</span>
<div className="flex items-center">
<span className="mr-2 font-medium text-foreground">
<div className="grid grid-cols-[1fr_auto] justify-items-end gap-x-2 gap-y-1">
<div className="col-start-1 row-start-1 text-right font-medium leading-tight text-foreground">
{expectedAmount} {selectedAsset}
{expectedDebtAmount && expectedDebtAmount !== '0' && debtAssetSymbol && (
<>
{' '}
</div>
<div className="col-start-2 row-start-1 flex justify-end">
<AssetDisplay
asset={leverageTokenConfig.collateralAsset}
size="sm"
variant="logo-only"
/>
</div>
{expectedDebtAmount && expectedDebtAmount !== '0' && debtAssetSymbol && (
<>
<div className="col-start-1 row-start-2 flex items-center justify-end text-right text-xs leading-tight text-secondary-foreground">
+ {expectedDebtAmount} {debtAssetSymbol}
</>
)}
</span>
<TrendingDown className="h-4 w-4 text-[var(--state-success-text)]" />
</div>
<div className="col-start-2 row-start-2 flex items-center justify-end">
<AssetDisplay
asset={leverageTokenConfig.debtAsset}
size="sm"
variant="logo-only"
/>
</div>
</>
)}
</div>
</div>
</div>
Expand All @@ -113,10 +145,6 @@ export function ConfirmStep({
<span className="text-secondary-foreground">Leverage Token</span>
<span className="text-foreground">{leverageTokenConfig.name}</span>
</div>
<div className="flex justify-between">
<span className="text-secondary-foreground">Redeem Asset</span>
<span className="text-foreground">{selectedAsset}</span>
</div>
<div className="flex justify-between">
<span className="text-secondary-foreground">Redemption Fee</span>
<span className="text-foreground">
Expand Down
Loading