@oasisomniverse/react 1.0.0 → 1.1.0

package/src/components/common/SearchAvatars.jsx

@@ -1,49 +1,49 @@
-import { useState } from 'react';
-import { OASISClient } from '@oasisomniverse/web4-api';
-
-export function SearchAvatars() {
-  const [query, setQuery] = useState('');
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState('');
-  const [results, setResults] = useState([]);
-  const [searched, setSearched] = useState(false);
-
-  async function search() {
-    if (!query.trim()) return;
-    setLoading(true); setError(''); setResults([]); setSearched(false);
-    try {
-      const oasis = new OASISClient({ baseUrl: 'https://api.web4.oasisomniverse.one' });
-      const res = await oasis.avatar?.searchAvatars?.({ searchQuery: query });
-      setResults(Array.isArray(res?.result) ? res.result : []);
-      setSearched(true);
-    } catch (e) { setError(e?.message ?? 'Search failed.'); }
-    finally { setLoading(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' }}>🔍 Search Avatars</h2>
-        <p style={{ fontSize: 13, color: '#7a9bbf', margin: 0 }}>Find other OASIS avatars by username or name.</p>
-      </div>
-      <div style={{ display: 'flex', gap: 10 }}>
-        <input style={{ flex: 1, 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' }} value={query} onChange={e => setQuery(e.target.value)} onKeyDown={e => e.key === 'Enter' && search()} placeholder="Search by username…" />
-        <button onClick={search} disabled={loading || !query.trim()} style={{ background: 'linear-gradient(135deg,#00c8ff,#0080ff)', border: 'none', borderRadius: 8, color: '#fff', fontFamily: "'Orbitron',sans-serif", fontSize: 12, fontWeight: 700, letterSpacing: '.08em', padding: '10px 20px', cursor: 'pointer', opacity: loading || !query.trim() ? .4 : 1 }}>{loading ? '…' : 'Search'}</button>
-      </div>
-      {error && <div style={{ background: 'rgba(255,80,80,.12)', border: '1px solid rgba(255,80,80,.3)', color: '#ff6b6b', borderRadius: 8, padding: '10px 14px', fontSize: 13 }}>{error}</div>}
-      {results.length > 0 ? (
-        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
-          {results.map(a => (
-            <div key={a.id} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '14px 16px', background: 'rgba(255,255,255,.04)', border: '1px solid rgba(0,200,255,.12)', borderRadius: 10 }}>
-              <div style={{ fontSize: 28 }}>👤</div>
-              <div style={{ flex: 1 }}><div style={{ fontFamily: "'Orbitron',sans-serif", fontSize: 13, color: '#fff' }}>{a.username}</div><div style={{ fontSize: 12, color: '#7a9bbf', marginTop: 2 }}>{a.firstName} {a.lastName}</div></div>
-              <div style={{ fontSize: 12, color: '#48dc82', fontWeight: 600, whiteSpace: 'nowrap' }}>{a.karma} karma</div>
-            </div>
-          ))}
-        </div>
-      ) : searched && !loading ? (
-        <div style={{ textAlign: 'center', color: '#4a6a88', fontSize: 14, padding: 24 }}>No avatars found for "{query}".</div>
-      ) : null}
-    </div>
-  );
-}
+import { useState } from 'react';
+import { OASISClient } from '@oasisomniverse/web4-api';
+
+export function SearchAvatars() {
+  const [query, setQuery] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [results, setResults] = useState([]);
+  const [searched, setSearched] = useState(false);
+
+  async function search() {
+    if (!query.trim()) return;
+    setLoading(true); setError(''); setResults([]); setSearched(false);
+    try {
+      const oasis = new OASISClient({ baseUrl: 'https://api.web4.oasisomniverse.one' });
+      const res = await oasis.avatar?.searchAvatars?.({ searchQuery: query });
+      setResults(Array.isArray(res?.result) ? res.result : []);
+      setSearched(true);
+    } catch (e) { setError(e?.message ?? 'Search failed.'); }
+    finally { setLoading(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' }}>🔍 Search Avatars</h2>
+        <p style={{ fontSize: 13, color: '#7a9bbf', margin: 0 }}>Find other OASIS avatars by username or name.</p>
+      </div>
+      <div style={{ display: 'flex', gap: 10 }}>
+        <input style={{ flex: 1, 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' }} value={query} onChange={e => setQuery(e.target.value)} onKeyDown={e => e.key === 'Enter' && search()} placeholder="Search by username…" />
+        <button onClick={search} disabled={loading || !query.trim()} style={{ background: 'linear-gradient(135deg,#00c8ff,#0080ff)', border: 'none', borderRadius: 8, color: '#fff', fontFamily: "'Orbitron',sans-serif", fontSize: 12, fontWeight: 700, letterSpacing: '.08em', padding: '10px 20px', cursor: 'pointer', opacity: loading || !query.trim() ? .4 : 1 }}>{loading ? '…' : 'Search'}</button>
+      </div>
+      {error && <div style={{ background: 'rgba(255,80,80,.12)', border: '1px solid rgba(255,80,80,.3)', color: '#ff6b6b', borderRadius: 8, padding: '10px 14px', fontSize: 13 }}>{error}</div>}
+      {results.length > 0 ? (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
+          {results.map(a => (
+            <div key={a.id} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '14px 16px', background: 'rgba(255,255,255,.04)', border: '1px solid rgba(0,200,255,.12)', borderRadius: 10 }}>
+              <div style={{ fontSize: 28 }}>👤</div>
+              <div style={{ flex: 1 }}><div style={{ fontFamily: "'Orbitron',sans-serif", fontSize: 13, color: '#fff' }}>{a.username}</div><div style={{ fontSize: 12, color: '#7a9bbf', marginTop: 2 }}>{a.firstName} {a.lastName}</div></div>
+              <div style={{ fontSize: 12, color: '#48dc82', fontWeight: 600, whiteSpace: 'nowrap' }}>{a.karma} karma</div>
+            </div>
+          ))}
+        </div>
+      ) : searched && !loading ? (
+        <div style={{ textAlign: 'center', color: '#4a6a88', fontSize: 14, padding: 24 }}>No avatars found for "{query}".</div>
+      ) : null}
+    </div>
+  );
+}

package/src/components/common/Seeds.jsx

@@ -1,39 +1,39 @@
-import { useState } from 'react';
-
-const RARITY_COLORS = { Common: '#7a9bbf', Rare: '#5ba8ff', Epic: '#b87fff', Legendary: '#ffb43c' };
-const ICONS = { Spiritual: '✨', Health: '💚', Community: '🤝', Knowledge: '📖' };
-const INITIAL = [
-  { id: '1', name: 'Wisdom Seed', type: 'Spiritual', rarity: 'Rare', karma: 50, planted: false },
-  { id: '2', name: 'Healing Seed', type: 'Health', rarity: 'Common', karma: 20, planted: false },
-  { id: '3', name: 'Unity Seed', type: 'Community', rarity: 'Epic', karma: 150, planted: false },
-  { id: '4', name: 'Truth Seed', type: 'Knowledge', rarity: 'Legendary', karma: 500, planted: false },
-  { id: '5', name: 'Love Seed', type: 'Spiritual', rarity: 'Common', karma: 30, planted: false },
-  { id: '6', name: 'Peace Seed', type: 'Community', rarity: 'Rare', karma: 75, planted: false },
-];
-
-export function Seeds() {
-  const [seeds, setSeeds] = useState(INITIAL);
-  function plant(id) { setSeeds(s => s.map(x => x.id === id ? { ...x, planted: true } : x)); }
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
-      <div style={{ textAlign: 'center' }}>
-        <h2 style={{ fontFamily: "'Orbitron',sans-serif", fontSize: 20, color: '#fff', margin: '0 0 6px' }}>🌱 Seeds</h2>
-        <p style={{ fontSize: 13, color: '#7a9bbf', margin: 0 }}>Plant seeds to grow your OASIS avatar and earn karma.</p>
-      </div>
-      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill,minmax(160px,1fr))', gap: 16 }}>
-        {seeds.map(s => (
-          <div key={s.id} style={{ background: s.planted ? 'rgba(72,220,130,.04)' : 'rgba(255,255,255,.04)', border: `1px solid ${s.planted ? 'rgba(72,220,130,.3)' : 'rgba(0,200,255,.15)'}`, borderRadius: 12, padding: '18px 14px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10 }}>
-            <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', borderRadius: 999, padding: '3px 10px', border: `1px solid ${RARITY_COLORS[s.rarity]}44`, color: RARITY_COLORS[s.rarity] }}>{s.rarity}</div>
-            <div style={{ fontSize: 36 }}>{ICONS[s.type] ?? '🌱'}</div>
-            <div style={{ fontFamily: "'Orbitron',sans-serif", fontSize: 13, color: '#fff', textAlign: 'center' }}>{s.name}</div>
-            <div style={{ fontSize: 11, color: '#7a9bbf' }}>{s.type}</div>
-            <div style={{ fontSize: 12, color: '#48dc82', fontWeight: 600 }}>+{s.karma} Karma</div>
-            {s.planted
-              ? <div style={{ fontSize: 12, color: '#48dc82', fontWeight: 600 }}>🌿 Growing…</div>
-              : <button style={{ width: '100%', background: 'linear-gradient(135deg,#00c8ff,#0080ff)', border: 'none', borderRadius: 7, color: '#fff', fontFamily: "'Orbitron',sans-serif", fontSize: 11, fontWeight: 700, letterSpacing: '.08em', padding: 8, cursor: 'pointer' }} onClick={() => plant(s.id)}>Plant Seed</button>}
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
+import { useState } from 'react';
+
+const RARITY_COLORS = { Common: '#7a9bbf', Rare: '#5ba8ff', Epic: '#b87fff', Legendary: '#ffb43c' };
+const ICONS = { Spiritual: '✨', Health: '💚', Community: '🤝', Knowledge: '📖' };
+const INITIAL = [
+  { id: '1', name: 'Wisdom Seed', type: 'Spiritual', rarity: 'Rare', karma: 50, planted: false },
+  { id: '2', name: 'Healing Seed', type: 'Health', rarity: 'Common', karma: 20, planted: false },
+  { id: '3', name: 'Unity Seed', type: 'Community', rarity: 'Epic', karma: 150, planted: false },
+  { id: '4', name: 'Truth Seed', type: 'Knowledge', rarity: 'Legendary', karma: 500, planted: false },
+  { id: '5', name: 'Love Seed', type: 'Spiritual', rarity: 'Common', karma: 30, planted: false },
+  { id: '6', name: 'Peace Seed', type: 'Community', rarity: 'Rare', karma: 75, planted: false },
+];
+
+export function Seeds() {
+  const [seeds, setSeeds] = useState(INITIAL);
+  function plant(id) { setSeeds(s => s.map(x => x.id === id ? { ...x, planted: true } : x)); }
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
+      <div style={{ textAlign: 'center' }}>
+        <h2 style={{ fontFamily: "'Orbitron',sans-serif", fontSize: 20, color: '#fff', margin: '0 0 6px' }}>🌱 Seeds</h2>
+        <p style={{ fontSize: 13, color: '#7a9bbf', margin: 0 }}>Plant seeds to grow your OASIS avatar and earn karma.</p>
+      </div>
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill,minmax(160px,1fr))', gap: 16 }}>
+        {seeds.map(s => (
+          <div key={s.id} style={{ background: s.planted ? 'rgba(72,220,130,.04)' : 'rgba(255,255,255,.04)', border: `1px solid ${s.planted ? 'rgba(72,220,130,.3)' : 'rgba(0,200,255,.15)'}`, borderRadius: 12, padding: '18px 14px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10 }}>
+            <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', borderRadius: 999, padding: '3px 10px', border: `1px solid ${RARITY_COLORS[s.rarity]}44`, color: RARITY_COLORS[s.rarity] }}>{s.rarity}</div>
+            <div style={{ fontSize: 36 }}>{ICONS[s.type] ?? '🌱'}</div>
+            <div style={{ fontFamily: "'Orbitron',sans-serif", fontSize: 13, color: '#fff', textAlign: 'center' }}>{s.name}</div>
+            <div style={{ fontSize: 11, color: '#7a9bbf' }}>{s.type}</div>
+            <div style={{ fontSize: 12, color: '#48dc82', fontWeight: 600 }}>+{s.karma} Karma</div>
+            {s.planted
+              ? <div style={{ fontSize: 12, color: '#48dc82', fontWeight: 600 }}>🌿 Growing…</div>
+              : <button style={{ width: '100%', background: 'linear-gradient(135deg,#00c8ff,#0080ff)', border: 'none', borderRadius: 7, color: '#fff', fontFamily: "'Orbitron',sans-serif", fontSize: 11, fontWeight: 700, letterSpacing: '.08em', padding: 8, cursor: 'pointer' }} onClick={() => plant(s.id)}>Plant Seed</button>}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/components/common/Settings.jsx

@@ -1,70 +1,70 @@
-import { useState } from 'react';
-
-const SECTIONS = [
-  { icon: '🔔', label: 'Notifications', options: [
-    { key: 'notifications', name: 'Enable Notifications', desc: 'Receive alerts for karma, messages and quests.', type: 'toggle' },
-    { key: 'sound', name: 'Sound Effects', desc: 'Play sounds for OASIS events.', type: 'toggle' },
-  ]},
-  { icon: '🎨', label: 'Appearance', options: [
-    { key: 'darkMode', name: 'Dark Mode', desc: 'Use the dark space theme.', type: 'toggle' },
-    { key: 'theme', name: 'Theme', desc: 'Select your OASIS visual theme.', type: 'select', choices: ['Dark Space', 'Neon City', 'Forest Realm'] },
-  ]},
-  { icon: '🌐', label: 'Language & Region', options: [
-    { key: 'language', name: 'Language', desc: 'Select your preferred language.', type: 'select', choices: ['English', 'Spanish', 'French', 'German', 'Japanese'] },
-    { key: 'currency', name: 'Display Currency', desc: 'Currency for prices.', type: 'select', choices: ['ETH', 'SOL', 'USD', 'GBP', 'EUR'] },
-  ]},
-  { icon: '💾', label: 'Data', options: [
-    { key: 'autoSave', name: 'Auto-save Progress', desc: 'Automatically save your OASIS progress.', type: 'toggle' },
-  ]},
-];
-
-export function Settings() {
-  const [open, setOpen] = useState('');
-  const [prefs, setPrefs] = useState({ notifications: true, darkMode: true, sound: false, autoSave: true, language: 'English', theme: 'Dark Space', currency: 'ETH' });
-  const [saved, setSaved] = useState(false);
-  function togglePref(k) { setPrefs(p => ({ ...p, [k]: !p[k] })); }
-  function setPref(k, v) { setPrefs(p => ({ ...p, [k]: v })); }
-  function save() { setSaved(true); setTimeout(() => setSaved(false), 2000); }
-  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' }}>⚙️ Settings</h2>
-        <p style={{ fontSize: 13, color: '#7a9bbf', margin: 0 }}>Manage your OASIS account and preferences.</p>
-      </div>
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-        {SECTIONS.map(sec => (
-          <div key={sec.label} style={{ background: 'rgba(255,255,255,.04)', border: `1px solid ${open === sec.label ? 'rgba(0,200,255,.3)' : 'rgba(0,200,255,.12)'}`, borderRadius: 10, overflow: 'hidden' }}>
-            <div onClick={() => setOpen(o => o === sec.label ? '' : sec.label)} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '14px 16px', cursor: 'pointer', userSelect: 'none' }}>
-              <span style={{ fontSize: 18 }}>{sec.icon}</span>
-              <span style={{ fontFamily: "'Orbitron',sans-serif", fontSize: 13, color: '#fff', flex: 1 }}>{sec.label}</span>
-              <span style={{ fontSize: 10, color: '#7a9bbf' }}>{open === sec.label ? '▲' : '▼'}</span>
-            </div>
-            {open === sec.label && (
-              <div style={{ padding: '0 16px 16px', display: 'flex', flexDirection: 'column', gap: 14 }}>
-                {sec.options.map(opt => (
-                  <div key={opt.key} style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
-                    <div style={{ flex: 1 }}>
-                      <div style={{ fontSize: 13, color: '#e0f0ff' }}>{opt.name}</div>
-                      <div style={{ fontSize: 11, color: '#4a6a88', marginTop: 2 }}>{opt.desc}</div>
-                    </div>
-                    {opt.type === 'toggle' && (
-                      <div onClick={() => togglePref(opt.key)} style={{ width: 44, height: 24, borderRadius: 999, background: prefs[opt.key] ? 'linear-gradient(135deg,#00c8ff,#0080ff)' : 'rgba(255,255,255,.1)', cursor: 'pointer', position: 'relative', flexShrink: 0 }}>
-                        <div style={{ position: 'absolute', top: 3, left: prefs[opt.key] ? 23 : 3, width: 18, height: 18, borderRadius: '50%', background: '#fff', transition: 'left .2s' }} />
-                      </div>
-                    )}
-                    {opt.type === 'select' && (
-                      <select value={prefs[opt.key]} onChange={e => setPref(opt.key, e.target.value)} style={{ background: 'rgba(255,255,255,.05)', border: '1px solid rgba(0,200,255,.2)', borderRadius: 7, color: '#fff', fontSize: 12, padding: '6px 10px', outline: 'none' }}>
-                        {opt.choices.map(c => <option key={c} value={c}>{c}</option>)}
-                      </select>
-                    )}
-                  </div>
-                ))}
-              </div>
-            )}
-          </div>
-        ))}
-      </div>
-      <button onClick={save} style={{ background: 'linear-gradient(135deg,#00c8ff,#0080ff)', border: 'none', borderRadius: 8, color: '#fff', fontFamily: "'Orbitron',sans-serif", fontSize: 13, fontWeight: 700, letterSpacing: '.08em', padding: 12, cursor: 'pointer' }}>{saved ? '✅ Saved!' : 'Save Settings'}</button>
-    </div>
-  );
-}
+import { useState } from 'react';
+
+const SECTIONS = [
+  { icon: '🔔', label: 'Notifications', options: [
+    { key: 'notifications', name: 'Enable Notifications', desc: 'Receive alerts for karma, messages and quests.', type: 'toggle' },
+    { key: 'sound', name: 'Sound Effects', desc: 'Play sounds for OASIS events.', type: 'toggle' },
+  ]},
+  { icon: '🎨', label: 'Appearance', options: [
+    { key: 'darkMode', name: 'Dark Mode', desc: 'Use the dark space theme.', type: 'toggle' },
+    { key: 'theme', name: 'Theme', desc: 'Select your OASIS visual theme.', type: 'select', choices: ['Dark Space', 'Neon City', 'Forest Realm'] },
+  ]},
+  { icon: '🌐', label: 'Language & Region', options: [
+    { key: 'language', name: 'Language', desc: 'Select your preferred language.', type: 'select', choices: ['English', 'Spanish', 'French', 'German', 'Japanese'] },
+    { key: 'currency', name: 'Display Currency', desc: 'Currency for prices.', type: 'select', choices: ['ETH', 'SOL', 'USD', 'GBP', 'EUR'] },
+  ]},
+  { icon: '💾', label: 'Data', options: [
+    { key: 'autoSave', name: 'Auto-save Progress', desc: 'Automatically save your OASIS progress.', type: 'toggle' },
+  ]},
+];
+
+export function Settings() {
+  const [open, setOpen] = useState('');
+  const [prefs, setPrefs] = useState({ notifications: true, darkMode: true, sound: false, autoSave: true, language: 'English', theme: 'Dark Space', currency: 'ETH' });
+  const [saved, setSaved] = useState(false);
+  function togglePref(k) { setPrefs(p => ({ ...p, [k]: !p[k] })); }
+  function setPref(k, v) { setPrefs(p => ({ ...p, [k]: v })); }
+  function save() { setSaved(true); setTimeout(() => setSaved(false), 2000); }
+  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' }}>⚙️ Settings</h2>
+        <p style={{ fontSize: 13, color: '#7a9bbf', margin: 0 }}>Manage your OASIS account and preferences.</p>
+      </div>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+        {SECTIONS.map(sec => (
+          <div key={sec.label} style={{ background: 'rgba(255,255,255,.04)', border: `1px solid ${open === sec.label ? 'rgba(0,200,255,.3)' : 'rgba(0,200,255,.12)'}`, borderRadius: 10, overflow: 'hidden' }}>
+            <div onClick={() => setOpen(o => o === sec.label ? '' : sec.label)} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '14px 16px', cursor: 'pointer', userSelect: 'none' }}>
+              <span style={{ fontSize: 18 }}>{sec.icon}</span>
+              <span style={{ fontFamily: "'Orbitron',sans-serif", fontSize: 13, color: '#fff', flex: 1 }}>{sec.label}</span>
+              <span style={{ fontSize: 10, color: '#7a9bbf' }}>{open === sec.label ? '▲' : '▼'}</span>
+            </div>
+            {open === sec.label && (
+              <div style={{ padding: '0 16px 16px', display: 'flex', flexDirection: 'column', gap: 14 }}>
+                {sec.options.map(opt => (
+                  <div key={opt.key} style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
+                    <div style={{ flex: 1 }}>
+                      <div style={{ fontSize: 13, color: '#e0f0ff' }}>{opt.name}</div>
+                      <div style={{ fontSize: 11, color: '#4a6a88', marginTop: 2 }}>{opt.desc}</div>
+                    </div>
+                    {opt.type === 'toggle' && (
+                      <div onClick={() => togglePref(opt.key)} style={{ width: 44, height: 24, borderRadius: 999, background: prefs[opt.key] ? 'linear-gradient(135deg,#00c8ff,#0080ff)' : 'rgba(255,255,255,.1)', cursor: 'pointer', position: 'relative', flexShrink: 0 }}>
+                        <div style={{ position: 'absolute', top: 3, left: prefs[opt.key] ? 23 : 3, width: 18, height: 18, borderRadius: '50%', background: '#fff', transition: 'left .2s' }} />
+                      </div>
+                    )}
+                    {opt.type === 'select' && (
+                      <select value={prefs[opt.key]} onChange={e => setPref(opt.key, e.target.value)} style={{ background: 'rgba(255,255,255,.05)', border: '1px solid rgba(0,200,255,.2)', borderRadius: 7, color: '#fff', fontSize: 12, padding: '6px 10px', outline: 'none' }}>
+                        {opt.choices.map(c => <option key={c} value={c}>{c}</option>)}
+                      </select>
+                    )}
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+      <button onClick={save} style={{ background: 'linear-gradient(135deg,#00c8ff,#0080ff)', border: 'none', borderRadius: 8, color: '#fff', fontFamily: "'Orbitron',sans-serif", fontSize: 13, fontWeight: 700, letterSpacing: '.08em', padding: 12, cursor: 'pointer' }}>{saved ? '✅ Saved!' : 'Save Settings'}</button>
+    </div>
+  );
+}

package/src/components/common/StarField.jsx

@@ -1,56 +1,56 @@
-import React, { useEffect, useRef } from 'react';
-
-export default function StarField({ starCount = 160, speed = 0.3, style = {} }) {
-  const canvasRef = useRef(null);
-
-  useEffect(() => {
-    const canvas = canvasRef.current;
-    const ctx = canvas.getContext('2d');
-    let raf;
-    let stars = [];
-
-    function resize() {
-      canvas.width = window.innerWidth;
-      canvas.height = window.innerHeight;
-    }
-
-    function init() {
-      stars = Array.from({ length: starCount }, () => ({
-        x: Math.random() * canvas.width,
-        y: Math.random() * canvas.height,
-        r: Math.random() * 1.4 + 0.3,
-        o: Math.random() * 0.6 + 0.2,
-        dy: (Math.random() * 0.3 + 0.1) * speed,
-      }));
-    }
-
-    function tick() {
-      ctx.clearRect(0, 0, canvas.width, canvas.height);
-      for (const s of stars) {
-        ctx.beginPath();
-        ctx.arc(s.x, s.y, s.r, 0, Math.PI * 2);
-        ctx.fillStyle = `rgba(200,230,255,${s.o})`;
-        ctx.fill();
-        s.y -= s.dy;
-        if (s.y < -2) { s.y = canvas.height + 2; s.x = Math.random() * canvas.width; }
-      }
-      raf = requestAnimationFrame(tick);
-    }
-
-    window.addEventListener('resize', resize);
-    resize();
-    init();
-    raf = requestAnimationFrame(tick);
-    return () => {
-      cancelAnimationFrame(raf);
-      window.removeEventListener('resize', resize);
-    };
-  }, [starCount, speed]);
-
-  return (
-    <canvas
-      ref={canvasRef}
-      style={{ position: 'fixed', inset: 0, width: '100%', height: '100%', pointerEvents: 'none', zIndex: 0, ...style }}
-    />
-  );
-}
+import React, { useEffect, useRef } from 'react';
+
+export default function StarField({ starCount = 160, speed = 0.3, style = {} }) {
+  const canvasRef = useRef(null);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext('2d');
+    let raf;
+    let stars = [];
+
+    function resize() {
+      canvas.width = window.innerWidth;
+      canvas.height = window.innerHeight;
+    }
+
+    function init() {
+      stars = Array.from({ length: starCount }, () => ({
+        x: Math.random() * canvas.width,
+        y: Math.random() * canvas.height,
+        r: Math.random() * 1.4 + 0.3,
+        o: Math.random() * 0.6 + 0.2,
+        dy: (Math.random() * 0.3 + 0.1) * speed,
+      }));
+    }
+
+    function tick() {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      for (const s of stars) {
+        ctx.beginPath();
+        ctx.arc(s.x, s.y, s.r, 0, Math.PI * 2);
+        ctx.fillStyle = `rgba(200,230,255,${s.o})`;
+        ctx.fill();
+        s.y -= s.dy;
+        if (s.y < -2) { s.y = canvas.height + 2; s.x = Math.random() * canvas.width; }
+      }
+      raf = requestAnimationFrame(tick);
+    }
+
+    window.addEventListener('resize', resize);
+    resize();
+    init();
+    raf = requestAnimationFrame(tick);
+    return () => {
+      cancelAnimationFrame(raf);
+      window.removeEventListener('resize', resize);
+    };
+  }, [starCount, speed]);
+
+  return (
+    <canvas
+      ref={canvasRef}
+      style={{ position: 'fixed', inset: 0, width: '100%', height: '100%', pointerEvents: 'none', zIndex: 0, ...style }}
+    />
+  );
+}

package/src/components/common/Wallet.jsx

@@ -1,45 +1,45 @@
-const BALANCES = [
-  { icon: '⟠', currency: 'Ethereum', network: 'Mainnet', amount: '0.4821', symbol: 'ETH' },
-  { icon: '◎', currency: 'Solana', network: 'Mainnet', amount: '12.305', symbol: 'SOL' },
-  { icon: '⬡', currency: 'Polygon', network: 'Mainnet', amount: '245.00', symbol: 'MATIC' },
-];
-const TXS = [
-  { id: '1', type: 'in', amount: 0.05, currency: 'ETH', description: 'NFT Sale — Cosmic Warrior', date: '2 hours ago' },
-  { id: '2', type: 'out', amount: 12, currency: 'SOL', description: 'Quest Reward Conversion', date: '1 day ago' },
-  { id: '3', type: 'in', amount: 100, currency: 'MATIC', description: 'Karma Reward Payout', date: '3 days ago' },
-];
-
-export function Wallet() {
-  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' }}>💰 Wallet</h2>
-        <p style={{ fontSize: 13, color: '#7a9bbf', margin: 0 }}>Your OASIS multi-chain wallet.</p>
-      </div>
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
-        {BALANCES.map(b => (
-          <div key={b.currency} style={{ display: 'flex', alignItems: 'center', gap: 14, background: 'rgba(255,255,255,.04)', border: '1px solid rgba(0,200,255,.12)', borderRadius: 10, padding: '14px 16px' }}>
-            <div style={{ fontSize: 24 }}>{b.icon}</div>
-            <div style={{ flex: 1 }}><div style={{ fontFamily: "'Orbitron',sans-serif", fontSize: 13, color: '#fff' }}>{b.currency}</div><div style={{ fontSize: 11, color: '#7a9bbf', marginTop: 2 }}>{b.network}</div></div>
-            <div style={{ fontFamily: "'Share Tech Mono',monospace", fontSize: 16, color: '#00c8ff', fontWeight: 600 }}>{b.amount} <span style={{ fontSize: 12, color: '#7a9bbf' }}>{b.symbol}</span></div>
-          </div>
-        ))}
-      </div>
-      <div style={{ display: 'flex', gap: 10 }}>
-        {['📤 Send', '📥 Receive', '🔄 Swap'].map(a => (
-          <button key={a} style={{ flex: 1, background: 'rgba(0,200,255,.08)', border: '1px solid rgba(0,200,255,.2)', borderRadius: 8, color: '#00c8ff', fontFamily: "'Orbitron',sans-serif", fontSize: 11, fontWeight: 700, letterSpacing: '.06em', padding: 10, cursor: 'pointer' }}>{a}</button>
-        ))}
-      </div>
-      <div style={{ fontFamily: "'Orbitron',sans-serif", fontSize: 12, color: '#7a9bbf', letterSpacing: '.06em', textTransform: 'uppercase' }}>Recent Transactions</div>
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-        {TXS.map(t => (
-          <div key={t.id} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 14px', background: 'rgba(255,255,255,.03)', border: '1px solid rgba(0,200,255,.08)', borderRadius: 8 }}>
-            <div style={{ width: 28, height: 28, borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14, fontWeight: 700, flexShrink: 0, background: t.type === 'in' ? 'rgba(72,220,130,.15)' : 'rgba(255,107,107,.15)', color: t.type === 'in' ? '#48dc82' : '#ff6b6b' }}>{t.type === 'in' ? '↓' : '↑'}</div>
-            <div style={{ flex: 1 }}><div style={{ fontSize: 13, color: '#e0f0ff' }}>{t.description}</div><div style={{ fontSize: 11, color: '#4a6a88', marginTop: 2 }}>{t.date}</div></div>
-            <div style={{ fontFamily: "'Share Tech Mono',monospace", fontSize: 13, fontWeight: 600, color: t.type === 'in' ? '#48dc82' : '#ff6b6b' }}>{t.type === 'in' ? '+' : '-'}{t.amount} {t.currency}</div>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
+const BALANCES = [
+  { icon: '⟠', currency: 'Ethereum', network: 'Mainnet', amount: '0.4821', symbol: 'ETH' },
+  { icon: '◎', currency: 'Solana', network: 'Mainnet', amount: '12.305', symbol: 'SOL' },
+  { icon: '⬡', currency: 'Polygon', network: 'Mainnet', amount: '245.00', symbol: 'MATIC' },
+];
+const TXS = [
+  { id: '1', type: 'in', amount: 0.05, currency: 'ETH', description: 'NFT Sale — Cosmic Warrior', date: '2 hours ago' },
+  { id: '2', type: 'out', amount: 12, currency: 'SOL', description: 'Quest Reward Conversion', date: '1 day ago' },
+  { id: '3', type: 'in', amount: 100, currency: 'MATIC', description: 'Karma Reward Payout', date: '3 days ago' },
+];
+
+export function Wallet() {
+  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' }}>💰 Wallet</h2>
+        <p style={{ fontSize: 13, color: '#7a9bbf', margin: 0 }}>Your OASIS multi-chain wallet.</p>
+      </div>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
+        {BALANCES.map(b => (
+          <div key={b.currency} style={{ display: 'flex', alignItems: 'center', gap: 14, background: 'rgba(255,255,255,.04)', border: '1px solid rgba(0,200,255,.12)', borderRadius: 10, padding: '14px 16px' }}>
+            <div style={{ fontSize: 24 }}>{b.icon}</div>
+            <div style={{ flex: 1 }}><div style={{ fontFamily: "'Orbitron',sans-serif", fontSize: 13, color: '#fff' }}>{b.currency}</div><div style={{ fontSize: 11, color: '#7a9bbf', marginTop: 2 }}>{b.network}</div></div>
+            <div style={{ fontFamily: "'Share Tech Mono',monospace", fontSize: 16, color: '#00c8ff', fontWeight: 600 }}>{b.amount} <span style={{ fontSize: 12, color: '#7a9bbf' }}>{b.symbol}</span></div>
+          </div>
+        ))}
+      </div>
+      <div style={{ display: 'flex', gap: 10 }}>
+        {['📤 Send', '📥 Receive', '🔄 Swap'].map(a => (
+          <button key={a} style={{ flex: 1, background: 'rgba(0,200,255,.08)', border: '1px solid rgba(0,200,255,.2)', borderRadius: 8, color: '#00c8ff', fontFamily: "'Orbitron',sans-serif", fontSize: 11, fontWeight: 700, letterSpacing: '.06em', padding: 10, cursor: 'pointer' }}>{a}</button>
+        ))}
+      </div>
+      <div style={{ fontFamily: "'Orbitron',sans-serif", fontSize: 12, color: '#7a9bbf', letterSpacing: '.06em', textTransform: 'uppercase' }}>Recent Transactions</div>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+        {TXS.map(t => (
+          <div key={t.id} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 14px', background: 'rgba(255,255,255,.03)', border: '1px solid rgba(0,200,255,.08)', borderRadius: 8 }}>
+            <div style={{ width: 28, height: 28, borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14, fontWeight: 700, flexShrink: 0, background: t.type === 'in' ? 'rgba(72,220,130,.15)' : 'rgba(255,107,107,.15)', color: t.type === 'in' ? '#48dc82' : '#ff6b6b' }}>{t.type === 'in' ? '↓' : '↑'}</div>
+            <div style={{ flex: 1 }}><div style={{ fontSize: 13, color: '#e0f0ff' }}>{t.description}</div><div style={{ fontSize: 11, color: '#4a6a88', marginTop: 2 }}>{t.date}</div></div>
+            <div style={{ fontFamily: "'Share Tech Mono',monospace", fontSize: 13, fontWeight: 600, color: t.type === 'in' ? '#48dc82' : '#ff6b6b' }}>{t.type === 'in' ? '+' : '-'}{t.amount} {t.currency}</div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/components/index.js

@@ -1,26 +1,26 @@
-// @oasisomniverse/react — OASIS Omniverse React components
-
-export { AvatarConnect }    from './common/AvatarConnect';
-export { Contact }          from './common/Contact';
-export { Eggs }             from './common/Eggs';
-export { Game }             from './common/Game';
-export { HyperDrive }       from './common/HyperDrive';
-export { KarmaToast }       from './common/KarmaToast';
-export { Map }              from './common/Map';
-export { MenuMessage }      from './common/MenuMessage';
-export { Messaging }        from './common/Messaging';
-export { Mission }          from './common/Mission';
-export { NavBar }           from './common/NavBar';
-export { NFT }              from './common/NFT';
-export { OApp }             from './common/OApp';
-export { OasisModal }       from './common/OasisModal';
-export { ONET }             from './common/ONET';
-export { ONODE }            from './common/ONODE';
-export { ProviderDropdown } from './common/ProviderDropdown';
-export { Providers }        from './common/Providers';
-export { Quest }            from './common/Quest';
-export { SearchAvatars }    from './common/SearchAvatars';
-export { Seeds }            from './common/Seeds';
-export { Settings }         from './common/Settings';
-export { StarField }        from './common/StarField';
-export { Wallet }           from './common/Wallet';
+// @oasisomniverse/react — OASIS Omniverse React components
+
+export { AvatarConnect }    from './common/AvatarConnect';
+export { Contact }          from './common/Contact';
+export { Eggs }             from './common/Eggs';
+export { Game }             from './common/Game';
+export { HyperDrive }       from './common/HyperDrive';
+export { KarmaToast }       from './common/KarmaToast';
+export { Map }              from './common/Map';
+export { MenuMessage }      from './common/MenuMessage';
+export { Messaging }        from './common/Messaging';
+export { Mission }          from './common/Mission';
+export { NavBar }           from './common/NavBar';
+export { NFT }              from './common/NFT';
+export { OApp }             from './common/OApp';
+export { OasisModal }       from './common/OasisModal';
+export { ONET }             from './common/ONET';
+export { ONODE }            from './common/ONODE';
+export { ProviderDropdown } from './common/ProviderDropdown';
+export { Providers }        from './common/Providers';
+export { Quest }            from './common/Quest';
+export { SearchAvatars }    from './common/SearchAvatars';
+export { Seeds }            from './common/Seeds';
+export { Settings }         from './common/Settings';
+export { StarField }        from './common/StarField';
+export { Wallet }           from './common/Wallet';