Merge pull request #90 from Lynndabel/creator

 Add creator card network fee hint

Author: Chucks1093

src/components/common/CreatorCard.tsx

@@ -1,11 +1,14 @@
 import { useRef, useState } from 'react';
 import { useAccount } from 'wagmi';
-import { AsyncButton } from '@/components/ui/async-button';
 import type { Course } from '@/services/course.service';
 import { cn } from '@/lib/utils';
 import { ShoppingCart, Link as LinkIcon, TrendingUp } from 'lucide-react';
 import toast from 'react-hot-toast';
 import showToast from '@/utils/toast.util';
+import { formatCompactNumber, formatNumber } from '@/utils/numberFormat.utils';
+import { AsyncButton } from '@/components/ui/async-button';
+import { useNetworkMismatch } from '@/hooks/useNetworkMismatch';
+import { useTransactionTelemetry } from '@/hooks/useTransactionTelemetry';
 import TransactionRetryNotice from '@/components/common/TransactionRetryNotice';
 import TransactionFailureDrawer from '@/components/common/TransactionFailureDrawer';
 import type { TransactionFailureDetails } from '@/components/common/TransactionFailureDrawer';
@@ -21,10 +24,8 @@ import Change24hBadge from '@/components/common/Change24hBadge';
 import KeySupplyBadge from '@/components/common/KeySupplyBadge';
 import CreatorListRowDivider from '@/components/common/CreatorListRowDivider';
 import BuyActionHelperText from '@/components/common/BuyActionHelperText';
+import NetworkFeeHint from '@/components/common/NetworkFeeHint';
 import CreatorBio from '@/components/common/CreatorBio';
-import { useTransactionTelemetry } from '@/hooks/useTransactionTelemetry';
-import { useNetworkMismatch } from '@/hooks/useNetworkMismatch';
-import { formatCompactNumber, formatNumber } from '@/utils/numberFormat.utils';
 
 interface CreatorCardProps {
 	creator: Course;
@@ -218,7 +219,8 @@ const CreatorCard: React.FC<CreatorCardProps> = ({ creator, className }) => {
 			</div>
 			<CreatorListRowDivider className="mt-4 mb-2" />
 
-			<div className="flex items-center justify-end gap-4">
+			<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+				<NetworkFeeHint className="shrink-0" />
 				<AsyncButton
 					onClick={handleBuy}
 					variant={isConnected ? 'default' : 'outline'}

src/components/common/NetworkFeeHint.tsx

@@ -0,0 +1,39 @@
+import { cn } from '@/lib/utils';
+import { Zap } from 'lucide-react';
+
+interface NetworkFeeHintProps {
+	fee?: string;
+	className?: string;
+	variant?: 'chip' | 'text';
+}
+
+const NetworkFeeHint = ({
+	fee = '~0.0001 ETH',
+	className,
+	variant = 'chip',
+}: NetworkFeeHintProps) => {
+	if (variant === 'text') {
+		return (
+			<div className={cn('flex items-center gap-1.5 text-xs text-white/40', className)}>
+				<Zap className="size-3 text-amber-500/50" />
+				<span>Network fee: {fee}</span>
+			</div>
+		);
+	}
+
+	return (
+		<div
+			className={cn(
+				'inline-flex min-w-0 items-center gap-1.5 rounded-full border border-amber-500/20 bg-amber-500/5 px-2 py-1 text-[0.6rem] font-medium text-amber-200/70 backdrop-blur-sm',
+				className
+			)}
+		>
+			<Zap className="size-3 text-amber-500/60 shrink-0" />
+			<span className="truncate font-jakarta text-xs">
+				{fee}
+			</span>
+		</div>
+	);
+};
+
+export default NetworkFeeHint;

src/components/common/NetworkFeeHintExamples.tsx

@@ -0,0 +1,32 @@
+// Test component to demonstrate NetworkFeeHint usage
+// This file shows how the component can be used in different contexts
+
+import NetworkFeeHint from './NetworkFeeHint';
+
+export const NetworkFeeHintExamples = () => {
+  return (
+    <div className="space-y-4 p-4">
+      <div>
+        <h3 className="text-white mb-2">Chip Variant (Default)</h3>
+        <NetworkFeeHint fee="~0.0001 ETH" />
+      </div>
+      
+      <div>
+        <h3 className="text-white mb-2">Text Variant</h3>
+        <NetworkFeeHint fee="~0.0002 ETH" variant="text" />
+      </div>
+      
+      <div>
+        <h3 className="text-white mb-2">Custom Fee Amount</h3>
+        <NetworkFeeHint fee="~0.00005 ETH" />
+      </div>
+      
+      <div>
+        <h3 className="text-white mb-2">With Custom ClassName</h3>
+        <NetworkFeeHint fee="~0.0001 ETH" className="border-red-500/20 bg-red-500/5" />
+      </div>
+    </div>
+  );
+};
+
+export default NetworkFeeHintExamples;