add toast, force dynamic on proffile

packages/frontend/package.json

@@ -31,6 +31,7 @@
         "react-lottie": "^1.2.4",
         "sharp": "^0.33.5",
         "socket.io-client": "^4.7.5",
+        "sonner": "^1.5.0",
         "sp-sdk": "link:@types/@ethsign/sp-sdk",
         "tailwind-merge": "^2.5.2",
         "vaul": "^0.9.1",

packages/frontend/src/app/components/profile/WalletDetails.tsx

@@ -4,6 +4,7 @@ import { ChainSelector } from "./ChainSelector";
 import CopyIcon from "@/shared/icons/CopyIcon";
 import { useSelectedChainContext } from "@/utils/context/selected-chain.context";
 import { useWeb3AuthContext } from "@/utils/context/web3auth.context";
+import { toast } from "sonner";
 
 export function WalletDetails() {
     const { user } = useWeb3AuthContext();
@@ -29,14 +30,16 @@ export function WalletDetails() {
                     <p className="text-body-2 text-neutral-200">
                         {user.data.wallet_address.toUpperCase()}
                     </p>
-                    <CopyIcon
-                        className="cursor-pointer"
+                    <button
                         onClick={() => {
                             navigator.clipboard.writeText(
                                 user.data.wallet_address,
                             );
+                            toast("Copied to clipboard");
                         }}
-                    />
+                    >
+                        <CopyIcon className="cursor-pointer" />
+                    </button>
                 </div>
                 <div className="flex w-full justify-between gap-x-2 px-8 py-4">
                     <div className="flex flex-col gap-2">

packages/frontend/src/app/layout.tsx

@@ -9,6 +9,7 @@ import { MappedGameTier, ResponseWithData } from "@/utils/types";
 import clsx from "clsx";
 import type { Metadata } from "next";
 import { Big_Shoulders_Display, Inter } from "next/font/google";
+import { Toaster } from "sonner";
 
 const inter = Inter({
     subsets: ["latin"],
@@ -55,6 +56,7 @@ export default async function RootLayout({
                     <TierContextProvider tiers={tiers}>
                         <Web3AuthContextProvider>
                             <SelectedChainContextProvider>
+                                <Toaster richColors />
                                 <Header />
                                 <div className="relative min-h-0 flex-1 overflow-y-auto">
                                     {children}

packages/frontend/src/app/profile/page.tsx

@@ -6,6 +6,8 @@ import { useWeb3AuthContext } from "@/utils/context/web3auth.context";
 import { useRouter } from "next/navigation";
 import { useEffect } from "react";
 
+export const dynamic = "force-dynamic";
+
 const Profile: React.FC = () => {
     const { user } = useWeb3AuthContext();
 

packages/frontend/src/utils/context/web3auth.context.tsx

@@ -12,6 +12,7 @@ import {
     useEffect,
     useState,
 } from "react";
+import { toast } from "sonner";
 
 export type AuthUser = { data: MappedPlayer; token: string };
 
@@ -80,6 +81,7 @@ export const Web3AuthContextProvider = ({
     };
 
     const handleWeb3Auth = async () => {
+        setIsAuthenticating(true);
         try {
             if (web3auth.connected && web3auth.provider) {
                 const [userInfo, wallet_address] = await Promise.all([
@@ -94,11 +96,12 @@ export const Web3AuthContextProvider = ({
 
                 if (!authResponse) return;
                 setUser({ data: authResponse.user, token: authResponse.token });
+                toast.success("Logged in!");
             }
         } catch (error) {
             console.error(error);
-            setIsAuthenticating(false);
         }
+        setIsAuthenticating(false);
     };
 
     useEffect(() => {