@oasisomniverse/react 1.0.0 → 1.1.0

package/src/components/common/ONET.jsx

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

package/src/components/common/ONODE.jsx

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

@@ -1,9 +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}}
+.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

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

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

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

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