first commit

client/src/components/WalletConnect.vue

@@ -0,0 +1,60 @@
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useChatStore } from '../stores/chat';
+
+const chatStore = useChatStore();
+const isConnecting = ref(false);
+const error = ref(null);
+
+const connectWallet = async () => {
+  isConnecting.value = true;
+  error.value = null;
+
+  try {
+    const { solana } = window;
+
+    if (solana && solana.isPhantom) {
+      const response = await solana.connect();
+      const wallet = response.publicKey.toString();
+      
+      // Sign message for authentication
+      const message = `Sign this message to login to Plexus: ${new Date().toDateString()}`;
+      const encodedMessage = new TextEncoder().encode(message);
+      const signedMessage = await solana.signMessage(encodedMessage, "utf8");
+      const signature = btoa(String.fromCharCode.apply(null, signedMessage.signature));
+
+      // Simple username generation or prompt
+      const username = wallet.slice(0, 4) + '...' + wallet.slice(-4);
+      chatStore.connect(wallet, username, signature);
+    } else {
+      alert('Solana object not found! Get a Phantom Wallet 👻');
+      window.open('https://phantom.app/', '_blank');
+    }
+  } catch (err) {
+    console.error(err);
+    error.value = "Connection failed or rejected";
+  } finally {
+    isConnecting.value = false;
+  }
+};
+</script>
+
+<template>
+  <div class="flex flex-col items-center justify-center h-screen bg-black/50 backdrop-blur-sm">
+    <div class="p-8 bg-crypto-panel rounded-xl shadow-2xl border border-crypto-accent/20 text-center max-w-md w-full">
+      <h1 class="text-3xl font-bold mb-2 bg-gradient-to-r from-purple-400 to-pink-600 text-transparent bg-clip-text">Crypto Chat</h1>
+      <p class="text-crypto-muted mb-8">Connect your wallet to join the conversation.</p>
+      
+      <button 
+        @click="connectWallet" 
+        :disabled="isConnecting"
+        class="w-full py-3 px-6 bg-crypto-accent hover:bg-violet-600 text-white rounded-lg font-semibold transition-all transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+      >
+        <span v-if="isConnecting">Connecting...</span>
+        <span v-else>Connect Phantom Wallet</span>
+      </button>
+
+      <p v-if="error" class="mt-4 text-red-400 text-sm">{{ error }}</p>
+    </div>
+  </div>
+</template>