Feat/adding toaster (#115)

apps/web/package.json

@@ -40,6 +40,7 @@
 		"pinata-web3": "^0.5.3",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
+		"react-hot-toast": "^2.5.1",
 		"react-i18next": "^15.0.2",
 		"server-only": "^0.0.1",
 		"starknet": "^6.11.0",

apps/web/src/app/_components/features/SelectionTypeCard.tsx

@@ -2,6 +2,7 @@ import Button from "@repo/ui/button";
 import { InfoCard } from "@repo/ui/infoCard";
 import { Text } from "@repo/ui/typography";
 import { useState } from "react";
+import toast from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 
 interface SelectionTypeCardProps {
@@ -42,6 +43,11 @@ export function SelectionTypeCard({
 		},
 	];
 
+	const handleAddToCart = () => {
+		onAddToCart();
+		toast.success("Product added to cart successfully!");
+	};
+
 	return (
 		<InfoCard title={t("select_coffee_type")} options={coffeeOptions}>
 			<div className="flex flex-col">
@@ -82,7 +88,11 @@ export function SelectionTypeCard({
 				</button>
 			</div>
 
-			<Button variant="primary" onClick={onAddToCart} disabled={isAddingToCart}>
+			<Button
+				variant="primary"
+				onClick={handleAddToCart}
+				disabled={isAddingToCart}
+			>
 				{isAddingToCart ? t("adding_to_cart") : t("add_to_cart")}
 			</Button>
 		</InfoCard>

apps/web/src/app/layout.tsx

@@ -1,8 +1,9 @@
 "use client";
-
 import { useEffect } from "react";
+import { Toaster } from "react-hot-toast";
 import "~/styles/globals.css";
 import "~/i18n";
+import { CheckCircleIcon } from "@heroicons/react/20/solid";
 import { GeistSans } from "geist/font/sans";
 import { SessionProvider } from "next-auth/react";
 import i18n from "~/i18n";
@@ -34,6 +35,26 @@ export default function RootLayout({
 						<TRPCReactProvider>{children}</TRPCReactProvider>
 					</StarknetProvider>
 				</SessionProvider>
+				<Toaster
+					position="top-center"
+					toastOptions={{
+						duration: 3000,
+						style: {
+							backgroundColor: "#E9F1EF",
+							color: "#3B3E3F",
+						},
+						success: {
+							icon: <CheckCircleIcon className="w-6 h-6 text-[#067c6d]" />,
+						},
+						error: {
+							style: {
+								backgroundColor: "#E9F1EF",
+								color: "#3B3E3F",
+							},
+							icon: <CheckCircleIcon className="w-6 h-6 text-[red]" />,
+						},
+					}}
+				/>
 			</body>
 		</html>
 	);