Feature/ik/user profile page (#168)

* refactor header comp & add avatar from shadcn * add user profile page and dropdown menu with user avatar * add user profile page with statistics * fix leaderboard card styles * add disconnect fn to logout button & format totalrewards fn
t0lia · May 26, 2024 · 8c1c0f7 · 8c1c0f7
1 parent 29fe397
commit 8c1c0f7
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 12 deletions.
diff --git a/frontend/src/app/components/dropdown/dropdownFaucetMenu.tsx b/frontend/src/app/components/dropdown/dropdownFaucetMenu.tsx
@@ -52,7 +52,7 @@ function DropdownFaucetMenu() {
 
           <DropdownMenuSeparator className="h-[1px] bg-gray-300 m-[4px]" /> */}
 
-          {/* <DropdownMenuGroup>
+          <DropdownMenuGroup>
             <DropdownMenuLabel className="text-sm px-3 py-1">
               BNB Faucet & Bridge
             </DropdownMenuLabel>
@@ -74,7 +74,7 @@ function DropdownFaucetMenu() {
             </Link>
           </DropdownMenuGroup>
 
-          <DropdownMenuSeparator className="h-[1px] bg-gray-300 m-[4px]" /> */}
+          {/* <DropdownMenuSeparator className="h-[1px] bg-gray-300 m-[4px]" /> */}
 
           {/* <DropdownMenuGroup>
             <DropdownMenuLabel className="text-sm px-3 py-1">
@@ -105,7 +105,7 @@ function DropdownFaucetMenu() {
 
           <DropdownMenuSeparator className="h-[1px] bg-gray-300 m-[4px]" /> */}
 
-          <DropdownMenuGroup>
+          {/* <DropdownMenuGroup>
             <DropdownMenuLabel className="text-sm px-3 py-1">
               ETH Blast Sepolia
             </DropdownMenuLabel>
@@ -117,7 +117,7 @@ function DropdownFaucetMenu() {
                 Blastapi faucet
               </DropdownMenuItem>
             </Link>
-          </DropdownMenuGroup>
+          </DropdownMenuGroup> */}
         </DropdownMenuContent>
       </DropdownMenuPortal>
     </DropdownMenu>

diff --git a/frontend/src/app/components/game-page-header/gamePageHeader.tsx b/frontend/src/app/components/game-page-header/gamePageHeader.tsx
@@ -17,7 +17,7 @@ import {
 } from "@/app/components/ui/dropdown-menu";
 import { LogOut, User } from "lucide-react";
 import Link from "next/link";
-import { useAccount } from "wagmi";
+import { useAccount, useDisconnect } from "wagmi";
 
 interface IGamePageHeaderProps {
   isButtonDisabled?: boolean;
@@ -32,6 +32,7 @@ function GamePageHeader({
 }: IGamePageHeaderProps) {
   const { isSignedIn } = useSIWE();
   const { address } = useAccount();
+  const { disconnect } = useDisconnect();
   return (
     <header className="flex h-16 justify-between items-center">
       <Logo />
@@ -47,8 +48,8 @@ function GamePageHeader({
             <DropdownMenuTrigger>
               <Avatar className="ml-2">
                 <AvatarImage
-                  src="https://github.com/shadcn.png"
-                  alt="@shadcn"
+                  src="https://github.com/retypeme.png"
+                  alt="user logo"
                 />
                 <AvatarFallback>RTM</AvatarFallback>
               </Avatar>
@@ -64,7 +65,10 @@ function GamePageHeader({
                     </DropdownMenuItem>
                   </Link>
                   <DropdownMenuSeparator />
-                  <DropdownMenuItem className="cursor-pointer">
+                  <DropdownMenuItem
+                    className="cursor-pointer"
+                    onClick={() => disconnect()}
+                  >
                     <LogOut className="mr-2 h-4 w-4" />
                     <span>Log out</span>
                   </DropdownMenuItem>

diff --git a/frontend/src/app/user/[id]/page.tsx b/frontend/src/app/user/[id]/page.tsx
@@ -15,6 +15,7 @@ import { usePathname } from "next/navigation";
 import { useEffect, useState } from "react";
 import { useAccount } from "wagmi";
 import { Statistic } from "@/app/components/leaderboard-card/leaderboardCard";
+import { formatUnits } from "viem";
 
 export default function UserProfile() {
   const [data, setData] = useState<Statistic>({
@@ -52,7 +53,7 @@ export default function UserProfile() {
               <Card x-chunk="dashboard-01-chunk-0">
                 <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                   <CardTitle className="text-sm font-medium">
-                    Your Max Speed
+                    Max Speed
                   </CardTitle>
                   {/* <DollarSign className="h-4 w-4 text-muted-foreground" /> */}
                 </CardHeader>
@@ -66,7 +67,7 @@ export default function UserProfile() {
               <Card x-chunk="dashboard-01-chunk-1">
                 <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                   <CardTitle className="text-sm font-medium">
-                    Overall Wins In Duels
+                    Wins In Duels
                   </CardTitle>
                   {/* <Users className="h-4 w-4 text-muted-foreground" /> */}
                 </CardHeader>
@@ -88,7 +89,10 @@ export default function UserProfile() {
                 </CardHeader>
                 <CardContent>
                   <div className="text-2xl font-bold">
-                    $ {data?.totalReward}
+                    {data.totalReward
+                      ? formatUnits(BigInt(data?.totalReward), 10)
+                      : "0"}{" "}
+                    ETH
                   </div>
                   <p className="text-xs text-muted-foreground">
                     +19% from last month
@@ -98,7 +102,7 @@ export default function UserProfile() {
               <Card x-chunk="dashboard-01-chunk-3">
                 <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                   <CardTitle className="text-sm font-medium">
-                    Total Number Of Completed Races
+                    Completed Races
                   </CardTitle>
                   {/* <Activity className="h-4 w-4 text-muted-foreground" /> */}
                 </CardHeader>