show wallet and id on profilecard

packages/nextjs/components/cosmic-engine/DatabaseProfileCard.tsx

@@ -1,20 +1,45 @@
 "use client";
 
+import { useEffect, useState } from "react";
 import { useGlobalContext } from "@/contexts/GlobalContext";
 import { Client } from "@heroiclabs/nakama-js";
 import { ConnectButton } from "@rainbow-me/rainbowkit";
+import { v4 as uuidv4 } from "uuid";
 
 export const DatabaseProfileCard = () => {
-  const saveToDB = async (account: string) => {
+  const [accountWallet, setAccountWallet] = useState<string | null>(null);
+
+  // const saveToDB = async (account: string) => {
+  //   const client = new Client("defaultkey", "127.0.0.1", "7350");
+
+  //   // Authenticate with the Nakama server using Device Authentication.
+  //   const session = await client.authenticateDevice(account, true);
+  //   console.info("Successfully authenticated:", session);
+  // };
+
+  const authenticate = async () => {
     const client = new Client("defaultkey", "127.0.0.1", "7350");
 
-    // Authenticate with the Nakama server using Device Authentication.
-    const session = await client.authenticateDevice(account, true);
-    console.info("Successfully authenticated:", session);
+    let deviceId = localStorage.getItem("deviceId");
+    if (!deviceId) {
+      deviceId = uuidv4();
+      localStorage.setItem("deviceId", deviceId);
+    }
+
+    const session = await client.authenticateDevice(deviceId, true);
+    localStorage.setItem("user_id", session.user_id || "");
+
+    // save wallet to state
+    const account = await client.getAccount(session);
+    setAccountWallet(account.wallet || "");
   };
 
   const { burner } = useGlobalContext(); //, balance, setBalance, cluster, connection, loading } =
 
+  useEffect(() => {
+    authenticate();
+  }, []);
+
   return (
     <>
       <p className="my-2 font-medium">Player Profile</p>
@@ -36,20 +61,39 @@ export const DatabaseProfileCard = () => {
                 return (
                   <>
                     <div className="flex flex-col items-center mr-1">
+                      <span className="text-xs">
+                        ID:{" "}
+                        {localStorage
+                          .getItem("user_id")
+                          ?.toString()
+                          .replace(/^(.{4}).*(.{4})$/, "$1...$2")}
+                      </span>
+
                       <span className="text-xs">
                         Solana: {burner?.publicKey.toString().replace(/^(.{4}).*(.{4})$/, "$1...$2")}
                       </span>
                       <span className="text-xs">
                         Ethereum: {account.address.replace(/^(.{4}).*(.{4})$/, "$1...$2")}
                       </span>
 
-                      <button
-                        className="btn btn-primary btn-sm my-2"
-                        onClick={() => saveToDB(account.address)}
-                        type="button"
-                      >
-                        Save to DB
-                      </button>
+                      {accountWallet && (
+                        <table className="table-auto text-xs mt-2">
+                          <thead>
+                            <tr>
+                              <th className="px-4 py-2">Item</th>
+                              <th className="px-4 py-2">Amount</th>
+                            </tr>
+                          </thead>
+                          <tbody>
+                            {Object.entries(JSON.parse(accountWallet)).map(([key, value]) => (
+                              <tr key={key}>
+                                <td className="border px-4 py-2">{key}</td>
+                                <td className="border px-4 py-2">{String(value)}</td>
+                              </tr>
+                            ))}
+                          </tbody>
+                        </table>
+                      )}
                     </div>
                   </>
                 );