Skip to content
BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
src
src
 
 
.gitignore
.gitignore
 
 
.npmignore
.npmignore
 
 
README.md
README.md
 
 
package.json
package.json
 
 

Repository files navigation

@oasisomniverse/angular — OASIS Angular UI Component Library

The Angular UI component library for the OASIS Platform. 126 standalone Angular 17 components covering avatar SSO, karma, NFTs, quests, map, seeds, messaging, OApps, providers and more.

npm Live Demo

Install

npm install @oasisomniverse/angular

Basic Usage

All components are standalone — import them directly into whichever component needs them:

import { LoginComponent, AvatarConnectComponent, KarmaToastComponent } from '@oasisomniverse/angular';

@Component({
  standalone: true,
  imports: [LoginComponent, AvatarConnectComponent, KarmaToastComponent],
  template: `
    <oasis-avatar-connect></oasis-avatar-connect>
    <oasis-karma-toast></oasis-karma-toast>
  `
})
export class MyComponent {}

API configuration and session state are managed by OasisService, which is provided at the root level — no forRoot() call needed.

Component Reference

Auth & Identity

<oasis-login>

Avatar login form. Emits navigation events so you can switch to signup or forgot-password within your own auth flow.

<oasis-login
  (switchTo)="view = $event"
  (loggedIn)="onLoggedIn()">
</oasis-login>
Output Payload Description
switchTo 'signup' | 'forgot' Emitted when the user clicks Sign Up or Forgot Password
loggedIn void Emitted on successful login

<oasis-signup>

New avatar registration form.

<oasis-signup (switchTo)="view = $event"></oasis-signup>
Output Payload Description
switchTo 'login' Emitted when the user clicks Sign In

<oasis-avatar-connect>

Login/logout toggle chip — fully self-contained. Manages session via OasisService. No inputs or outputs required.

<oasis-avatar-connect></oasis-avatar-connect>

<oasis-forgot-password>

Password reset request form.

<oasis-forgot-password></oasis-forgot-password>

<oasis-reset-password>

Password reset form. Emits switchTo when done so you can navigate back to login.

<oasis-reset-password (switchTo)="view = $event"></oasis-reset-password>
Output Payload Description
switchTo 'login' Emitted on successful reset

<oasis-verify-email>

Email verification confirmation.

<oasis-verify-email></oasis-verify-email>

<oasis-search-avatars>

Search the OASIS avatar directory. Controlled visibility via [show].

<oasis-search-avatars [show]="showSearch" (close)="showSearch = false"></oasis-search-avatars>
Input Type Default Description
show boolean false Controls visibility
Output Description
close Emitted when the panel should be hidden

Avatar

Most avatar popups use the [show] / (close) controlled-visibility pattern:

<oasis-view-avatar [show]="showAvatar" (close)="showAvatar = false"></oasis-view-avatar>
<oasis-edit-avatar [show]="showEdit" (close)="showEdit = false"></oasis-edit-avatar>
<oasis-avatar-wallet [show]="showWallet" (close)="showWallet = false"></oasis-avatar-wallet>

Karma

<oasis-karma-toast>

Singleton floating toast. Render once — OasisService triggers it automatically when karma changes.

<oasis-karma-toast></oasis-karma-toast>

No inputs or outputs. Driven entirely by OasisService.

<oasis-karma-panel>

Full karma dashboard panel.

<oasis-karma-panel [show]="showKarma" (close)="showKarma = false"></oasis-karma-panel>

Common UI

<oasis-modal>

Reusable modal wrapper — controlled via [open].

<oasis-modal [open]="isOpen" accentColor="rgba(0,200,255,.25)" (close)="isOpen = false">
  <p>Modal content goes here.</p>
</oasis-modal>
Input Type Default Description
open boolean false Controls whether the modal is visible
accentColor string 'rgba(232,121,249,.25)' Border/accent colour
Output Description
close Emitted when the backdrop or close button is clicked

<oasis-coming-soon>

Placeholder for features not yet live.

<oasis-coming-soon title="Quests" message="Coming in the next release."></oasis-coming-soon>
Input Type Default Description
title string 'Feature Coming Soon' Heading text
message string 'This feature is currently under development...' Body text

<oasis-confirmation>

Confirmation dialog.

<oasis-confirmation
  title="Delete Avatar?"
  message="This cannot be undone."
  confirmLabel="Delete"
  cancelLabel="Cancel"
  (confirm)="doDelete()"
  (cancel)="showConfirm = false">
</oasis-confirmation>
Input Type Default Description
title string 'Are you sure?' Dialog heading
message string 'This action cannot be undone.' Body text
icon string '⚠️' Leading icon
confirmLabel string 'Confirm' Confirm button label
cancelLabel string 'Cancel' Cancel button label
Output Description
confirm Emitted when the confirm button is clicked
cancel Emitted when cancelled

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 the 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

The Angular components are showcased in the Global Healing Network — a real-world OAPP built on this library.

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

Links

About

This is the WEB4 OASIS Angular UI Components Library that can be used to pick n mix into other Angular sites who wish to integrate into the OASIS API.

Resources

Readme
Activity
Custom properties

Stars

0 stars

Watchers

1 watching

Forks

1 fork
Report repository

Releases

Packages

Contributors

Languages