@oasisomniverse/nextjs 1.0.0

package/src/components/common/OasisModal.tsx

@@ -0,0 +1,30 @@
+'use client';
+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.tsx

@@ -0,0 +1,26 @@
+'use client';
+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/Providers.tsx

@@ -0,0 +1,39 @@
+'use client';
+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.tsx

@@ -0,0 +1,41 @@
+'use client';
+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.tsx

@@ -0,0 +1,50 @@
+'use client';
+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.tsx

@@ -0,0 +1,40 @@
+'use client';
+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.tsx

@@ -0,0 +1,71 @@
+'use client';
+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.tsx

@@ -0,0 +1,57 @@
+'use client';
+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.tsx

@@ -0,0 +1,46 @@
+'use client';
+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/popups/avatar/components/AvatarWallet.tsx

@@ -0,0 +1,170 @@
+'use client';
+import React from 'react';
+import { Modal } from 'react-bootstrap';
+import '../../../../assets/scss/avatar-popup.scss';
+import { AgGridReact } from 'ag-grid-react';
+import axios from "axios";
+import { toast } from 'react-toastify';
+import API_BASE_URL from "../../../../config/api";
+
+class AvatarWallet extends React.Component {
+    state = {
+        columnDefs: [
+            {
+                fieldName: "date",
+                headerName: "Date",
+            },
+            {
+                fieldName: "note",
+                headerName: "Note",
+            },
+            {
+                fieldName: "fromAvatar",
+                headerName: "From Avatar",
+            },
+            {
+                fieldName: "fromWallet",
+                headerName: "From Wallet",
+            },
+            {
+                fieldName: "token",
+                headerName: "Token"
+            },
+            {
+                fieldName: "amount",
+                headerName: "Amount"
+            },
+            {
+                fieldName: "balance",
+                headerName: "Balance"
+            },
+            {
+                fieldName: "provider",
+                headerName: "Provider"
+            },
+            {
+                fieldName: "type",
+                headerName: "Type"
+            }
+        ],
+        defaultColDef: {
+            flex: 1,
+            minWidth: 150,
+            filter: true,
+            sortable: true,
+            floatingFilter: true,
+            resizable: true,
+        },
+        rowData: null,
+        loading: true,
+        loggedIn: true,
+    };
+
+    onGridReady = async (params) => {
+        this.gridApi = params.api;
+        this.gridColumnApi = params.columnApi;
+    }
+
+    getApiData = () => {
+        this.setState({ loading: true })
+
+        axios({
+            method: 'get',
+            url: API_BASE_URL,
+            headers: {
+                'Content-Type': 'application/json'
+            }, 
+        })
+        .then((response) => {
+            this.setState({loading: false})
+
+            if (response.data.result?.isError) { 
+                toast.error(response.data.result.message);
+                return; 
+            }
+
+            toast.success(response.data.result.message);
+        })
+        .catch((err) => {
+            toast.error('err');
+            this.setState({loading: false})
+            return { error: true, data: err };
+        });
+    }
+
+    render() {
+        const { show, hide } = this.props;
+
+        return (
+            <>
+                {/* <Modal
+                    centered
+                    className="custom-modal custom-popup-component w-100 "
+                    show={show}
+                    onHide={() => hide('avatar', 'avatarWallet')}
+                >
+                    <Modal.Body>
+                        <span className="form-cross-icon" onClick={() => hide('avatar', 'avatarWallet')}>
+                            <i className="fa fa-times"></i>
+                        </span>
+
+                        <div className="page new-skin">
+                            <div className="container opened" data-animation-in="fadeInLeft" data-animation-out="fadeOutLeft">
+                                
+                                    <h1 class="single-heading">Avatar Wallet</h1>    
+                                
+                                <div className="card-started" id="home-card">
+                                    
+                                    <div className="profile no-photo">
+                                        <div className="slide" />
+                                        <div className="title">Username</div>
+                                        <div className="subtitle"> User Level </div>
+                                        <div className="lnks">
+                                            <a href="#" className="lnk">
+                                                <span className="text">2D Avatar</span>
+                                            </a>
+                                            <a href="#" className="lnk discover">
+                                                <span className="text">3d Avatar</span>
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+                               
+                            </div>
+                        </div>
+                    </Modal.Body>
+                </Modal> */}
+
+                <Modal
+                    size="xl"
+                    centered
+                    className="custom-modal custom-popup-component"
+                    show={show}
+                    onHide={() => hide('avatar', 'avatarWallet')}
+                >
+                    <Modal.Body>
+                        <span className="form-cross-icon" onClick={() => hide('avatar', 'avatarWallet')}>
+                            <i className="fa fa-times"></i>
+                        </span>
+
+                        <div className="popup-container default-popup">
+                            <div className="data-screen-container">
+                                
+                                <div className="ag-theme-alpine custom-ag-parent">
+                                    <AgGridReact
+                                        columnDefs={this.state.columnDefs}
+                                        defaultColDef={this.state.defaultColDef}
+                                        onGridReady={this.onGridReady}
+                                        rowData={this.state.rowData}
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+
+export default AvatarWallet;

package/src/components/popups/avatar/components/EditAvatar.tsx

@@ -0,0 +1,35 @@
+'use client';
+import React from 'react';
+import { Modal } from "react-bootstrap";
+import '../../../../assets/scss/coming-soon.scss';
+import InfoIcon from '../../../../assets/images/icon-info.svg'
+
+class EditAvatar extends React.Component {
+    state = {  } 
+    render() { 
+        const { show, hide } = this.props;
+
+        return (
+            <>
+                <Modal
+                    size="sm"
+                    show={show}
+                    dialogClassName=""
+                    onHide={() => hide('avatar', 'editAvatar')}
+                >
+                    <Modal.Body className="text-center coming-soon">
+                        <img
+                            src={InfoIcon}
+                            alt="icon"
+                        />
+                        <h2>UI Coming Soon</h2>
+                        <p>You can use this functionality directly by accessing the OASIS API from the Developer menu.</p>
+                        <button onClick={() => hide('avatar', 'editAvatar')}>OK</button>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+ 
+export default EditAvatar;