From c563159d9dfc627d10c545b8f3e27b89fede4b14 Mon Sep 17 00:00:00 2001
From: Paul Gadi <paulgadi@gmail.com>
Date: Mon, 7 Oct 2024 23:06:49 -0400
Subject: [PATCH] show wallet and id on profilecard

---
 .../cosmic-engine/DatabaseProfileCard.tsx     | 66 +++++++++++++++----
 1 file changed, 55 insertions(+), 11 deletions(-)

diff --git a/packages/nextjs/components/cosmic-engine/DatabaseProfileCard.tsx b/packages/nextjs/components/cosmic-engine/DatabaseProfileCard.tsx
index 90706f920..02445b258 100644
--- a/packages/nextjs/components/cosmic-engine/DatabaseProfileCard.tsx
+++ b/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,6 +61,14 @@ 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>
@@ -43,13 +76,24 @@ export const DatabaseProfileCard = () => {
                         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>
                   </>
                 );