@oasisomniverse/react 1.0.0 → 1.1.0

package/src/components/common/Messaging.jsx

@@ -1,74 +1,74 @@
-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>
-  );
-}
+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.jsx

@@ -1,40 +1,40 @@
-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>
-  );
-}
+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.jsx

@@ -1,42 +1,42 @@
-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>
-  );
-}
+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.jsx

@@ -1,52 +1,52 @@
-import { useState, useEffect } from 'react';
-
-const styles = {
-  nav: (scrolled) => ({ position: 'sticky', top: 0, zIndex: 100, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: scrolled ? '12px 32px' : '18px 32px', background: 'rgba(3,7,20,.92)', backdropFilter: 'blur(12px)', borderBottom: '1px solid rgba(0,200,255,.1)', transition: 'padding .3s', fontFamily: "'Rajdhani',sans-serif", boxSizing: 'border-box' }),
-  brand: { fontFamily: "'Orbitron',sans-serif", fontSize: 12, fontWeight: 700, letterSpacing: '.16em', color: '#fff', textDecoration: 'none', display: 'flex', alignItems: 'center', gap: 10, whiteSpace: 'nowrap' },
-  brandIcon: { color: '#00c8ff', fontSize: 16 },
-  links: { display: 'flex', gap: 16, listStyle: 'none', margin: 0, padding: 0 },
-  link: { fontFamily: "'Share Tech Mono',monospace", fontSize: 11, letterSpacing: '.08em', color: '#a8bfd8', textDecoration: 'none', textTransform: 'uppercase' },
-  loginBtn: { background: 'linear-gradient(135deg,#00c8ff,#0080ff)', border: 'none', borderRadius: 7, color: '#fff', fontFamily: "'Orbitron',sans-serif", fontSize: 10, fontWeight: 700, letterSpacing: '.08em', padding: '8px 16px', cursor: 'pointer', whiteSpace: 'nowrap' },
-};
-
-/**
- * NavBar — sticky responsive navigation bar.
- * Props:
- *   brand        string        — brand name text
- *   brandIcon    string        — icon/emoji before brand name
- *   links        Array<{label, href}> — nav links
- *   loginLabel   string        — login button label (pass null to hide)
- *   onLogin      fn            — login button click handler
- */
-export function NavBar({
-  brand = 'OASIS',
-  brandIcon = '✦',
-  links = [],
-  loginLabel = 'Login',
-  onLogin,
-}) {
-  const [scrolled, setScrolled] = useState(false);
-
-  useEffect(() => {
-    const handler = () => setScrolled(window.scrollY > 40);
-    window.addEventListener('scroll', handler, { passive: true });
-    return () => window.removeEventListener('scroll', handler);
-  }, []);
-
-  return (
-    <nav style={styles.nav(scrolled)}>
-      <a style={styles.brand} href="#">
-        <span style={styles.brandIcon}>{brandIcon}</span>
-        <span>{brand}</span>
-      </a>
-      <ul style={styles.links}>
-        {links.map((l, i) => (
-          <li key={i}><a style={styles.link} href={l.href || '#'}>{l.label}</a></li>
-        ))}
-      </ul>
-      {onLogin && (
-        <button style={styles.loginBtn} onClick={onLogin}>{loginLabel}</button>
-      )}
-    </nav>
-  );
-}
+import { useState, useEffect } from 'react';
+
+const styles = {
+  nav: (scrolled) => ({ position: 'sticky', top: 0, zIndex: 100, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: scrolled ? '12px 32px' : '18px 32px', background: 'rgba(3,7,20,.92)', backdropFilter: 'blur(12px)', borderBottom: '1px solid rgba(0,200,255,.1)', transition: 'padding .3s', fontFamily: "'Rajdhani',sans-serif", boxSizing: 'border-box' }),
+  brand: { fontFamily: "'Orbitron',sans-serif", fontSize: 12, fontWeight: 700, letterSpacing: '.16em', color: '#fff', textDecoration: 'none', display: 'flex', alignItems: 'center', gap: 10, whiteSpace: 'nowrap' },
+  brandIcon: { color: '#00c8ff', fontSize: 16 },
+  links: { display: 'flex', gap: 16, listStyle: 'none', margin: 0, padding: 0 },
+  link: { fontFamily: "'Share Tech Mono',monospace", fontSize: 11, letterSpacing: '.08em', color: '#a8bfd8', textDecoration: 'none', textTransform: 'uppercase' },
+  loginBtn: { background: 'linear-gradient(135deg,#00c8ff,#0080ff)', border: 'none', borderRadius: 7, color: '#fff', fontFamily: "'Orbitron',sans-serif", fontSize: 10, fontWeight: 700, letterSpacing: '.08em', padding: '8px 16px', cursor: 'pointer', whiteSpace: 'nowrap' },
+};
+
+/**
+ * NavBar — sticky responsive navigation bar.
+ * Props:
+ *   brand        string        — brand name text
+ *   brandIcon    string        — icon/emoji before brand name
+ *   links        Array<{label, href}> — nav links
+ *   loginLabel   string        — login button label (pass null to hide)
+ *   onLogin      fn            — login button click handler
+ */
+export function NavBar({
+  brand = 'OASIS',
+  brandIcon = '✦',
+  links = [],
+  loginLabel = 'Login',
+  onLogin,
+}) {
+  const [scrolled, setScrolled] = useState(false);
+
+  useEffect(() => {
+    const handler = () => setScrolled(window.scrollY > 40);
+    window.addEventListener('scroll', handler, { passive: true });
+    return () => window.removeEventListener('scroll', handler);
+  }, []);
+
+  return (
+    <nav style={styles.nav(scrolled)}>
+      <a style={styles.brand} href="#">
+        <span style={styles.brandIcon}>{brandIcon}</span>
+        <span>{brand}</span>
+      </a>
+      <ul style={styles.links}>
+        {links.map((l, i) => (
+          <li key={i}><a style={styles.link} href={l.href || '#'}>{l.label}</a></li>
+        ))}
+      </ul>
+      {onLogin && (
+        <button style={styles.loginBtn} onClick={onLogin}>{loginLabel}</button>
+      )}
+    </nav>
+  );
+}

package/src/components/common/OApp.jsx

@@ -1,41 +1,41 @@
-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>
-  );
-}
+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>
+  );
+}