@oasisomniverse/js — OASIS JavaScript UI Component Library

The vanilla JavaScript UI component library for the OASIS Platform. Drop 126 pre-built components into any website or web app to integrate avatar SSO, karma, NFTs, quests, map, seeds, messaging, OApps, providers and more — no framework required.

Install

npm install @oasisomniverse/js

Or via CDN:

<script src="https://cdn.jsdelivr.net/npm/@oasisomniverse/js/dist/oasis.min.js"></script>

Basic Usage

import { Login, AvatarConnect, KarmaToast } from '@oasisomniverse/js';

// Mount a login widget into a container element
const login = new Login('#login-container', {
  apiUrl: 'https://api.web4.oasisomniverse.one',
  onSuccess: (session) => console.log('Logged in:', session)
});
login.open();

// Show a karma toast notification
OasisKarmaToast.show({ message: 'Quest completed', amount: 150 });

Component Reference

All components accept an apiUrl option that defaults to https://api.web4.oasisomniverse.one. Callbacks are always optional.

Auth & Identity

OasisLogin

Avatar login popup widget.

const login = new OasisLogin({
  container,   // optional HTMLElement — mounts inline instead of as a popup
  apiUrl,      // string
  onSuccess,   // (session: { avatarId, username, karma }) => void
  onClose      // () => void
});

login.open();    // show as popup
login.close();   // dismiss
login.destroy(); // remove from DOM

| Option | Type | Default | Description | |---|---|---|---| | container | HTMLElement | — | Mount inline instead of as a floating popup | | apiUrl | string | 'https://api.web4.oasisomniverse.one' | OASIS API base URL | | onSuccess | function | null | Called with session object on successful login | | onClose | function | null | Called when the popup is dismissed |

OasisSignup

New avatar registration popup.

const signup = new OasisSignup({
  apiUrl,
  onSuccess, // (data) => void
  onClose
});
signup.open();

| Option | Type | Default | Description | |---|---|---|---| | apiUrl | string | 'https://api.web4.oasisomniverse.one' | OASIS API base URL | | onSuccess | function | null | Called with new avatar data on registration | | onClose | function | null | Called when the popup is dismissed |

OasisAvatarConnect

Login/logout toggle chip — mounts into your nav bar and manages session state automatically.

const ac = new OasisAvatarConnect({
  container: document.querySelector('#nav-auth'),
  apiUrl,
  sessionKey, // localStorage key for session persistence
  onLogin,    // (session) => void
  onLogout    // () => void
});

ac.destroy(); // remove from DOM

| Option | Type | Default | Description | |---|---|---|---| | container | HTMLElement | required | Element to mount the chip into | | apiUrl | string | 'https://api.web4.oasisomniverse.one' | OASIS API base URL | | sessionKey | string | 'oasis_session' | sessionStorage key used to persist login state | | onLogin | function | null | Called with session object after login | | onLogout | function | null | Called after logout |

OasisForgotPassword

Password reset request popup.

const fp = new OasisForgotPassword({ apiUrl, onClose });
fp.open();

OasisResetPassword

Password reset form — typically opened from a link in a reset email.

const rp = new OasisResetPassword({ apiUrl, token, onSuccess, onClose });
rp.open();

| Option | Type | Default | Description | |---|---|---|---| | token | string | required | Reset token from the email link |

OasisVerifyEmail

Email verification confirmation widget.

const ve = new OasisVerifyEmail({ apiUrl, token, onSuccess });
ve.open();

OasisSearchAvatars

Search the OASIS avatar directory.

const sa = new OasisSearchAvatars({ apiUrl, onSelect });
sa.open();

| Option | Type | Description | |---|---|---| | onSelect | (avatar) => void | Called when the user picks an avatar from results |

OasisSendInvite / OasisAcceptInvite

Send or accept a Seeds-based invite.

new OasisSendInvite({ apiUrl, onSuccess }).open();
new OasisAcceptInvite({ apiUrl, inviteCode, onSuccess }).open();

Avatar

OasisAvatarProfile

View the current avatar's full profile.

new OasisAvatarProfile({ apiUrl, avatarId, onClose }).open();

| Option | Type | Description | |---|---|---| | avatarId | string | Avatar to display — defaults to logged-in user |

OasisViewAvatar

Read-only avatar card for any avatar.

new OasisViewAvatar({ apiUrl, avatarId }).open();

OasisEditAvatar

Edit the logged-in avatar's profile fields.

new OasisEditAvatar({ apiUrl, onSuccess, onClose }).open();

OasisViewAvatarKarma

Karma breakdown for an avatar.

new OasisViewAvatarKarma({ apiUrl, avatarId }).open();

Karma

OasisKarmaToast

Static singleton — shows a floating toast notification.

OasisKarmaToast.show({
  message: 'Quest completed',  // string — reason text shown below the amount
  amount: 150                  // number — karma delta (positive or negative)
});

| Option | Type | Description | |---|---|---| | message | string | Reason text displayed below the karma amount | | amount | number | Karma delta — positive values shown in cyan, negative in red |

OasisKarmaPanel

Full karma dashboard for the logged-in avatar.

new OasisKarmaPanel({ apiUrl, onClose }).open();

Map

OasisMap

Interactive 3D globe with holon and quest overlays.

new OasisMap({ apiUrl, onClose }).open();

OasisViewGlobal3DMap

Read-only global map view.

new OasisViewGlobal3DMap({ apiUrl }).open();

NFT

OasisNFT

View and manage a single NFT.

new OasisNFT({ apiUrl, nftId, onClose }).open();

OasisPurchaseNFT

NFT purchase flow.

new OasisPurchaseNFT({ apiUrl, nftId, onSuccess, onClose }).open();

OApp

OasisCreateOApp

Step-by-step OApp creation wizard.

new OasisCreateOApp({ apiUrl, onSuccess, onClose }).open();

OasisLaunchOApp

Launch an installed OApp.

new OasisLaunchOApp({ apiUrl, oappId, onClose }).open();

Seeds

OasisSeeds

Seeds wallet overview for the logged-in avatar.

new OasisSeeds({ apiUrl, onClose }).open();

OasisPayWithSeeds

Seeds payment flow.

new OasisPayWithSeeds({ apiUrl, amount, recipientId, onSuccess, onClose }).open();

Common UI

OasisModal

Reusable modal wrapper — used internally by all popup components, but also available directly.

const modal = new OasisModal({
  title,        // string
  content,      // string — inner HTML
  accentColor,  // string — CSS colour for the header accent
  onClose       // () => void
});

modal.open();
modal.close();
modal.destroy();

| Option | Type | Default | Description | |---|---|---|---| | title | string | '' | Modal header title text | | content | string | '' | Inner HTML content of the modal body | | accentColor | string | '#00c8ff' | Colour applied to the header accent bar | | onClose | function | null | Called when the modal is dismissed |

OasisNavBar

Top navigation bar with avatar connect chip, karma display and menu links.

new OasisNavBar({
  container: document.querySelector('#header'),
  apiUrl,
  links: [{ label: 'Map', href: '/map' }]
}).mount();

OasisSideNav

Collapsible side navigation panel.

new OasisSideNav({ container, links }).mount();

OasisSettings

User settings panel (provider, theme, notifications).

new OasisSettings({ apiUrl, onClose }).open();

OasisWallet

Multi-chain wallet overview for the logged-in avatar.

new OasisWallet({ apiUrl, onClose }).open();

OasisHyperDrive

Distributed file system browser.

new OasisHyperDrive({ apiUrl, onClose }).open();

OasisStarField

Animated star field background — attach to any container.

new OasisStarField({ container: document.body }).mount();

OasisComingSoon

Placeholder widget for features not yet live.

new OasisComingSoon({ container, label: 'Quests' }).mount();

Full Component List

| Group | Components | |---|---| | Auth & Identity | AcceptInvite, AvatarConnect, ForgotPassword, Login, ResetPassword, SearchAvatar, SearchAvatars, SendInvite, Signup, VerifyEmail | | Avatar | AvatarProfile, AvatarWallet, EditAvatar, SearchProfiles, ViewAchievements, ViewAvatar, ViewAvatarKarma, ViewLeagues, ViewOrganizations, ViewTournaments | | Data Screen | ActivityPub, AddData, EOSIO, Ethereum, Holochain, IPFS, LoadData, ManageData, MongoDB, Neo4j, OffChainManagement, SearchData, Solana, Solid, SQLite, ThreeFold | | Eggs | Eggs, ManageEggs, SearchEggs, ViewEggs | | Game | Game | | Karma | KarmaPanel, KarmaToast, SearchKarma, ViewKarma, VoteKarma | | Map | Add2DObjectToMap, Add3DObjectToMap, AddQuestToMap, DownloadMap, ManageMap, Map, PlotRouteOnMap, SearchMap, ViewGlobal3DMap, ViewHalonsOnMap, ViewOAppOnMap, ViewQuestOnMap | | Messages | MenuMessage, Message, MessageContacts, Messaging | | Mission | ManageMission, Mission, SearchMission, ViewMission | | NFT | ContactPopupNFT, ManageNFT, NFT, PurchaseNFT, PurchaseVirtualLandNFT, SearchNFT, ViewNFT | | OApp | CreateOApp, DeployOApp, DownloadOApp, EditOApp, InstallOApp, LaunchOApp, ManageOApp, OApp, SearchOApp | | Providers | CompareProviderSpeeds, CrossChainManagement, ManageAutoFailover, ManageAutoReplication, ManageLoadBalancing, ManageProviders, ProviderDropdown, Providers, SearchProviders, SeedsProvider, ViewProviderStats, ViewProviders | | Quest | ManageQuest, Quest, SearchQuest, ViewQuest | | Seeds | DonateSeeds, ManageSeeds, PayWithSeeds, RewardSeeds, SearchSeeds, Seeds, ViewSeeds | | Common UI | ComingSoon, Confirmation, Contact, HyperDrive, NavBar, ONET, ONODE, OasisModal, Settings, SideNav, StarField, Wallet |

Dark Space Design System

The OASIS component library ships with the Dark Space design system — a deep-space aesthetic built for the OASIS Omniverse:

• Background: near-black (#0a0d14) with subtle nebula gradients
• Primary accent: electric cyan (#00c8ff)
• Typography: Orbitron for headings, Rajdhani for body text
• Text: always bright (#e0f0ff / #fff) — never dim or faded
• Borders: translucent cyan (rgba(0,200,255,0.2))
• Cards: glassy dark panels with backdrop-filter: blur

All CSS custom properties are exposed on :root so you can theme components for your own OAPP:

:root {
  --oasis-bg: #0a0d14;
  --oasis-accent: #00c8ff;
  --oasis-text: #e0f0ff;
  --oasis-border: rgba(0, 200, 255, 0.2);
}

Live Demo

oportal.oasisomniverse.one — the JS OPORTAL running all 126 components live.

Links

• GitHub
• npm
• OASIS API Docs
• Developer Portal
• OASIS Platform