feat(ui): add social handle row (#13) & reusable transaction success toast

src/components/common/CreatorCard.tsx

@@ -2,8 +2,9 @@ import { useAccount } from 'wagmi';
 import { Button } from '@/components/ui/button';
 import type { Course } from '@/services/course.service';
 import { cn } from '@/lib/utils';
-import { ShoppingCart, Wallet } from 'lucide-react';
+import { ShoppingCart, Wallet, Link as LinkIcon } from 'lucide-react';
 import toast from 'react-hot-toast';
+import showToast from '@/utils/toast.util';
 
 interface CreatorCardProps {
 	creator: Course;
@@ -22,10 +23,14 @@ const CreatorCard: React.FC<CreatorCardProps> = ({ creator, className }) => {
 			return;
 		}
 
-		toast.success(`Purchasing keys for ${creator.title}...`, {
-			duration: 3000,
-		});
+		showToast.loading(`Purchasing keys for ${creator.title}...`);
 		// Implementation for contract interaction would go here
+		setTimeout(() => {
+			showToast.transactionSuccess(
+				'Purchase Successful!',
+				`You successfully bought a key for ${creator.title}`
+			);
+		}, 1500);
 	};
 
 	return (
@@ -51,6 +56,17 @@ const CreatorCard: React.FC<CreatorCardProps> = ({ creator, className }) => {
 				<p className="font-jakarta text-sm text-white/50">
 					@{creator.instructorId || 'creator'}
 				</p>
+				{creator.socialHandle ? (
+					<div className="mt-2 flex items-center gap-1.5 text-xs text-white/60">
+						<LinkIcon className="size-3 text-amber-500/70" />
+						<span className="truncate">@{creator.socialHandle}</span>
+					</div>
+				) : (
+					<div className="mt-2 flex items-center gap-1.5 text-xs text-white/30 italic">
+						<LinkIcon className="size-3 opacity-50" />
+						<span>No public handle</span>
+					</div>
+				)}
 			</div>
 
 			<div className="flex items-center justify-between gap-4">

src/services/course.service.ts

@@ -10,6 +10,7 @@ export interface Course {
 	thumbnail?: string;
 	category: string;
 	level: 'BEGINNER' | 'INTERMEDIATE' | 'ADVANCED';
+	socialHandle?: string;
 }
 
 export interface GetCoursesParams {

src/utils/toast.util.tsx

@@ -0,0 +1,47 @@
+import toast from "react-hot-toast";
+
+const showToast = {
+	message: (message: string) => {
+		toast.remove();
+		toast(message);
+	},
+	success: (message: string) => {
+		toast.remove();
+		toast.success(message);
+	},
+	error: (message: string) => {
+		toast.remove();
+		toast.error(message);
+	},
+	loading: (message: string) => {
+		toast.remove();
+		toast.loading(message);
+	},
+	transactionSuccess: (title: string, message?: string) => {
+		toast.remove();
+		toast.custom((t) => (
+			<div
+				className={`${
+					t.visible ? 'animate-enter' : 'animate-leave'
+				} pointer-events-auto flex w-full max-w-sm rounded-xl border border-amber-500/20 bg-slate-900 shadow-xl shadow-amber-500/10`}
+			>
+				<div className="flex w-full p-4">
+					<div className="flex items-start">
+						<div className="ml-3 flex-1">
+							<p className="font-jakarta text-sm font-bold text-white">
+								{title}
+							</p>
+							{message && (
+								<p className="mt-1 font-jakarta text-sm text-white/60">
+									{message}
+								</p>
+							)}
+						</div>
+					</div>
+				</div>
+			</div>
+		), { duration: 4000 });
+	},
+};
+
+export default showToast;