Skip to content

Commit e4a295a

Browse files
Chucks1093Chucks1093
authored
Merge pull request #85 from devpeter999/feature/creator-profile-enhancements
Feature/creator profile enhancements
2 parents 2659771 + d85eb46 commit e4a295a

41 files changed

Lines changed: 1162 additions & 953 deletions

Some content is hidden

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

‎.prettierrc‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
{
2-
"tabWidth": 3,
3-
"useTabs": true,
4-
"semi": true,
5-
"singleQuote": true,
6-
"quoteProps": "as-needed",
7-
"trailingComma": "es5",
8-
"bracketSpacing": true,
9-
"bracketSameLine": false,
10-
"arrowParens": "avoid",
11-
"endOfLine": "lf",
12-
"embeddedLanguageFormatting": "auto"
2+
"tabWidth": 3,
3+
"useTabs": true,
4+
"semi": true,
5+
"singleQuote": true,
6+
"quoteProps": "as-needed",
7+
"trailingComma": "es5",
8+
"bracketSpacing": true,
9+
"bracketSameLine": false,
10+
"arrowParens": "avoid",
11+
"endOfLine": "lf",
12+
"embeddedLanguageFormatting": "auto"
1313
}

‎components.json‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
{
2-
"$schema": "https://ui.shadcn.com/schema.json",
3-
"style": "new-york",
4-
"rsc": false,
5-
"tsx": true,
6-
"tailwind": {
7-
"config": "",
8-
"css": "src/index.css",
9-
"baseColor": "zinc",
10-
"cssVariables": true,
11-
"prefix": ""
12-
},
13-
"aliases": {
14-
"components": "@/components",
15-
"utils": "@/lib/utils",
16-
"ui": "@/components/ui",
17-
"lib": "@/lib",
18-
"hooks": "@/hooks"
19-
},
20-
"iconLibrary": "lucide"
21-
}
2+
"$schema": "https://ui.shadcn.com/schema.json",
3+
"style": "new-york",
4+
"rsc": false,
5+
"tsx": true,
6+
"tailwind": {
7+
"config": "",
8+
"css": "src/index.css",
9+
"baseColor": "zinc",
10+
"cssVariables": true,
11+
"prefix": ""
12+
},
13+
"aliases": {
14+
"components": "@/components",
15+
"utils": "@/lib/utils",
16+
"ui": "@/components/ui",
17+
"lib": "@/lib",
18+
"hooks": "@/hooks"
19+
},
20+
"iconLibrary": "lucide"
21+
}

‎docs/BuyActionHelperText-DisabledReason.md‎

Lines changed: 86 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -12,48 +12,48 @@ The `BuyActionHelperText` component now supports displaying a disabled reason me
1212
import BuyActionHelperText from '@/components/common/BuyActionHelperText';
1313

1414
<BuyActionHelperText
15-
state="idle"
16-
disabledReason="Insufficient balance to complete this purchase"
17-
className="mt-4"
18-
/>
15+
state="idle"
16+
disabledReason="Insufficient balance to complete this purchase"
17+
className="mt-4"
18+
/>;
1919
```
2020

2121
### With CreatorCard
2222

2323
```tsx
2424
const CreatorCard: React.FC<CreatorCardProps> = ({ creator, className }) => {
25-
const { isConnected } = useAccount();
26-
const [transactionState, setTransactionState] = useState<
27-
'idle' | 'submitting' | 'failed' | 'success'
28-
>('idle');
29-
30-
// Example: Check if user has sufficient balance
31-
const hasInsufficientBalance = true; // Replace with actual balance check
32-
const disabledReason = hasInsufficientBalance
33-
? 'Insufficient balance to complete this purchase'
34-
: undefined;
35-
36-
return (
37-
<div>
38-
{/* ... other card content ... */}
39-
40-
<BuyActionHelperText
41-
state={transactionState}
42-
disabledReason={disabledReason}
43-
className="mt-4"
44-
/>
45-
</div>
46-
);
25+
const { isConnected } = useAccount();
26+
const [transactionState, setTransactionState] = useState<
27+
'idle' | 'submitting' | 'failed' | 'success'
28+
>('idle');
29+
30+
// Example: Check if user has sufficient balance
31+
const hasInsufficientBalance = true; // Replace with actual balance check
32+
const disabledReason = hasInsufficientBalance
33+
? 'Insufficient balance to complete this purchase'
34+
: undefined;
35+
36+
return (
37+
<div>
38+
{/* ... other card content ... */}
39+
40+
<BuyActionHelperText
41+
state={transactionState}
42+
disabledReason={disabledReason}
43+
className="mt-4"
44+
/>
45+
</div>
46+
);
4747
};
4848
```
4949

5050
## Props
5151

52-
| Prop | Type | Required | Description |
53-
|------|------|----------|-------------|
54-
| `state` | `'idle' \| 'submitting' \| 'failed' \| 'success'` | Yes | Current transaction state |
55-
| `className` | `string` | No | Additional CSS classes |
56-
| `disabledReason` | `string` | No | Reason message when action is disabled |
52+
| Prop | Type | Required | Description |
53+
| ---------------- | ------------------------------------------------- | -------- | -------------------------------------- |
54+
| `state` | `'idle' \| 'submitting' \| 'failed' \| 'success'` | Yes | Current transaction state |
55+
| `className` | `string` | No | Additional CSS classes |
56+
| `disabledReason` | `string` | No | Reason message when action is disabled |
5757

5858
## Behavior
5959

@@ -64,6 +64,7 @@ const CreatorCard: React.FC<CreatorCardProps> = ({ creator, className }) => {
6464
## Styling
6565

6666
The disabled reason text uses:
67+
6768
- Font size: `0.72rem` (matching the main message)
6869
- Color: `text-white/40` (subtle, non-intrusive)
6970
- Animation: Framer Motion with opacity and height transitions
@@ -73,19 +74,19 @@ The disabled reason text uses:
7374

7475
```tsx
7576
// Insufficient balance
76-
disabledReason="Insufficient balance to complete this purchase"
77+
disabledReason = 'Insufficient balance to complete this purchase';
7778

7879
// Network issue
79-
disabledReason="Network connection required to proceed"
80+
disabledReason = 'Network connection required to proceed';
8081

8182
// Wallet not connected
82-
disabledReason="Connect your wallet to enable purchases"
83+
disabledReason = 'Connect your wallet to enable purchases';
8384

8485
// Creator unavailable
85-
disabledReason="This creator is currently unavailable"
86+
disabledReason = 'This creator is currently unavailable';
8687

8788
// Maximum keys reached
88-
disabledReason="Maximum number of keys already purchased"
89+
disabledReason = 'Maximum number of keys already purchased';
8990
```
9091

9192
## Safe Empty Content Handling
@@ -110,6 +111,7 @@ const hasDisabledReason = disabledReason && disabledReason.trim().length > 0;
110111
```
111112

112113
This ensures:
114+
113115
- Null/undefined values are handled
114116
- Empty strings are ignored
115117
- Whitespace-only strings are ignored
@@ -130,53 +132,53 @@ import BuyActionHelperText from '@/components/common/BuyActionHelperText';
130132
import { Button } from '@/components/ui/button';
131133

132134
export function BuyActionExample() {
133-
const { isConnected } = useAccount();
134-
const [transactionState, setTransactionState] = useState<
135-
'idle' | 'submitting' | 'failed' | 'success'
136-
>('idle');
137-
138-
// Example conditions that might disable an action
139-
const userBalance = 0.5; // ETH
140-
const requiredAmount = 1.0; // ETH
141-
const isNetworkAvailable = true;
142-
const hasReachedLimit = false;
143-
144-
// Determine disabled reason based on conditions
145-
const getDisabledReason = () => {
146-
if (!isConnected) {
147-
return 'Connect your wallet to enable purchases';
148-
}
149-
if (userBalance < requiredAmount) {
150-
return `Insufficient balance. You need ${requiredAmount - userBalance} ETH more`;
151-
}
152-
if (!isNetworkAvailable) {
153-
return 'Network connection required to proceed';
154-
}
155-
if (hasReachedLimit) {
156-
return 'Maximum number of keys already purchased';
157-
}
158-
return undefined; // No disabled reason
159-
};
160-
161-
const disabledReason = getDisabledReason();
162-
const isDisabled = !!disabledReason || transactionState === 'submitting';
163-
164-
return (
165-
<div className="space-y-4">
166-
<Button
167-
onClick={() => setTransactionState('submitting')}
168-
disabled={isDisabled}
169-
variant={isConnected ? 'default' : 'outline'}
170-
>
171-
Buy Key
172-
</Button>
173-
174-
<BuyActionHelperText
175-
state={transactionState}
176-
disabledReason={disabledReason}
177-
className="mt-4"
178-
/>
179-
</div>
180-
);
135+
const { isConnected } = useAccount();
136+
const [transactionState, setTransactionState] = useState<
137+
'idle' | 'submitting' | 'failed' | 'success'
138+
>('idle');
139+
140+
// Example conditions that might disable an action
141+
const userBalance = 0.5; // ETH
142+
const requiredAmount = 1.0; // ETH
143+
const isNetworkAvailable = true;
144+
const hasReachedLimit = false;
145+
146+
// Determine disabled reason based on conditions
147+
const getDisabledReason = () => {
148+
if (!isConnected) {
149+
return 'Connect your wallet to enable purchases';
150+
}
151+
if (userBalance < requiredAmount) {
152+
return `Insufficient balance. You need ${requiredAmount - userBalance} ETH more`;
153+
}
154+
if (!isNetworkAvailable) {
155+
return 'Network connection required to proceed';
156+
}
157+
if (hasReachedLimit) {
158+
return 'Maximum number of keys already purchased';
159+
}
160+
return undefined; // No disabled reason
161+
};
162+
163+
const disabledReason = getDisabledReason();
164+
const isDisabled = !!disabledReason || transactionState === 'submitting';
165+
166+
return (
167+
<div className="space-y-4">
168+
<Button
169+
onClick={() => setTransactionState('submitting')}
170+
disabled={isDisabled}
171+
variant={isConnected ? 'default' : 'outline'}
172+
>
173+
Buy Key
174+
</Button>
175+
176+
<BuyActionHelperText
177+
state={transactionState}
178+
disabledReason={disabledReason}
179+
className="mt-4"
180+
/>
181+
</div>
182+
);
181183
}
182184
```

‎eslint.config.js‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
1-
import js from '@eslint/js'
2-
import globals from 'globals'
3-
import reactHooks from 'eslint-plugin-react-hooks'
4-
import reactRefresh from 'eslint-plugin-react-refresh'
5-
import tseslint from 'typescript-eslint'
6-
import { globalIgnores } from 'eslint/config'
1+
import js from '@eslint/js';
2+
import globals from 'globals';
3+
import reactHooks from 'eslint-plugin-react-hooks';
4+
import reactRefresh from 'eslint-plugin-react-refresh';
5+
import tseslint from 'typescript-eslint';
6+
import { globalIgnores } from 'eslint/config';
77

88
export default tseslint.config([
9-
globalIgnores(['dist']),
10-
{
11-
files: ['**/*.{ts,tsx}'],
12-
extends: [
13-
js.configs.recommended,
14-
tseslint.configs.recommended,
15-
reactHooks.configs['recommended-latest'],
16-
reactRefresh.configs.vite,
17-
],
18-
languageOptions: {
19-
ecmaVersion: 2020,
20-
globals: globals.browser,
21-
},
22-
},
23-
])
9+
globalIgnores(['dist']),
10+
{
11+
files: ['**/*.{ts,tsx}'],
12+
extends: [
13+
js.configs.recommended,
14+
tseslint.configs.recommended,
15+
reactHooks.configs['recommended-latest'],
16+
reactRefresh.configs.vite,
17+
],
18+
languageOptions: {
19+
ecmaVersion: 2020,
20+
globals: globals.browser,
21+
},
22+
},
23+
]);

‎src/components/common/BackHeader.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,12 @@ interface BackHeaderProps {
99
className?: string;
1010
}
1111

12-
const BackHeader: React.FC<BackHeaderProps> = ({ title, subtitle, onBack, className }) => {
12+
const BackHeader: React.FC<BackHeaderProps> = ({
13+
title,
14+
subtitle,
15+
onBack,
16+
className,
17+
}) => {
1318
const navigate = useNavigate();
1419

1520
const handleBack = () => {
@@ -34,7 +39,9 @@ const BackHeader: React.FC<BackHeaderProps> = ({ title, subtitle, onBack, classN
3439
{title}
3540
</h1>
3641
{subtitle && (
37-
<p className="font-jakarta text-sm text-white/50 truncate">{subtitle}</p>
42+
<p className="font-jakarta text-sm text-white/50 truncate">
43+
{subtitle}
44+
</p>
3845
)}
3946
</div>
4047
</div>

‎src/components/common/BuyActionHelperText.tsx‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,9 @@ const BuyActionHelperText: React.FC<BuyActionHelperTextProps> = ({
3535
border: 'border-amber-500/30',
3636
accent: 'bg-amber-500',
3737
text: 'text-amber-200/90',
38-
icon: <Loader2 className="size-3.5 animate-spin text-amber-400" />,
38+
icon: (
39+
<Loader2 className="size-3.5 animate-spin text-amber-400" />
40+
),
3941
};
4042
case 'failed':
4143
return {
@@ -78,7 +80,9 @@ const BuyActionHelperText: React.FC<BuyActionHelperTextProps> = ({
7880
className
7981
)}
8082
>
81-
<div className={cn('absolute left-0 top-0 h-full w-1', styles.accent)} />
83+
<div
84+
className={cn('absolute left-0 top-0 h-full w-1', styles.accent)}
85+
/>
8286
<div className="flex items-start gap-3">
8387
<div className="mt-0.5 shrink-0">{styles.icon}</div>
8488
<div className="flex-1 space-y-2">
@@ -89,7 +93,10 @@ const BuyActionHelperText: React.FC<BuyActionHelperTextProps> = ({
8993
animate={{ opacity: 1, x: 0 }}
9094
exit={{ opacity: 0, x: 4 }}
9195
transition={{ duration: 0.2 }}
92-
className={cn('text-[0.72rem] font-medium leading-relaxed', styles.text)}
96+
className={cn(
97+
'text-[0.72rem] font-medium leading-relaxed',
98+
styles.text
99+
)}
93100
>
94101
{getMessage()}
95102
</motion.p>

0 commit comments

Comments
 (0)