@oasisomniverse/react 1.0.0

package/src/components/common/ONODE.jsx

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

package/src/components/common/OasisModal.css

@@ -0,0 +1,9 @@
+.oasis-modal-backdrop{position:fixed;inset:0;background:rgba(3,7,20,.75);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:9999;animation:oasisFadeIn .25s ease}
+.oasis-modal-box{background:#0d1829;border:1px solid rgba(0,200,255,.18);border-radius:16px;padding:28px;width:min(520px,92vw);max-height:88vh;overflow-y:auto;animation:oasisSlideUp .25s ease}
+.oasis-modal-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px;border-bottom:1px solid;margin-bottom:20px}
+.oasis-modal-title{font-family:'Orbitron',sans-serif;font-size:15px;font-weight:700;letter-spacing:.06em}
+.oasis-modal-close{background:none;border:none;color:#7a9bbf;font-size:18px;cursor:pointer;padding:0;line-height:1}
+.oasis-modal-close:hover{color:#fff}
+.oasis-modal-body{color:#a8bfd8;font-size:14px;line-height:1.6}
+@keyframes oasisFadeIn{from{opacity:0}to{opacity:1}}
+@keyframes oasisSlideUp{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}

package/src/components/common/OasisModal.jsx

@@ -0,0 +1,29 @@
+import React, { useEffect } from 'react';
+import './OasisModal.css';
+
+export default function OasisModal({ open, onClose, title, accentColor = '#00c8ff', children }) {
+  useEffect(() => {
+    if (!open) return;
+    const onKey = e => { if (e.key === 'Escape') onClose?.(); };
+    document.addEventListener('keydown', onKey);
+    document.body.style.overflow = 'hidden';
+    return () => {
+      document.removeEventListener('keydown', onKey);
+      document.body.style.overflow = '';
+    };
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  return (
+    <div className="oasis-modal-backdrop" onClick={e => { if (e.target === e.currentTarget) onClose?.(); }}>
+      <div className="oasis-modal-box" role="dialog" aria-modal="true">
+        <div className="oasis-modal-header" style={{ borderBottomColor: accentColor + '33' }}>
+          <span className="oasis-modal-title" style={{ color: accentColor }}>{title}</span>
+          <button className="oasis-modal-close" onClick={onClose} aria-label="Close">&#x2715;</button>
+        </div>
+        <div className="oasis-modal-body">{children}</div>
+      </div>
+    </div>
+  );
+}

package/src/components/common/ProviderDropdown.js

@@ -0,0 +1,25 @@
+import React from 'react';
+class ProviderDropdown extends React.Component {
+    state = {  } 
+    render() { 
+        return (
+            <>
+                <p className="single-form-row">
+                    <label>Provider: </label>
+                    <span className="have-selectbox">
+                        <select className="custom-selectbox">
+                            <option>EOSIO</option>
+                            <option>EOSIO - 1</option>
+                            <option>EOSIO - 2</option>
+                        </select>
+                        <i className="fa fa-angle-down"></i>
+                    </span>
+
+                    <span className="have-icon"></span>
+                </p>
+            </>
+        );
+    }
+}
+ 
+export default ProviderDropdown;

package/src/components/common/ProviderDropdown.jsx

@@ -0,0 +1,61 @@
+import { useState, useEffect, useRef } from 'react';
+
+const PROVIDERS = [
+  { id: 'ethereum', name: 'Ethereum', icon: '⟠', color: '#627eea' },
+  { id: 'solana', name: 'Solana', icon: '◎', color: '#9945ff' },
+  { id: 'polygon', name: 'Polygon', icon: '⬡', color: '#8247e5' },
+  { id: 'arbitrum', name: 'Arbitrum', icon: '🔵', color: '#2d9cdb' },
+  { id: 'eosio', name: 'EOSIO', icon: '🔮', color: '#443f54' },
+  { id: 'holochain', name: 'Holochain', icon: '⬡', color: '#00e5be' },
+  { id: 'thegraph', name: 'The Graph', icon: '📊', color: '#6f4cff' },
+];
+
+/**
+ * ProviderDropdown — blockchain provider selector.
+ * Props:
+ *   defaultProvider  string  — id of default provider
+ *   onChange         fn      — called with selected provider object
+ */
+export function ProviderDropdown({ defaultProvider = 'ethereum', onChange }) {
+  const [selected, setSelected] = useState(() => PROVIDERS.find(p => p.id === defaultProvider) || PROVIDERS[0]);
+  const [open, setOpen] = useState(false);
+  const ref = useRef(null);
+
+  useEffect(() => {
+    function onDoc(e) { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }
+    document.addEventListener('mousedown', onDoc);
+    return () => document.removeEventListener('mousedown', onDoc);
+  }, []);
+
+  function select(p) { setSelected(p); setOpen(false); onChange?.(p); }
+
+  return (
+    <div ref={ref} style={{ position: 'relative', fontFamily: "'Rajdhani',sans-serif" }}>
+      <div
+        onClick={() => setOpen(o => !o)}
+        style={{ display: 'flex', alignItems: 'center', gap: 10, background: 'rgba(255,255,255,.05)', border: `1px solid ${open ? 'rgba(0,200,255,.5)' : 'rgba(0,200,255,.25)'}`, borderRadius: 10, padding: '10px 14px', cursor: 'pointer', color: '#fff', transition: 'border-color .2s' }}
+      >
+        <span style={{ fontSize: 20, width: 28, textAlign: 'center', color: selected.color }}>{selected.icon}</span>
+        <div style={{ flex: 1 }}>
+          <div style={{ fontFamily: "'Orbitron',sans-serif", fontSize: 13, fontWeight: 700 }}>{selected.name}</div>
+          <div style={{ fontSize: 11, color: '#7a9bbf', marginTop: 2 }}>Active Provider</div>
+        </div>
+        <span style={{ fontSize: 10, color: '#7a9bbf', transform: open ? 'rotate(180deg)' : 'none', transition: 'transform .2s', display: 'inline-block' }}>▼</span>
+      </div>
+      {open && (
+        <div style={{ position: 'absolute', top: 'calc(100% + 6px)', left: 0, right: 0, background: '#0d1b2e', border: '1px solid rgba(0,200,255,.2)', borderRadius: 10, overflow: 'hidden', zIndex: 999, boxShadow: '0 8px 32px rgba(0,0,0,.5)' }}>
+          {PROVIDERS.map(p => (
+            <div
+              key={p.id}
+              onClick={() => select(p)}
+              style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 14px', cursor: 'pointer', color: '#e0f0ff', background: p.id === selected.id ? 'rgba(0,200,255,.12)' : 'transparent', borderLeft: p.id === selected.id ? '3px solid #00c8ff' : '3px solid transparent', transition: 'background .15s' }}
+            >
+              <span style={{ fontSize: 18, width: 24, textAlign: 'center', color: p.color }}>{p.icon}</span>
+              <span style={{ fontFamily: "'Orbitron',sans-serif", fontSize: 12, fontWeight: 700 }}>{p.name}</span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/common/Providers.jsx

@@ -0,0 +1,38 @@
+import { useState } from 'react';
+
+const INITIAL = [
+  { id: '1', name: 'Ethereum', icon: '⟠', color: '#627eea', type: 'Blockchain', description: 'Connect your Ethereum wallet (MetaMask, WalletConnect).', connected: false },
+  { id: '2', name: 'Solana', icon: '◎', color: '#9945ff', type: 'Blockchain', description: 'Connect your Solana wallet (Phantom, Solflare).', connected: false },
+  { id: '3', name: 'EOSIO', icon: '🔮', color: '#443f54', type: 'Blockchain', description: 'Connect via EOSIO for high-speed transactions.', connected: false },
+  { id: '4', name: 'Holochain', icon: '⬡', color: '#00e5be', type: 'P2P Network', description: 'Peer-to-peer data storage on Holochain.', connected: false },
+  { id: '5', name: 'The Graph', icon: '📊', color: '#6f4cff', type: 'Indexer', description: 'Query blockchain data with The Graph protocol.', connected: false },
+];
+
+export function Providers() {
+  const [providers, setProviders] = useState(INITIAL);
+  function toggle(id) { setProviders(l => l.map(x => x.id === id ? { ...x, connected: !x.connected } : 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' }}>🔗 Providers</h2>
+        <p style={{ fontSize: 13, color: '#7a9bbf', margin: 0 }}>Connect blockchain providers to your OASIS avatar.</p>
+      </div>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
+        {providers.map(p => (
+          <div key={p.id} style={{ display: 'flex', alignItems: 'center', gap: 14, background: p.connected ? 'rgba(72,220,130,.03)' : 'rgba(255,255,255,.04)', border: `1px solid ${p.connected ? 'rgba(72,220,130,.3)' : 'rgba(0,200,255,.12)'}`, borderRadius: 12, padding: '14px 16px' }}>
+            <div style={{ fontSize: 26, flexShrink: 0, color: p.color }}>{p.icon}</div>
+            <div style={{ flex: 1 }}>
+              <div style={{ fontFamily: "'Orbitron',sans-serif", fontSize: 13, color: '#fff', marginBottom: 2 }}>{p.name}</div>
+              <div style={{ fontSize: 11, color: '#5ba8ff', textTransform: 'uppercase', letterSpacing: '.06em', marginBottom: 4 }}>{p.type}</div>
+              <div style={{ fontSize: 12, color: '#7a9bbf' }}>{p.description}</div>
+            </div>
+            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8, flexShrink: 0 }}>
+              <div style={{ width: 8, height: 8, borderRadius: '50%', background: p.connected ? '#48dc82' : '#4a6a88', boxShadow: p.connected ? '0 0 6px #48dc82' : undefined }} />
+              <button onClick={() => toggle(p.id)} style={{ background: p.connected ? 'rgba(255,80,80,.15)' : 'linear-gradient(135deg,#00c8ff,#0080ff)', border: p.connected ? '1px solid rgba(255,80,80,.3)' : 'none', borderRadius: 7, color: p.connected ? '#ff6b6b' : '#fff', fontFamily: "'Orbitron',sans-serif", fontSize: 10, fontWeight: 700, letterSpacing: '.06em', padding: '7px 14px', cursor: 'pointer', whiteSpace: 'nowrap' }}>{p.connected ? 'Disconnect' : 'Connect'}</button>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/components/common/Quest.jsx

@@ -0,0 +1,40 @@
+import { useState } from 'react';
+
+const DIFF_COLORS = { Easy: '#48dc82', Medium: '#ffb43c', Hard: '#ff6b6b', Legendary: '#b87fff' };
+const INITIAL = [
+  { id: '1', title: 'Avatar Awakening', description: 'Complete your avatar profile and connect your first provider.', reward: 200, difficulty: 'Easy', accepted: true, completed: true },
+  { id: '2', title: 'Karma Seeker', description: 'Earn 1000 karma through good deeds and OASIS contributions.', reward: 500, difficulty: 'Medium', accepted: true, completed: false },
+  { id: '3', title: 'The NFT Collector', description: 'Acquire 5 unique NFTs across different categories.', reward: 1000, difficulty: 'Hard', accepted: false, completed: false },
+  { id: '4', title: 'Omniverse Explorer', description: 'Visit every major hub location on the OASIS map.', reward: 2500, difficulty: 'Legendary', accepted: false, completed: false },
+];
+
+export function Quest() {
+  const [quests, setQuests] = useState(INITIAL);
+  function accept(id) { setQuests(l => l.map(x => x.id === id ? { ...x, accepted: true } : x)); }
+  function complete(id) { setQuests(l => l.map(x => x.id === id ? { ...x, completed: true } : 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' }}>⚔️ Quests</h2>
+        <p style={{ fontSize: 13, color: '#7a9bbf', margin: 0 }}>Embark on quests to gain karma and rare rewards.</p>
+      </div>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+        {quests.map(q => (
+          <div key={q.id} style={{ display: 'flex', gap: 14, alignItems: 'flex-start', background: 'rgba(255,255,255,.04)', border: `1px solid ${q.completed ? 'rgba(72,220,130,.2)' : q.accepted ? 'rgba(0,200,255,.4)' : 'rgba(0,200,255,.12)'}`, borderRadius: 12, padding: 16, opacity: q.completed ? .6 : 1 }}>
+            <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', borderRadius: 999, padding: '4px 10px', border: `1px solid ${DIFF_COLORS[q.difficulty]}44`, color: DIFF_COLORS[q.difficulty], whiteSpace: 'nowrap', flexShrink: 0 }}>{q.difficulty}</div>
+            <div style={{ flex: 1 }}>
+              <div style={{ fontFamily: "'Orbitron',sans-serif", fontSize: 13, color: '#fff', marginBottom: 4 }}>{q.title}</div>
+              <div style={{ fontSize: 12, color: '#7a9bbf', lineHeight: 1.5, marginBottom: 6 }}>{q.description}</div>
+              <div style={{ fontSize: 12, color: '#48dc82', fontWeight: 600 }}>+{q.reward} karma</div>
+            </div>
+            <div style={{ flexShrink: 0 }}>
+              {q.completed ? <div style={{ fontSize: 13, color: '#48dc82', fontWeight: 600 }}>✅ Done</div>
+                : !q.accepted ? <button onClick={() => accept(q.id)} style={{ background: 'linear-gradient(135deg,#00c8ff,#0080ff)', border: 'none', borderRadius: 7, color: '#fff', fontFamily: "'Orbitron',sans-serif", fontSize: 11, fontWeight: 700, padding: '8px 16px', cursor: 'pointer' }}>Accept Quest</button>
+                : <button onClick={() => complete(q.id)} style={{ background: 'linear-gradient(135deg,#48dc82,#00aa55)', border: 'none', borderRadius: 7, color: '#fff', fontFamily: "'Orbitron',sans-serif", fontSize: 11, fontWeight: 700, padding: '8px 16px', cursor: 'pointer' }}>Finish</button>}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/components/common/SearchAvatars.jsx

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

package/src/components/common/Seeds.jsx

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

package/src/components/common/Settings.jsx

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

package/src/components/common/StarField.jsx

@@ -0,0 +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 }}
+    />
+  );
+}

package/src/components/common/Wallet.jsx

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

package/src/components/common/message/MessageContacts.jsx

@@ -0,0 +1,66 @@
+import React from "react"
+
+class MessageContacts extends React.Component {
+	constructor(props) {
+		super(props)
+
+	}
+
+	render() {
+		return (
+			<div class="inbox_people">
+                                    <div class="headind_srch">
+                                        <div class="recent_heading">
+                                            <h4>Recent</h4>
+                                        </div>
+                                        <div class="srch_bar">
+                                            <div class="stylish-input-group">
+                                                <input
+                                                    type="text"
+                                                    class="search-bar"
+                                                    placeholder="Search"
+                                                />
+                                                <span class="input-group-addon">
+                                                    <button type="button">
+                                                        {" "}
+                                                        <i
+                                                            class="fa fa-search"
+                                                            aria-hidden="true"
+                                                        ></i>{" "}
+                                                    </button>
+                                                </span>{" "}
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="inbox_chat">
+                                        {this.props.contactList.map((contact)=>(
+                                            <div class={contact.active ? "chat_list active_chat" : "chat_list"}>
+                                            <div class="chat_people">
+                                                <div class="chat_img">
+                                                    {" "}
+                                                    <img
+                                                        src={contact.img}
+                                                        alt={contact.name}
+                                                    />
+                                                </div>
+                                                <div class="chat_ib">
+                                                    <h5>
+                                                        {contact.name}{" "}
+                                                        <span class="chat_date">
+                                                            {contact.date}
+                                                        </span>
+                                                    </h5>
+                                                    <p>
+                                                        {contact.lastMessage}
+                                                    </p>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        ))}        
+                                    </div>
+                                </div>	
+		)
+	}
+}
+
+export default MessageContacts