@oasisomniverse/nextjs

v1.2.0

Published

5 days ago

OASIS Omniverse Next.js UI components

0High
0Medium
0Low

dellams

oasis omniverse nextjs next react components

@oasisomniverse/nextjs — OASIS Next.js UI Component Library

The Next.js UI component library for the OASIS Platform. 126 components covering avatar SSO, karma, NFTs, quests, map, seeds, messaging, OApps, providers and more — built for Next.js App Router and Pages Router, with full SSR/SSG support.

Install

npm install @oasisomniverse/nextjs

Basic Usage

All components include 'use client' internally. In App Router, import and use them directly:

import { AvatarConnect, KarmaToast, showKarmaToast } from '@oasisomniverse/nextjs';

// Render once in your root layout:
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <AvatarConnect onLogin={(s) => console.log(s)} />
        <KarmaToast />
        {children}
      </body>
    </html>
  );
}

// Trigger toast from anywhere:
showKarmaToast({ message: 'Quest completed', amount: 150 });

The API endpoint is configured in src/config/api.js — set API_BASE_URL there. Most newer components also accept apiUrl and sessionKey props to override it per-instance.

Component Reference

Auth & Identity

`<Login>`

Avatar login popup/form.

<Login
  config={config}
  onSuccess={(session) => console.log(session)}
  onClose={() => {}}
/>

| Prop | Type | Default | Description | |---|---|---|---| | config | { apiUrl: string } | default endpoint | OASIS API configuration | | onSuccess | (session) => void | — | Called with session object on successful login | | onClose | () => void | — | Called when the popup is dismissed |

`<Signup>`

New avatar registration form.

<Signup config={config} onSuccess={(data) => console.log(data)} onClose={() => {}} />

| Prop | Type | Description | |---|---|---| | onSuccess | (data) => void | Called with new avatar data on registration | | onClose | () => void | Called when dismissed |

`<AvatarConnect>`

<AvatarConnect
  config={config}
  sessionKey="oasis_session"
  onLogin={(session) => console.log(session)}
  onLogout={() => {}}
/>

| Prop | Type | Default | Description | |---|---|---|---| | config | { apiUrl: string } | default endpoint | OASIS API configuration | | sessionKey | string | 'oasis_session' | sessionStorage key for login state persistence | | onLogin | (session) => void | — | Called with session object after login | | onLogout | () => void | — | Called after logout |

`<ForgotPassword>`

<ForgotPassword config={config} onClose={() => {}} />

`<ResetPassword>`

Password reset form — use with the token from the reset email link.

<ResetPassword config={config} token={tokenFromSearchParams} onSuccess={() => {}} />

| Prop | Type | Description | |---|---|---| | token | string | Required. Reset token from the email link |

`<VerifyEmail>`

<VerifyEmail config={config} token={tokenFromSearchParams} onSuccess={() => {}} />

`<SearchAvatars>`

<SearchAvatars config={config} onSelect={(avatar) => console.log(avatar)} />

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

`<SendInvite>` / `<AcceptInvite>`

<SendInvite config={config} onSuccess={() => {}} />
<AcceptInvite config={config} inviteCode={code} onSuccess={() => {}} />

Avatar

`<AvatarProfile>`

<AvatarProfile config={config} avatarId="abc123" onClose={() => {}} />

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

`<ViewAvatar>`

<ViewAvatar config={config} avatarId="abc123" />

`<EditAvatar>`

<EditAvatar config={config} onSuccess={() => {}} onClose={() => {}} />

`<ViewAvatarKarma>`

<ViewAvatarKarma config={config} avatarId="abc123" />

Karma

`<KarmaToast>`

Singleton toast — render it once (e.g. in your root layout), then trigger it imperatively via showKarmaToast().

import { KarmaToast, showKarmaToast } from '@oasisomniverse/nextjs';

// In root layout:
<KarmaToast />

// Anywhere:
showKarmaToast({ message: 'Quest completed', amount: 150 });
showKarmaToast({ message: 'Penalty applied', amount: -20, duration: 5000 });

showKarmaToast options:

| Option | Type | Default | Description | |---|---|---|---| | message | string | required | Reason text shown below the karma amount | | amount | number | required | Karma delta — positive shown in cyan, negative in red | | duration | number | 4000 | Auto-dismiss delay in milliseconds |

`<KarmaPanel>`

<KarmaPanel config={config} onClose={() => {}} />

Map

<Map config={config} onClose={() => {}} />

NFT

<NFT config={config} nftId="nft-001" onClose={() => {}} />
<PurchaseNFT config={config} nftId="nft-001" onSuccess={() => {}} onClose={() => {}} />

OApp

<CreateOApp config={config} onSuccess={(oapp) => console.log(oapp)} onClose={() => {}} />
<LaunchOApp config={config} oappId="my-oapp" onClose={() => {}} />

Seeds

<Seeds config={config} onClose={() => {}} />
<PayWithSeeds config={config} amount={50} recipientId="abc123" onSuccess={() => {}} onClose={() => {}} />

Common UI

`<OasisModal>`

<OasisModal title="My Modal" accentColor="#00c8ff" onClose={() => {}}>
  <p>Modal content goes here.</p>
</OasisModal>

| Prop | Type | Default | Description | |---|---|---|---| | title | string | '' | Modal header title | | accentColor | string | '#00c8ff' | Header accent colour | | onClose | () => void | — | Called when dismissed | | children | ReactNode | — | Modal body content |

`<NavBar>`

<NavBar config={config} links={[{ label: 'Map', href: '/map' }]} />

`<Settings>` / `<Wallet>` / `<StarField>` / `<ComingSoon>`

<Settings config={config} onClose={() => {}} />
<Wallet config={config} onClose={() => {}} />
<StarField />
<ComingSoon label="Quests" />

Font Setup

Add the Dark Space design system fonts in your layout.tsx:

import { Orbitron, Rajdhani } from 'next/font/google';

const orbitron = Orbitron({ subsets: ['latin'], variable: '--font-orbitron' });
const rajdhani = Rajdhani({ subsets: ['latin'], weight: ['400', '600', '700'], variable: '--font-rajdhani' });

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={`${orbitron.variable} ${rajdhani.variable}`}>
      <body>{children}</body>
    </html>
  );
}

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:

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

Override CSS custom properties to 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

See the full component matrix at oportal.oasisomniverse.one.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@oasisomniverse/nextjs — OASIS Next.js UI Component Library

Install

Basic Usage

Component Reference

Auth & Identity

<Login>

<Signup>

<AvatarConnect>

<ForgotPassword>

<ResetPassword>

<VerifyEmail>

<SearchAvatars>

<SendInvite> / <AcceptInvite>