bounty_project/initProfile.js at main · Johnpii1/bounty_project · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
// initProfile.js - Initialize profile across all pages
import { getConnectedWallet } from "./wallet.js";
import { applyProfileStyle } from "./profileColor.js";

/**
 * Initialize profile circle on any page
 */
export async function initProfile() {
  const profileElement =
    document.getElementById("profileCircle") ||
    document.querySelector(".profile-circle") ||
    document.querySelector(".bg-white.rounded-full");

  if (!profileElement) {
    console.warn("Profile element not found on this page");
    return;
  }

  // Get connected wallet
  const wallet = getConnectedWallet();

  if (wallet) {
    // Apply consistent styling
    applyProfileStyle(profileElement, wallet, true);

    // Add click handler to show wallet options
    profileElement.addEventListener("click", (e) => {
      e.stopPropagation();
      showWalletMenu(wallet);
    });
  } else {
    // Show default icon for disconnected state
    profileElement.style.background = "#6B7280";
    profileElement.innerHTML = "👤";
    profileElement.style.display = "flex";
    profileElement.style.alignItems = "center";
    profileElement.style.justifyContent = "center";
    profileElement.style.fontSize = "16px";
  }
}

/**
 * Show wallet menu on click
 */
function showWalletMenu(wallet) {
  // Remove existing menu if any
  const existingMenu = document.querySelector(".profile-menu");
  if (existingMenu) existingMenu.remove();

  const menu = document.createElement("div");
  menu.className =
    "profile-menu absolute bg-white rounded-lg shadow-lg py-2 z-50 min-w-[200px]";
  menu.style.top = "60px";
  menu.style.right = "20px";

  menu.innerHTML = `
    <div class="px-4 py-2 border-b border-gray-200">
      <p class="text-xs text-gray-500">Connected Wallet</p>
      <p class="text-sm font-mono text-gray-800">${wallet}</p>
    </div>
    <button class="copy-address w-full text-left px-4 py-2 hover:bg-gray-100 text-sm">
      📋 Copy Address
    </button>
    <button class="disconnect-wallet w-full text-left px-4 py-2 hover:bg-gray-100 text-sm text-red-600">
      🔌 Disconnect
    </button>
  `;

  document.body.appendChild(menu);

  // Handle copy
  menu.querySelector(".copy-address")?.addEventListener("click", () => {
    navigator.clipboard.writeText(wallet);
    showToast("Address copied!", "success");
    menu.remove();
  });

  // Handle disconnect
  menu
    .querySelector(".disconnect-wallet")
    ?.addEventListener("click", async () => {
      const { disconnectWallet } = await import("./wallet.js");
      disconnectWallet();
      menu.remove();
      // Refresh profile display
      initProfile();
    });

  // Close menu on click outside
  setTimeout(() => {
    document.addEventListener("click", function closeMenu(e) {
      if (
        !menu.contains(e.target) &&
        e.target !== document.querySelector(".profile-circle")
      ) {
        menu.remove();
        document.removeEventListener("click", closeMenu);
      }
    });
  }, 100);
}

function showToast(message, type) {
  const toast = document.createElement("div");
  toast.className = `fixed bottom-4 right-4 px-4 py-2 rounded-lg text-white z-50 ${
    type === "success" ? "bg-green-600" : "bg-gray-800"
  }`;
  toast.textContent = message;
  document.body.appendChild(toast);
  setTimeout(() => toast.remove(), 2000);
}