@oasisomniverse/nextjs 1.0.0

package/src/components/common/KarmaToast.tsx

@@ -0,0 +1,39 @@
+'use client';
+import React, { useState, useCallback } from 'react';
+
+let _show = null;
+
+export function showKarmaToast({ message, amount, duration = 4000 }) {
+  _show?.({ message, amount, duration });
+}
+
+export default function KarmaToast() {
+  const [toast, setToast] = useState(null);
+  const timerRef = React.useRef(null);
+
+  _show = useCallback(({ message, amount, duration }) => {
+    clearTimeout(timerRef.current);
+    setToast({ message, amount });
+    timerRef.current = setTimeout(() => setToast(null), duration);
+  }, []);
+
+  if (!toast) return null;
+
+  return (
+    <div style={{
+      position: 'fixed', bottom: 28, right: 28, zIndex: 10000,
+      display: 'flex', alignItems: 'center', gap: 12,
+      background: '#0d1829', border: '1px solid rgba(0,200,255,.25)',
+      borderRadius: 12, padding: '14px 18px', boxShadow: '0 8px 32px rgba(0,0,0,.5)',
+      animation: 'oasisSlideUp .35s ease',
+    }}>
+      <span style={{ fontSize: 22 }}>⚡</span>
+      <div>
+        <div style={{ fontFamily: "'Orbitron',sans-serif", fontSize: 15, fontWeight: 700, color: '#00c8ff' }}>
+          +{toast.amount} Karma
+        </div>
+        <div style={{ fontSize: 12, color: '#7a9bbf', marginTop: 2 }}>{toast.message}</div>
+      </div>
+    </div>
+  );
+}

package/src/components/common/Map.tsx

@@ -0,0 +1,43 @@
+'use client';
+import { useState } from 'react';
+
+const LOC_ICONS = { Hub: '🏛️', City: '🏙️', Nature: '🌲', 'Quest Zone': '⚔️' };
+const LOCATIONS = [
+  { id: '1', name: 'OASIS Hub Alpha', type: 'Hub', x: 20, y: 30, description: 'Central hub for OASIS operations and avatar registration.' },
+  { id: '2', name: 'Neon City', type: 'City', x: 55, y: 20, description: 'A sprawling cyberpunk metropolis in the OASIS.' },
+  { id: '3', name: 'Enchanted Forest', type: 'Nature', x: 75, y: 60, description: 'Ancient woodland teeming with rare seeds and creatures.' },
+  { id: '4', name: 'Battle Grounds', type: 'Quest Zone', x: 35, y: 70, description: 'Arena for quests, challenges, and PvP competitions.' },
+  { id: '5', name: 'Crystal Spire', type: 'Hub', x: 85, y: 35, description: 'Trading post and NFT marketplace in the sky.' },
+];
+const LEGEND = [{ icon: '🏙️', label: 'City' }, { icon: '🌲', label: 'Nature' }, { icon: '⚔️', label: 'Quest Zone' }, { icon: '🏛️', label: 'Hub' }];
+
+export function Map() {
+  const [selected, setSelected] = useState(null);
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      <div style={{ textAlign: 'center' }}>
+        <h2 style={{ fontFamily: "'Orbitron',sans-serif", fontSize: 20, color: '#fff', margin: '0 0 6px' }}>🗺️ OASIS Map</h2>
+        <p style={{ fontSize: 13, color: '#7a9bbf', margin: 0 }}>Explore the OASIS Omniverse.</p>
+      </div>
+      <div style={{ position: 'relative', height: 300, background: '#030d1a', border: '1px solid rgba(0,200,255,.2)', borderRadius: 12, overflow: 'hidden' }}>
+        <div style={{ position: 'absolute', inset: 0, backgroundImage: 'linear-gradient(rgba(0,200,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,200,255,.05) 1px,transparent 1px)', backgroundSize: '40px 40px' }} />
+        {LOCATIONS.map(loc => (
+          <div key={loc.id} onClick={() => setSelected(loc)} title={loc.name} style={{ position: 'absolute', left: `${loc.x}%`, top: `${loc.y}%`, transform: 'translate(-50%,-50%)', cursor: 'pointer', fontSize: 22, outline: selected?.id === loc.id ? '2px solid #00c8ff' : undefined, outlineOffset: selected?.id === loc.id ? 3 : undefined, borderRadius: '50%' }}>
+            {LOC_ICONS[loc.type] ?? '📍'}
+          </div>
+        ))}
+      </div>
+      {selected && (
+        <div style={{ background: 'rgba(255,255,255,.04)', border: '1px solid rgba(0,200,255,.2)', borderRadius: 10, padding: '14px 16px', display: 'flex', alignItems: 'center', gap: 12 }}>
+          <div style={{ fontFamily: "'Orbitron',sans-serif", fontSize: 13, color: '#fff' }}>{selected.name}</div>
+          <div style={{ fontSize: 11, color: '#5ba8ff', textTransform: 'uppercase', letterSpacing: '.06em' }}>{selected.type}</div>
+          <div style={{ fontSize: 12, color: '#7a9bbf', flex: 1 }}>{selected.description}</div>
+          <button onClick={() => setSelected(null)} style={{ background: 'transparent', border: '1px solid rgba(0,200,255,.3)', borderRadius: 7, color: '#00c8ff', fontFamily: "'Orbitron',sans-serif", fontSize: 11, fontWeight: 700, padding: '6px 14px', cursor: 'pointer' }}>Close</button>
+        </div>
+      )}
+      <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
+        {LEGEND.map(t => <div key={t.label} style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, color: '#7a9bbf' }}><span>{t.icon}</span><span>{t.label}</span></div>)}
+      </div>
+    </div>
+  );
+}

package/src/components/common/MenuMessage.tsx

@@ -0,0 +1,71 @@
+'use client';
+import { useState } from 'react';
+
+const styles = {
+  shell: { fontFamily: "'Rajdhani', sans-serif", display: 'flex', flexDirection: 'column', gap: 18 },
+  header: { padding: '14px 18px', background: 'rgba(0,200,255,.07)', borderBottom: '1px solid rgba(0,200,255,.12)', display: 'flex', alignItems: 'center', gap: 12 },
+  title: { fontFamily: "'Orbitron', sans-serif", fontSize: 15, fontWeight: 700, color: '#fff', margin: 0, flex: 1 },
+  closebtn: { background: 'none', border: 'none', color: '#7a9bbf', fontSize: 18, cursor: 'pointer', lineHeight: 1 },
+  body: { padding: '18px', display: 'flex', flexDirection: 'column', gap: 12 },
+  icon: { fontSize: 44, textAlign: 'center' },
+  msg: { fontSize: 14, color: '#a8bfd8', lineHeight: 1.65, textAlign: 'center' },
+  actions: { display: 'flex', gap: 10, justifyContent: 'center', marginTop: 4 },
+  btn: { background: 'linear-gradient(135deg,#00c8ff,#0080ff)', border: 'none', borderRadius: 8, color: '#fff', fontFamily: "'Orbitron', sans-serif", fontSize: 12, fontWeight: 700, letterSpacing: '.08em', padding: '9px 22px', cursor: 'pointer' },
+  btnGhost: { background: 'transparent', border: '1px solid rgba(0,200,255,.3)', borderRadius: 8, color: '#00c8ff', fontFamily: "'Orbitron', sans-serif", fontSize: 12, fontWeight: 700, letterSpacing: '.08em', padding: '9px 22px', cursor: 'pointer' },
+  badge: { display: 'inline-block', background: 'rgba(0,200,255,.12)', border: '1px solid rgba(0,200,255,.3)', color: '#00c8ff', borderRadius: 999, fontSize: 11, fontWeight: 700, letterSpacing: '.08em', padding: '3px 12px', textTransform: 'uppercase', textAlign: 'center' },
+};
+
+/**
+ * MenuMessage — a dismissable banner/message panel for menu-level notices.
+ * Props:
+ *   title        string  — header title
+ *   message      string  — body copy
+ *   icon         string  — emoji icon
+ *   type         'info' | 'success' | 'warning' | 'error'
+ *   badge        string  — optional badge text
+ *   actions      Array<{ label, onClick }> — action buttons
+ *   onDismiss    fn      — called when closed
+ */
+export function MenuMessage({
+  title = 'Notice',
+  message = '',
+  icon = 'ℹ️',
+  type = 'info',
+  badge,
+  actions = [],
+  onDismiss,
+}) {
+  const [visible, setVisible] = useState(true);
+  if (!visible) return null;
+
+  const typeColors = {
+    info:    { border: 'rgba(0,200,255,.25)', bg: 'rgba(0,200,255,.05)' },
+    success: { border: 'rgba(72,220,130,.25)', bg: 'rgba(72,220,130,.05)' },
+    warning: { border: 'rgba(255,180,60,.25)', bg: 'rgba(255,180,60,.05)' },
+    error:   { border: 'rgba(255,80,80,.25)', bg: 'rgba(255,80,80,.05)' },
+  };
+  const colors = typeColors[type] || typeColors.info;
+
+  function dismiss() { setVisible(false); onDismiss?.(); }
+
+  return (
+    <div style={{ ...styles.shell, border: `1px solid ${colors.border}`, borderRadius: 12, background: colors.bg, overflow: 'hidden' }}>
+      <div style={styles.header}>
+        <span style={{ fontSize: 20 }}>{icon}</span>
+        <span style={styles.title}>{title}</span>
+        {badge && <span style={styles.badge}>{badge}</span>}
+        <button style={styles.closebtn} onClick={dismiss} aria-label="Dismiss">✕</button>
+      </div>
+      <div style={styles.body}>
+        {message && <p style={styles.msg}>{message}</p>}
+        {actions.length > 0 && (
+          <div style={styles.actions}>
+            {actions.map((a, i) => (
+              <button key={i} style={i === 0 ? styles.btn : styles.btnGhost} onClick={a.onClick}>{a.label}</button>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/common/Messaging.tsx

@@ -0,0 +1,75 @@
+'use client';
+import { useState } from 'react';
+
+const s = {
+  shell: { display: 'grid', gridTemplateColumns: '260px 1fr', height: 480, border: '1px solid rgba(0,200,255,.15)', borderRadius: 12, overflow: 'hidden' },
+  sidebar: { borderRight: '1px solid rgba(0,200,255,.1)', display: 'flex', flexDirection: 'column' },
+  searchWrap: { padding: 12, borderBottom: '1px solid rgba(0,200,255,.1)' },
+  search: { width: '100%', background: 'rgba(255,255,255,.05)', border: '1px solid rgba(0,200,255,.2)', borderRadius: 8, padding: '8px 12px', color: '#fff', fontSize: 13, outline: 'none', boxSizing: 'border-box' },
+  list: { flex: 1, overflowY: 'auto' },
+  item: { padding: '12px 14px', borderBottom: '1px solid rgba(0,200,255,.07)', cursor: 'pointer' },
+  from: { fontSize: 13, color: '#e0f0ff', marginBottom: 3 },
+  preview: { fontSize: 12, color: '#7a9bbf', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' },
+  time: { fontSize: 11, color: '#4a6a88', marginTop: 4 },
+  main: { display: 'flex', flexDirection: 'column', background: 'rgba(0,0,0,.2)' },
+  placeholder: { display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 1, color: '#4a6a88', fontSize: 14 },
+  detailHeader: { display: 'flex', justifyContent: 'space-between', padding: '16px 20px', borderBottom: '1px solid rgba(0,200,255,.1)' },
+  detailFrom: { fontFamily: "'Orbitron',sans-serif", fontSize: 14, color: '#fff' },
+  detailTime: { fontSize: 12, color: '#4a6a88' },
+  body: { flex: 1, padding: 20, fontSize: 14, color: '#a8bfd8', lineHeight: 1.7, overflowY: 'auto' },
+  replyWrap: { padding: 16, borderTop: '1px solid rgba(0,200,255,.1)', display: 'flex', flexDirection: 'column', gap: 10 },
+  replyInput: { width: '100%', background: 'rgba(255,255,255,.05)', border: '1px solid rgba(0,200,255,.2)', borderRadius: 8, padding: '10px 14px', color: '#fff', fontSize: 13, outline: 'none', resize: 'none', boxSizing: 'border-box', fontFamily: 'inherit' },
+  btn: { alignSelf: 'flex-end', background: 'linear-gradient(135deg,#00c8ff,#0080ff)', border: 'none', borderRadius: 8, color: '#fff', fontFamily: "'Orbitron',sans-serif", fontSize: 12, fontWeight: 700, padding: '9px 24px', cursor: 'pointer' },
+  empty: { padding: 24, textAlign: 'center', color: '#4a6a88', fontSize: 13 },
+};
+
+const INITIAL = [
+  { id: '1', from: 'OASIS Team', preview: 'Welcome to the OASIS network!', time: 'Just now', read: false, body: 'Welcome to the OASIS Omniverse! Your avatar is now connected to the network. Explore NFTs, karma, quests and more.' },
+  { id: '2', from: 'System', preview: 'Your karma level has increased.', time: '2h ago', read: true, body: 'Congratulations! Your karma level has increased. Keep contributing to the community to unlock new features and NFTs.' },
+];
+
+export function Messaging() {
+  const [messages, setMessages] = useState(INITIAL);
+  const [selected, setSelected] = useState(null);
+  const [search, setSearch] = useState('');
+  const [reply, setReply] = useState('');
+
+  const filtered = messages.filter(m => m.from.toLowerCase().includes(search.toLowerCase()) || m.preview.toLowerCase().includes(search.toLowerCase()));
+
+  function open(m) {
+    setMessages(ms => ms.map(x => x.id === m.id ? { ...x, read: true } : x));
+    setSelected(m); setReply('');
+  }
+
+  return (
+    <div style={s.shell}>
+      <div style={s.sidebar}>
+        <div style={s.searchWrap}><input style={s.search} value={search} onChange={e => setSearch(e.target.value)} placeholder="Search messages…" /></div>
+        <div style={s.list}>
+          {filtered.map(m => (
+            <div key={m.id} style={{ ...s.item, background: selected?.id === m.id ? 'rgba(0,200,255,.1)' : undefined, borderLeft: selected?.id === m.id ? '3px solid #00c8ff' : undefined }} onClick={() => open(m)}>
+              <div style={{ ...s.from, fontWeight: m.read ? undefined : 700 }}>{m.from}</div>
+              <div style={s.preview}>{m.preview}</div>
+              <div style={s.time}>{m.time}</div>
+            </div>
+          ))}
+          {filtered.length === 0 && <div style={s.empty}>No messages found.</div>}
+        </div>
+      </div>
+      <div style={s.main}>
+        {selected ? (
+          <>
+            <div style={s.detailHeader}><div style={s.detailFrom}>{selected.from}</div><div style={s.detailTime}>{selected.time}</div></div>
+            <div style={s.body}>{selected.body}</div>
+            <div style={s.replyWrap}>
+              <textarea style={s.replyInput} value={reply} onChange={e => setReply(e.target.value)} placeholder="Write a reply…" rows={3} />
+              <button style={{ ...s.btn, opacity: reply.trim() ? 1 : .4 }} disabled={!reply.trim()} onClick={() => setReply('')}>Send</button>
+            </div>
+          </>
+        ) : (
+          <div style={s.placeholder}>📬 Select a message to read it</div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/common/Mission.tsx

@@ -0,0 +1,41 @@
+'use client';
+import { useState } from 'react';
+
+const STATUS_COLORS = { available: '#7a9bbf', active: '#00c8ff', complete: '#48dc82' };
+const INITIAL = [
+  { id: '1', title: 'First Contact', description: 'Log into OASIS for the first time and explore the hub.', reward: 100, status: 'complete' },
+  { id: '2', title: 'Karma Cultivator', description: 'Earn 500 karma through positive actions in the OASIS.', reward: 250, status: 'active' },
+  { id: '3', title: 'NFT Hunter', description: 'Acquire your first rare NFT from the marketplace.', reward: 400, status: 'available' },
+  { id: '4', title: 'Seed Planter', description: 'Plant 3 seeds and nurture them to full growth.', reward: 150, status: 'available' },
+];
+function statusLabel(s) { return s === 'available' ? 'Available' : s === 'active' ? 'In Progress' : 'Complete'; }
+
+export function Mission() {
+  const [missions, setMissions] = useState(INITIAL);
+  function accept(id) { setMissions(l => l.map(x => x.id === id ? { ...x, status: 'active' } : x)); }
+  function complete(id) { setMissions(l => l.map(x => x.id === id ? { ...x, status: 'complete' } : x)); }
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
+      <div style={{ textAlign: 'center' }}>
+        <h2 style={{ fontFamily: "'Orbitron',sans-serif", fontSize: 20, color: '#fff', margin: '0 0 6px' }}>🎯 Missions</h2>
+        <p style={{ fontSize: 13, color: '#7a9bbf', margin: 0 }}>Complete missions to earn karma and unlock rewards.</p>
+      </div>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+        {missions.map(m => (
+          <div key={m.id} style={{ display: 'flex', alignItems: 'center', gap: 16, background: m.status === 'active' ? 'rgba(0,200,255,.05)' : m.status === 'complete' ? 'rgba(72,220,130,.04)' : 'rgba(255,255,255,.04)', border: `1px solid ${m.status === 'active' ? 'rgba(0,200,255,.35)' : m.status === 'complete' ? 'rgba(72,220,130,.25)' : 'rgba(0,200,255,.12)'}`, borderRadius: 12, padding: 16, opacity: m.status === 'complete' ? .7 : 1 }}>
+            <div style={{ flex: 1 }}>
+              <div style={{ fontFamily: "'Orbitron',sans-serif", fontSize: 13, color: '#fff', marginBottom: 4 }}>{m.title}</div>
+              <div style={{ fontSize: 12, color: '#7a9bbf', lineHeight: 1.5 }}>{m.description}</div>
+            </div>
+            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 8, flexShrink: 0 }}>
+              <div style={{ fontSize: 12, color: '#48dc82', fontWeight: 600 }}>+{m.reward} karma</div>
+              <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '.08em', textTransform: 'uppercase', borderRadius: 999, padding: '3px 10px', border: `1px solid ${STATUS_COLORS[m.status]}44`, color: STATUS_COLORS[m.status] }}>{statusLabel(m.status)}</div>
+              {m.status === 'available' && <button onClick={() => accept(m.id)} style={{ background: 'linear-gradient(135deg,#00c8ff,#0080ff)', border: 'none', borderRadius: 7, color: '#fff', fontFamily: "'Orbitron',sans-serif", fontSize: 11, fontWeight: 700, padding: '7px 16px', cursor: 'pointer' }}>Accept</button>}
+              {m.status === 'active' && <button onClick={() => complete(m.id)} style={{ background: 'linear-gradient(135deg,#48dc82,#00aa55)', border: 'none', borderRadius: 7, color: '#fff', fontFamily: "'Orbitron',sans-serif", fontSize: 11, fontWeight: 700, padding: '7px 16px', cursor: 'pointer' }}>Complete</button>}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/components/common/NFT.tsx

@@ -0,0 +1,43 @@
+'use client';
+import { useState } from 'react';
+
+const RARITY_COLORS = { Common: '#7a9bbf', Rare: '#5ba8ff', Epic: '#b87fff', Legendary: '#ffb43c' };
+const TABS = ['All', 'Avatar', 'Land', 'Item', 'Art'];
+const NFTS = [
+  { id: '1', name: 'Cosmic Warrior', rarity: 'Legendary', type: 'Avatar', karma: 500, image: '⚔️' },
+  { id: '2', name: 'Forest Realm', rarity: 'Epic', type: 'Land', karma: 250, image: '🌲' },
+  { id: '3', name: 'Quantum Blade', rarity: 'Rare', type: 'Item', karma: 100, image: '🗡️' },
+  { id: '4', name: 'Nebula Portrait', rarity: 'Common', type: 'Art', karma: 30, image: '🎨' },
+  { id: '5', name: 'Light Keeper', rarity: 'Epic', type: 'Avatar', karma: 200, image: '🌟' },
+  { id: '6', name: 'Sky Citadel', rarity: 'Rare', type: 'Land', karma: 120, image: '🏰' },
+];
+
+export function NFT() {
+  const [tab, setTab] = useState('All');
+  const filtered = tab === 'All' ? NFTS : NFTS.filter(n => n.type === tab);
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
+      <div style={{ textAlign: 'center' }}>
+        <h2 style={{ fontFamily: "'Orbitron',sans-serif", fontSize: 20, color: '#fff', margin: '0 0 6px' }}>🖼️ NFTs</h2>
+        <p style={{ fontSize: 13, color: '#7a9bbf', margin: 0 }}>Your OASIS non-fungible token collection.</p>
+      </div>
+      <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+        {TABS.map(t => (
+          <button key={t} onClick={() => setTab(t)} style={{ background: tab === t ? 'rgba(0,200,255,.15)' : 'rgba(255,255,255,.05)', border: `1px solid ${tab === t ? '#00c8ff' : 'rgba(0,200,255,.2)'}`, borderRadius: 8, color: tab === t ? '#00c8ff' : '#7a9bbf', fontFamily: "'Orbitron',sans-serif", fontSize: 11, fontWeight: 700, letterSpacing: '.06em', padding: '7px 16px', cursor: 'pointer' }}>{t}</button>
+        ))}
+      </div>
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill,minmax(150px,1fr))', gap: 14 }}>
+        {filtered.map(n => (
+          <div key={n.id} style={{ background: 'rgba(255,255,255,.04)', border: '1px solid rgba(0,200,255,.12)', borderRadius: 12, padding: 14, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
+            <div style={{ fontSize: 44 }}>{n.image}</div>
+            <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', borderRadius: 999, padding: '3px 10px', border: `1px solid ${RARITY_COLORS[n.rarity]}44`, color: RARITY_COLORS[n.rarity] }}>{n.rarity}</div>
+            <div style={{ fontFamily: "'Orbitron',sans-serif", fontSize: 12, color: '#fff', textAlign: 'center' }}>{n.name}</div>
+            <div style={{ fontSize: 11, color: '#7a9bbf' }}>{n.type}</div>
+            <div style={{ fontSize: 12, color: '#48dc82', fontWeight: 600 }}>+{n.karma} karma</div>
+          </div>
+        ))}
+        {filtered.length === 0 && <div style={{ gridColumn: '1/-1', textAlign: 'center', color: '#4a6a88', padding: 32, fontSize: 14 }}>No NFTs in this category.</div>}
+      </div>
+    </div>
+  );
+}

package/src/components/common/NavBar.tsx

@@ -0,0 +1,138 @@
+'use client';
+import React from "react";
+import { withRouter } from "react-router-dom";
+
+import logo from "../../assets/images/dummy-logo.svg";
+// import loginIcon from "../../assets/images/loggedin.png";
+
+class Navbar extends React.Component {
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            showProfileDropdown: false,
+            shortName: ''
+        }
+
+        this.navRef = React.createRef();
+    }
+
+    componentDidMount = () => {
+        const name = localStorage.getItem("name");
+        
+        if(name) {
+            const words = name.split(' ');
+            const fl = words.map(word => word.charAt(0).toUpperCase());
+            console.log(fl.join(''))
+            // return fl.join('');
+            this.setState({
+                shortName: fl.join('')
+            })
+        }
+
+        document.addEventListener('mousedown', this.clickOutsideListener);
+    }
+
+    handleUserProfileDropdownClicked = () => {
+        this.setState({
+            showProfileDropdown: !this.state.showProfileDropdown
+        })
+    }
+
+    handleLogoutClick = () => {
+        // this.setState({
+        //     showProfileDropdown: false
+        // })
+        // this.props.handleLogout();
+        this.props.showConfirm();
+    }
+
+    handleLogoClicked = () => {
+        const { history, showLogin } = this.props;
+        history.push('/');
+
+        const jwtToken = localStorage.getItem("jwtToken");
+        const refreshToken = localStorage.getItem("refreshToken");
+
+        if(jwtToken || refreshToken) {
+        } else {
+            showLogin();
+        }
+    }
+
+    clickOutsideListener = (event) => {
+        const navNode = this.navRef.current;
+    
+        if (navNode && !navNode.contains(event.target)) {
+          this.setState({
+            showProfileDropdown: false,
+          });
+        }
+    };
+    
+    componentWillUnmount() {
+        document.removeEventListener('mousedown', this.clickOutsideListener);
+    }
+
+    render() {
+        const { user, loggedIn, showLogin, showSignup, showSidebar, toggleSidebar, showContactPopup } = this.props;
+
+        const shortName = (this.state.shortName) ? this.state.shortName : this.props.shortName;
+        
+        const { showProfileDropdown } = this.state;
+
+        return (
+            <nav className="nav">
+                <div className="nav-left">
+                    <div 
+                        className={`nav-menu-btn ${showSidebar ? "nav-menu-open" : ""}`} 
+                        onClick={toggleSidebar}
+                    >
+                        <div className="nav-menu-btn-burger"></div>
+                    </div>
+
+                    <a className="cursor-pointer" onClick={this.handleLogoClicked}>
+                        <img className="nav-logo" src={logo} alt="logo" />
+                    </a>
+                </div>
+
+                <div className="nav-right">
+                    {
+                        loggedIn ?
+
+                        <div className="user-profile-container">
+                            <p className="username profile-circle" onClick={() => this.handleUserProfileDropdownClicked()}>{shortName}</p>
+
+                            <ul className={"user-profile-dropdown " +(showProfileDropdown ? "show" : "")} ref={this.navRef}>
+                                <li>
+                                    <div className="user-info">
+                                        <p className="username profile-circle">{shortName}</p>
+
+                                        <p>
+                                            <span className="name">{user.name}</span>
+                                            <span className="email">{user.email}</span>
+                                        </p>
+                                    </div>
+                                </li>
+                                <li>View/Edit Avatar</li>
+                                <li>Messages</li>
+                                <li onClick={showContactPopup}>Contacts</li>
+                                <li onClick={() => this.handleLogoutClick()}>Beam Out</li>
+                            </ul>
+                        </div>
+
+                        : 
+
+                        <ul>
+                            <li onClick={showLogin}><a>Beam In</a> </li>
+                            <li onClick={showSignup}><a>Sign up</a></li>
+                        </ul>
+                    }
+                </div>
+            </nav>
+        );
+    }
+}
+
+export default withRouter(Navbar);

package/src/components/common/OApp.tsx

@@ -0,0 +1,42 @@
+'use client';
+import { useState } from 'react';
+
+const INITIAL = [
+  { id: '1', name: 'OLAND', description: 'Virtual land management and terraforming in the OASIS.', category: 'Metaverse', icon: '🌍', karma: 200, launched: false },
+  { id: '2', name: 'OMARKET', description: 'Decentralised marketplace for NFTs and digital goods.', category: 'Commerce', icon: '🛒', karma: 150, launched: false },
+  { id: '3', name: 'OCHAT', description: 'Encrypted peer-to-peer messaging on the ONET.', category: 'Social', icon: '💬', karma: 80, launched: false },
+  { id: '4', name: 'OQUESTS', description: 'Daily quests and challenges for karma rewards.', category: 'Gaming', icon: '⚔️', karma: 300, launched: false },
+];
+
+export function OApp() {
+  const [oapps, setOapps] = useState(INITIAL);
+  const [search, setSearch] = useState('');
+  const filtered = oapps.filter(a => a.name.toLowerCase().includes(search.toLowerCase()) || a.description.toLowerCase().includes(search.toLowerCase()));
+  function toggle(id) { setOapps(l => l.map(x => x.id === id ? { ...x, launched: !x.launched } : x)); }
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
+      <div style={{ textAlign: 'center' }}>
+        <h2 style={{ fontFamily: "'Orbitron',sans-serif", fontSize: 20, color: '#fff', margin: '0 0 6px' }}>📱 OApps</h2>
+        <p style={{ fontSize: 13, color: '#7a9bbf', margin: 0 }}>Decentralised apps built on the OASIS network.</p>
+      </div>
+      <input style={{ width: '100%', background: 'rgba(255,255,255,.05)', border: '1px solid rgba(0,200,255,.2)', borderRadius: 8, padding: '10px 14px', color: '#fff', fontSize: 14, outline: 'none', boxSizing: 'border-box' }} value={search} onChange={e => setSearch(e.target.value)} placeholder="Search OApps…" />
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+        {filtered.map(a => (
+          <div key={a.id} style={{ display: 'flex', alignItems: 'flex-start', gap: 14, background: 'rgba(255,255,255,.04)', border: '1px solid rgba(0,200,255,.12)', borderRadius: 12, padding: 16 }}>
+            <div style={{ fontSize: 32, flexShrink: 0 }}>{a.icon}</div>
+            <div style={{ flex: 1 }}>
+              <div style={{ fontFamily: "'Orbitron',sans-serif", fontSize: 13, color: '#fff', marginBottom: 3 }}>{a.name}</div>
+              <div style={{ fontSize: 11, color: '#5ba8ff', textTransform: 'uppercase', letterSpacing: '.06em', marginBottom: 5 }}>{a.category}</div>
+              <div style={{ fontSize: 12, color: '#7a9bbf', lineHeight: 1.5 }}>{a.description}</div>
+            </div>
+            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 8, flexShrink: 0 }}>
+              <div style={{ fontSize: 11, color: '#48dc82', fontWeight: 600 }}>+{a.karma} karma</div>
+              <button onClick={() => toggle(a.id)} style={{ background: a.launched ? 'rgba(255,80,80,.2)' : 'linear-gradient(135deg,#00c8ff,#0080ff)', border: a.launched ? '1px solid rgba(255,80,80,.4)' : 'none', borderRadius: 7, color: a.launched ? '#ff6b6b' : '#fff', fontFamily: "'Orbitron',sans-serif", fontSize: 11, fontWeight: 700, letterSpacing: '.08em', padding: '7px 16px', cursor: 'pointer' }}>{a.launched ? 'Quit' : 'Launch'}</button>
+            </div>
+          </div>
+        ))}
+        {filtered.length === 0 && <div style={{ textAlign: 'center', color: '#4a6a88', fontSize: 14, padding: 32 }}>No OApps found.</div>}
+      </div>
+    </div>
+  );
+}

package/src/components/common/ONET.tsx

@@ -0,0 +1,51 @@
+'use client';
+import { useState } from 'react';
+
+const STATS = [{ label: 'Peers', value: '2,847' }, { label: 'Speed', value: '1.2 Gb/s' }, { label: 'Encrypted', value: '100%' }];
+const PEERS = [
+  { id: '1', name: 'AvatarX_7291', location: 'New York, US', ping: 14 },
+  { id: '2', name: 'StarKeeper_99', location: 'London, UK', ping: 32 },
+  { id: '3', name: 'NeonRider_404', location: 'Tokyo, JP', ping: 67 },
+];
+
+export function ONET() {
+  const [connected, setConnected] = useState(false);
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
+      <div style={{ textAlign: 'center' }}>
+        <h2 style={{ fontFamily: "'Orbitron',sans-serif", fontSize: 20, color: '#fff', margin: '0 0 6px' }}>🌐 ONET</h2>
+        <p style={{ fontSize: 13, color: '#7a9bbf', margin: 0 }}>The OASIS decentralised internet layer.</p>
+      </div>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 14, background: 'rgba(255,255,255,.04)', border: `1px solid ${connected ? 'rgba(72,220,130,.3)' : 'rgba(0,200,255,.12)'}`, borderRadius: 12, padding: 16 }}>
+        <div style={{ width: 12, height: 12, borderRadius: '50%', background: connected ? '#48dc82' : '#4a6a88', boxShadow: connected ? '0 0 10px #48dc82' : undefined, flexShrink: 0, transition: 'all .3s' }} />
+        <div style={{ flex: 1 }}>
+          <div style={{ fontSize: 12, color: '#7a9bbf', textTransform: 'uppercase', letterSpacing: '.06em' }}>ONET Connection</div>
+          <div style={{ fontFamily: "'Orbitron',sans-serif", fontSize: 14, color: '#fff', marginTop: 3 }}>{connected ? 'Connected' : 'Disconnected'}</div>
+        </div>
+        <button onClick={() => setConnected(c => !c)} style={{ background: 'linear-gradient(135deg,#00c8ff,#0080ff)', border: 'none', borderRadius: 8, color: '#fff', fontFamily: "'Orbitron',sans-serif", fontSize: 12, fontWeight: 700, letterSpacing: '.08em', padding: '9px 18px', cursor: 'pointer' }}>{connected ? 'Disconnect' : 'Connect'}</button>
+      </div>
+      {connected && (
+        <>
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 12 }}>
+            {STATS.map(s => (
+              <div key={s.label} style={{ background: 'rgba(255,255,255,.04)', border: '1px solid rgba(0,200,255,.1)', borderRadius: 10, padding: 14, textAlign: 'center' }}>
+                <div style={{ fontFamily: "'Share Tech Mono',monospace", fontSize: 18, color: '#00c8ff', fontWeight: 600 }}>{s.value}</div>
+                <div style={{ fontSize: 11, color: '#7a9bbf', marginTop: 4, textTransform: 'uppercase', letterSpacing: '.06em' }}>{s.label}</div>
+              </div>
+            ))}
+          </div>
+          <div style={{ fontFamily: "'Orbitron',sans-serif", fontSize: 12, color: '#7a9bbf', letterSpacing: '.06em', textTransform: 'uppercase' }}>Active Peers</div>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+            {PEERS.map(p => (
+              <div key={p.id} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 14px', background: 'rgba(255,255,255,.03)', border: '1px solid rgba(0,200,255,.07)', borderRadius: 8 }}>
+                <div style={{ fontSize: 20 }}>👤</div>
+                <div style={{ flex: 1 }}><div style={{ fontSize: 13, color: '#e0f0ff' }}>{p.name}</div><div style={{ fontSize: 11, color: '#4a6a88', marginTop: 2 }}>{p.location}</div></div>
+                <div style={{ fontFamily: "'Share Tech Mono',monospace", fontSize: 12, color: '#48dc82' }}>{p.ping}ms</div>
+              </div>
+            ))}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

package/src/components/common/ONODE.tsx

@@ -0,0 +1,50 @@
+'use client';
+import { useState } from 'react';
+
+const METRICS = [{ label: 'CPU', value: '18%' }, { label: 'RAM', value: '2.1 GB' }, { label: 'Storage', value: '47 GB' }, { label: 'Blocks', value: '12,450' }];
+const LOGS = [
+  { time: '09:42:01', level: 'info', message: 'ONODE started. Connecting to ONET…' },
+  { time: '09:42:02', level: 'info', message: 'Connected to 12 peers.' },
+  { time: '09:42:05', level: 'info', message: 'Block #12450 validated.' },
+  { time: '09:42:08', level: 'warn', message: 'Peer ONODE-77 latency high: 340ms.' },
+  { time: '09:42:12', level: 'info', message: 'Data sync complete. 100% coverage.' },
+];
+const LOG_COLORS = { info: '#00c8ff', warn: '#ffb43c', error: '#ff6b6b' };
+
+export function ONODE() {
+  const [running, setRunning] = useState(false);
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
+      <div style={{ textAlign: 'center' }}>
+        <h2 style={{ fontFamily: "'Orbitron',sans-serif", fontSize: 20, color: '#fff', margin: '0 0 6px' }}>🖥️ ONODE</h2>
+        <p style={{ fontSize: 13, color: '#7a9bbf', margin: 0 }}>Your personal OASIS node. Store, validate, and relay data.</p>
+      </div>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
+        <div style={{ flex: 1, background: 'rgba(255,255,255,.04)', border: `1px solid ${running ? 'rgba(72,220,130,.3)' : 'rgba(255,80,80,.2)'}`, borderRadius: 8, padding: '10px 14px', fontFamily: "'Orbitron',sans-serif", fontSize: 13, color: running ? '#48dc82' : '#ff6b6b' }}>{running ? '● Running' : '○ Stopped'}</div>
+        <button onClick={() => setRunning(r => !r)} style={{ background: running ? 'rgba(255,80,80,.2)' : 'linear-gradient(135deg,#00c8ff,#0080ff)', border: running ? '1px solid rgba(255,80,80,.35)' : 'none', borderRadius: 8, color: running ? '#ff6b6b' : '#fff', fontFamily: "'Orbitron',sans-serif", fontSize: 12, fontWeight: 700, letterSpacing: '.08em', padding: '10px 20px', cursor: 'pointer' }}>{running ? 'Stop Node' : 'Start Node'}</button>
+      </div>
+      {running && (
+        <>
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 10 }}>
+            {METRICS.map(m => (
+              <div key={m.label} style={{ background: 'rgba(255,255,255,.04)', border: '1px solid rgba(0,200,255,.1)', borderRadius: 10, padding: 12, textAlign: 'center' }}>
+                <div style={{ fontFamily: "'Share Tech Mono',monospace", fontSize: 16, color: '#00c8ff', fontWeight: 600 }}>{m.value}</div>
+                <div style={{ fontSize: 10, color: '#7a9bbf', marginTop: 4, textTransform: 'uppercase', letterSpacing: '.06em' }}>{m.label}</div>
+              </div>
+            ))}
+          </div>
+          <div style={{ fontFamily: "'Orbitron',sans-serif", fontSize: 12, color: '#7a9bbf', letterSpacing: '.06em', textTransform: 'uppercase' }}>Node Logs</div>
+          <div style={{ background: '#020a14', border: '1px solid rgba(0,200,255,.1)', borderRadius: 8, padding: 12, display: 'flex', flexDirection: 'column', gap: 5, maxHeight: 160, overflowY: 'auto', fontFamily: "'Share Tech Mono',monospace" }}>
+            {LOGS.map(l => (
+              <div key={l.time} style={{ display: 'flex', gap: 10, fontSize: 11 }}>
+                <span style={{ color: '#4a6a88', flexShrink: 0 }}>{l.time}</span>
+                <span style={{ color: LOG_COLORS[l.level] }}>[{l.level.toUpperCase()}]</span>
+                <span style={{ color: '#7a9bbf' }}>{l.message}</span>
+              </div>
+            ))}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}