sync

src/components/Activities.tsx

@@ -1,6 +1,7 @@
 import Image from "next/image";
 import { useState, useEffect } from "react";
 import { API_BASE_URL } from "@/data/shared";
+import { PlusCircleIcon, XCircleIcon, UserPlusIcon, TrophyIcon } from '@heroicons/react/24/outline';
 
 interface Activity {
   id: string;
@@ -85,18 +86,48 @@ export default function Activities() {
 
     switch (activity.type) {
       case "create":
-        return `${ownerUsername} Created a new ${activity.game} game${formattedAmount ? ` for ${formattedAmount}` : ""}`;
+        return <><span className="font-bold">{ownerUsername}</span> created a <span className="font-bold">{activity.game}</span> game with a {formattedAmount} entry fee.</>;
       case "close":
-        return `${ownerUsername} Closed ${activity.game} game${formattedAmount ? ` for ${formattedAmount}` : ""}`;
+        return <><span className="font-bold">{ownerUsername}</span> cancelled their <span className="font-bold">{activity.game}</span> game.</>;
       case "join":
-        return `${joinerUsername} Joined a ${activity.game} game`;
+        return <><span className="font-bold">{joinerUsername}</span> joined <span className="font-bold">{activity.game}</span> with a {formattedAmount} entry fee.</>;
       case "won":
-        return `${ownerUsername} won the ${activity.game} game${formattedAmount ? ` and won ${formattedAmount}` : ""}`;
+        return <><span className="font-bold">{ownerUsername}</span> won {formattedAmount} in <span className="font-bold">{activity.game}</span>!</>;
       default:
         return "Unknown activity";
     }
   };
 
+  const formatTimeAgo = (timestamp: string) => {
+    const date = new Date(timestamp + 'Z');
+    const now = new Date();
+    const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000);
+    const diffInMinutes = Math.floor(diffInSeconds / 60);
+    const diffInHours = Math.floor(diffInMinutes / 60);
+    const diffInDays = Math.floor(diffInHours / 24);
+
+    if (diffInDays > 0) {
+      return date.toLocaleString(undefined, {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+        hour12: true
+      });
+    }
+
+    if (diffInHours > 0) {
+      return `${diffInHours} hour${diffInHours === 1 ? '' : 's'} ago`;
+    }
+
+    if (diffInMinutes > 0) {
+      return `${diffInMinutes} minute${diffInMinutes === 1 ? '' : 's'} ago`;
+    }
+
+    return "less than 1 minute ago";
+  };
+
   if (loading) {
     return (
       <div className="container mx-auto max-w-screen-xl px-3">
@@ -115,7 +146,7 @@ export default function Activities() {
       <div className="bg-[rgb(30,30,30)] rounded-xl p-6 shadow-lg">
         <h2 className="text-2xl font-bold text-white mb-4">Recent Activities</h2>
         <div className="space-y-4">
-          {activities.map((activity) => {
+          {[...activities].sort((a, b) => new Date(b.time).getTime() - new Date(a.time).getTime()).map((activity) => {
             const userId = activity.type === "join" ? activity.joiner_id : activity.owner_id;
             if (!userId) return null;
             
@@ -129,19 +160,6 @@ export default function Activities() {
                 key={activity.id}
                 className="flex items-center gap-4 p-3 px-6 rounded-lg bg-[rgb(10,10,10)] border border-[rgb(30,30,30)] hover:border-[rgb(248,144,22)] transition-all duration-300"
               >
-                <div className="flex-1">
-                  <p className="text-white">{formatActivityMessage(activity)}</p>
-                  <p className="text-sm text-gray-400">
-                    {new Date(activity.time + 'Z').toLocaleString(undefined, {
-                      year: 'numeric',
-                      month: 'short',
-                      day: 'numeric',
-                      hour: '2-digit',
-                      minute: '2-digit',
-                      hour12: true
-                    })}
-                  </p>
-                </div>
                 <Image
                   src={profileUrl}
                   alt="Profile"
@@ -154,6 +172,18 @@ export default function Activities() {
                     setFailedImages(prev => new Set(prev).add(profileUrl));
                   }}
                 />
+                <div className="flex-1">
+                  <p className="text-white">{formatActivityMessage(activity)}</p>
+                  <p className="text-sm text-gray-400">
+                    {formatTimeAgo(activity.time)}
+                  </p>
+                </div>
+                <div>
+                  {activity.type === "create" && <PlusCircleIcon className="w-6 h-6 text-green-500" />}
+                  {activity.type === "close" && <XCircleIcon className="w-6 h-6 text-red-500" />}
+                  {activity.type === "join" && <UserPlusIcon className="w-6 h-6 text-[rgb(248,144,22)]" />}
+                  {activity.type === "won" && <TrophyIcon className="w-6 h-6 text-[rgb(248,144,22)]" />}
+                </div>
               </div>
             );
           })}

src/components/PriceSelection.tsx

@@ -6,7 +6,7 @@ interface PriceSelectionProps {
 }
 
 export function PriceSelection({ selectedPrice, onSelect }: PriceSelectionProps) {
-  const presets = [0.05, 0.1, 0.2, 0.5, 1.0];
+  const presets = [0.01,0.05, 0.1, 0.2, 0.5, 1.0];
   const [inputValue, setInputValue] = useState<string>("");
   const MIN_AMOUNT = 0.01;
 

src/shared/data_fetcher.ts

@@ -11,7 +11,9 @@ export async function fetchUserById(id: string) {
 export async function showNewGameNotification(username:string, game:string, wager:string){
   try{
     const isDevnet = CLUSTER_URL === clusterApiUrl("devnet");
-    await fetch(`${API_URL}send_telegram_notification.php?username=${username}&wager=${wager}&game=${game}&devnet=${isDevnet ? "1" : "0"}`)
+    const url = `${API_URL}send_telegram_notification.php?username=${username}&wager=${wager}&game=${game}&devnet=${isDevnet ? "1" : "0"}`;
+    console.log(url);
+    await fetch(url);
   }catch(error){
     console.error("Error showing new game notification:", error);
   }

src/shared/solana_helpers.ts

@@ -232,10 +232,10 @@ export async function joinBet(wallets: ConnectedSolanaWallet, uid: string, gameI
 
     // Sign transaction with Privy
     const signedTx = await wallet.signTransaction(tx);
-
+    const chosenBetVaultAcc = await program.account.betVault.fetch(betVaultPubkey);
     // Send transaction// Replace with correct RPC endpoint
     const txId = await connection.sendRawTransaction(signedTx.serialize());
-    add_new_activity("join",  "",uid, gameId, 0);
+    add_new_activity("join",  "",uid, gameId, chosenBetVaultAcc.wager.toNumber() / LAMPORTS_PER_SOL);
     console.log(`Transaction ID: ${txId}`);
     return txId;
   } catch (error: unknown) {