Skip to content

Commit 611f31d

Browse files
xorsalxorsal
committed
Merge branch 'dev' into feat/walletless-e2e
2 parents 794b7f7 + a7f58da commit 611f31d

File tree

152 files changed

+10240
-8637
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

152 files changed

+10240
-8637
lines changed

‎.cursor/rules/UI/react-components.mdc‎

Lines changed: 101 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,19 +6,108 @@ version: 1.0.0
66

77
# React Component Guidelines
88

9+
## UI Component Library
10+
11+
This project has a curated set of UI components in `src/components/ui/`. **Always use these components instead of creating new ones or using native HTML elements.**
12+
13+
### Available Components
14+
15+
- **`Button`** - All clickable actions (variants: primary, secondary, ghost, danger, icon, toggle)
16+
- **`Input`** - Text inputs with label, error, and helper text support
17+
- **`Textarea`** - Multi-line text inputs
18+
- **`Select`** - Dropdowns (SelectTrigger, SelectContent, SelectItem)
19+
- **`Card`** - Content containers (CardHeader, CardTitle, CardDescription, CardContent)
20+
- **`Badge`** - Status indicators (variants: default, primary, success, warning, error, info)
21+
- **`Tabs`** - Tab navigation (TabsList, TabsTrigger, TabsContent)
22+
- **`Dialog`** - Modals (DialogTrigger, DialogContent, DialogHeader, DialogFooter)
23+
- **`Toast`** - Notifications via `useToast()` hook
24+
- **`Tooltip`** - Hover information (TooltipTrigger, TooltipContent)
25+
- **`Toggle`** - Toggle buttons with pressed state
26+
27+
### Usage Example
28+
29+
```tsx
30+
import {
31+
Button,
32+
Card,
33+
CardHeader,
34+
CardTitle,
35+
CardContent,
36+
Badge,
37+
} from '../components/ui';
38+
39+
const MyComponent = () => (
40+
<Card>
41+
<CardHeader>
42+
<CardTitle>Title</CardTitle>
43+
</CardHeader>
44+
<CardContent>
45+
<Badge variant="success">Active</Badge>
46+
<Button variant="primary">Submit</Button>
47+
</CardContent>
48+
</Card>
49+
);
50+
```
51+
52+
## Adding New Components
53+
54+
When you need a new UI component:
55+
56+
1. **Check Radix UI Primitives first**: https://www.radix-ui.com/primitives/docs/overview/introduction
57+
2. If it exists in Radix, create a wrapper in `src/components/ui/ComponentName.tsx`
58+
3. Style with Tailwind using CVA (class-variance-authority) for variants
59+
4. **Use internal module pattern** for exports:
60+
61+
```typescript
62+
// src/components/ui/MyComponent.tsx
63+
export const MyComponent = () => { ... }
64+
65+
// src/components/ui/index.ts (public interface)
66+
export { MyComponent, type MyComponentProps } from './MyComponent';
67+
```
68+
69+
5. Add examples to `UIComponentsShowcase.tsx`
70+
6. **Update documentation**:
71+
- Add to the "Available Components" list in this file
72+
- Update `CLAUDE.md` if it's a commonly-used component
73+
74+
### Radix Integration Pattern
75+
76+
```tsx
77+
import * as DialogPrimitive from '@radix-ui/react-dialog';
78+
import { cn } from '../../utils';
79+
80+
const DialogContent = React.forwardRef<...>(({ className, ...props }, ref) => (
81+
<DialogPrimitive.Portal>
82+
<DialogPrimitive.Content
83+
ref={ref}
84+
className={cn('base-classes', className)}
85+
{...props}
86+
/>
87+
</DialogPrimitive.Portal>
88+
));
89+
```
90+
991
## Component Structure
10-
- Abstract complex logic from render functions
11-
- Keep render methods simple and declarative
12-
- Split complex components into smaller ones
13-
- Use hooks for side effects and state management
1492

15-
## Import Order
16-
1. React imports
17-
2. Third-party libraries
18-
3. Internal files
93+
1. **Imports**: React → Third-party → Internal
94+
2. **Styles object**: Define all Tailwind classes
95+
3. **Types/Interfaces**: Component props
96+
4. **Component function**: Keep render logic simple
97+
5. **Export**: Named exports preferred
1998

2099
## Best Practices
21-
- Use logical AND (`&&`) over ternary conditionals for clarity
22-
- Keep components focused and reusable
23-
- Follow React hooks best practices
24-
- Avoid inline styles
100+
101+
- Use logical AND (`&&`) over ternary for conditional rendering
102+
- Keep components focused and single-purpose
103+
- Use hooks for side effects and state management
104+
- Split complex components into smaller ones
105+
- Abstract complex logic from render functions
106+
107+
## Hooks
108+
109+
Use the provided hooks from `src/hooks/`:
110+
111+
- `useToast()` - Notifications (success/error/warning/info/loading)
112+
- `useModal()` - Modal state (`MODAL_IDS`)
113+
- `useTheme()` - Theme toggle

‎.cursor/rules/UI/react-icons.mdc‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
---
2+
description: Icon usage guidelines with Lucide React
3+
globs: **/*.tsx
4+
version: 1.0.0
5+
---
6+
7+
# Icon Guidelines
8+
9+
## Icon Library
10+
11+
This project uses **Lucide React** for all icons. Browse available icons at: https://lucide.dev/icons/
12+
13+
## Usage
14+
15+
Use the `iconSize()` utility with Lucide's `size` prop for consistent sizing:
16+
17+
```tsx
18+
import { Home, Settings, AlertTriangle } from 'lucide-react';
19+
import { iconSize } from '../utils';
20+
21+
// Usage - size prop with iconSize(), className for colors/styles
22+
<Home size={iconSize()} /> // sm (16px) - default
23+
<Settings size={iconSize('md')} /> // md (20px)
24+
<AlertTriangle size={iconSize('lg')} className="text-amber-500" />
25+
```
26+
27+
## Standard Sizes
28+
29+
- `iconSize('xs')` - 12px - Very small inline elements
30+
- `iconSize()` - 16px (sm) - **Default**, inline text, buttons
31+
- `iconSize('md')` - 20px - Slightly larger, tab icons
32+
- `iconSize('lg')` - 24px - Headers
33+
- `iconSize('xl')` - 32px - Card headers, hero sections
34+
- `iconSize('2xl')` - 48px - Large illustrations, error states
35+
36+
## Styling Icons
37+
38+
Use `size` prop for dimensions, `className` for colors and other styles:
39+
40+
```tsx
41+
const styles = {
42+
headerIcon: 'text-accent',
43+
warningIcon: 'text-amber-500',
44+
} as const;
45+
46+
<Coins size={iconSize('xl')} className={styles.headerIcon} />
47+
<AlertTriangle size={iconSize('md')} className={styles.warningIcon} />
48+
```
49+
50+
## Icons in Buttons
51+
52+
Use the `icon` prop on the Button component:
53+
54+
```tsx
55+
import { Rocket } from 'lucide-react';
56+
import { iconSize } from '../utils';
57+
import { Button } from '../components/ui';
58+
59+
<Button icon={<Rocket size={iconSize()} />}>Deploy</Button>;
60+
```
61+
62+
## Icon-Only Buttons
63+
64+
Use Button with `variant="icon"` and `size="icon"`:
65+
66+
```tsx
67+
import { Copy } from 'lucide-react';
68+
import { iconSize } from '../utils';
69+
import { Button } from '../components/ui';
70+
71+
<Button variant="icon" size="icon">
72+
<Copy size={iconSize()} />
73+
</Button>;
74+
```
75+
76+
## Common Icons by Purpose
77+
78+
- **Actions**: `Copy`, `Download`, `Upload`, `Edit`, `Trash2`, `Plus`, `Minus`
79+
- **Navigation**: `Home`, `Settings`, `Menu`, `ChevronLeft`, `ChevronRight`, `ExternalLink`
80+
- **Status**: `Check`, `X`, `AlertTriangle`, `Info`, `XCircle`, `CheckCircle`
81+
- **Objects**: `User`, `Mail`, `Calendar`, `File`, `Folder`, `Image`
82+
- **Crypto/Blockchain**: `Coins`, `Wallet`, `Shield`, `Globe`, `Lock`, `Key`
83+
84+
## Do NOT Use
85+
86+
- Emojis for icons (❌ 🚀 ✅) - use Lucide icons instead
87+
- Inline SVGs - import from Lucide
88+
- Other icon libraries - maintain consistency with Lucide
89+
- Hardcoded `h-X w-X` classes for icon sizing - use `iconSize()` instead

‎.cursor/rules/UI/react-styling.mdc‎

Lines changed: 111 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,118 @@
11
---
2-
description: React styling guidelines
2+
description: React styling guidelines with Tailwind CSS
33
globs: **/*.tsx
44
version: 1.0.0
55
---
66

77
# React Styling Guidelines
88

9-
## Style Organization
10-
- Use CSS-in-JS or external stylesheets
11-
- Follow team styling conventions
12-
- Maintain consistent spacing and formatting
13-
- Use design system tokens when available
14-
15-
## Best Practices
16-
- Implement responsive design patterns
17-
- Use CSS modules or styled-components
18-
- Follow BEM or similar naming conventions
19-
- Keep styles modular and reusable
9+
## The Styles Pattern (MANDATORY)
10+
11+
All Tailwind classes MUST be defined in a `styles` object at the top of the component file. **NEVER use inline className strings directly in JSX**.
12+
13+
### ✅ Correct Pattern
14+
15+
```tsx
16+
const styles = {
17+
container: 'flex flex-col gap-4',
18+
title: 'text-lg font-semibold text-default',
19+
button: 'px-4 py-2 bg-accent text-on-accent rounded-lg',
20+
} as const;
21+
22+
export const MyComponent = () => (
23+
<div className={styles.container}>
24+
<h1 className={styles.title}>Title</h1>
25+
<button className={styles.button}>Click</button>
26+
</div>
27+
);
28+
```
29+
30+
### ❌ Incorrect Pattern
31+
32+
```tsx
33+
// NEVER do this - inline className strings are forbidden
34+
export const MyComponent = () => (
35+
<div className="flex flex-col gap-4">
36+
<h1 className="text-lg font-semibold text-default">Title</h1>
37+
</div>
38+
);
39+
```
40+
41+
## Style Object Rules
42+
43+
1. **Location**: Define `styles` object BEFORE the component function
44+
2. **Type Safety**: Always use `as const` for type inference
45+
3. **Naming**: Use camelCase keys that describe the element's purpose
46+
4. **Grouping**: Group related styles with comments
47+
5. **Nested Objects**: Use for icon sizes or variants (e.g., `icon: { sm: '...', md: '...' }`)
48+
49+
### Example with Grouping
50+
51+
```tsx
52+
const styles = {
53+
// Layout
54+
container: 'flex flex-col gap-4 p-6',
55+
header: 'flex items-center justify-between',
56+
content: 'space-y-4',
57+
// Typography
58+
title: 'text-xl font-bold text-default',
59+
description: 'text-sm text-muted',
60+
// Icons
61+
icon: {
62+
sm: 'h-4 w-4',
63+
md: 'h-5 w-5',
64+
lg: 'h-6 w-6',
65+
},
66+
} as const;
67+
```
68+
69+
## Using cn() for Conditional Classes
70+
71+
Use the `cn()` utility from `@/utils` ONLY when you need conditional or dynamic classes:
72+
73+
```tsx
74+
import { cn } from '../utils';
75+
76+
const styles = {
77+
button: 'px-4 py-2 rounded-lg transition-colors',
78+
buttonActive: 'bg-accent text-on-accent',
79+
buttonInactive: 'bg-surface text-muted',
80+
} as const;
81+
82+
// Usage with cn() for conditionals
83+
<button className={cn(styles.button, isActive ? styles.buttonActive : styles.buttonInactive)}>
84+
```
85+
86+
## Theme-Aware Custom Classes
87+
88+
Use the custom utility classes defined in `globals.css` for theme support:
89+
90+
- Backgrounds: `bg-surface`, `bg-surface-secondary`, `bg-surface-tertiary`
91+
- Text: `text-default`, `text-muted`, `text-accent`
92+
- Borders: `border-default`
93+
- Gradients: `gradient-primary`, `gradient-secondary`
94+
- Shadows: `shadow-theme`, `shadow-theme-hover`, `shadow-theme-lg`
95+
96+
## Dark Mode
97+
98+
The `dark:` variant is configured in `globals.css`. Use it for theme-specific overrides:
99+
100+
```tsx
101+
const styles = {
102+
text: 'text-gray-900 dark:text-gray-100',
103+
} as const;
104+
```
105+
106+
## Component-Specific Styling via Props
107+
108+
When a UI component accepts a `className` prop, pass additional styles through it:
109+
110+
```tsx
111+
<Button variant="primary" className={styles.submitButton}>
112+
Submit
113+
</Button>
114+
```
115+
116+
## Exceptions
117+
118+
The only exception to the styles pattern is for **primitive UI components** in `src/components/ui/`. These internal components may use inline classes as they are the building blocks.

‎.nvmrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
22

0 commit comments

Comments
 (0)