OASIS Portal

A comprehensive, multi-chain Web3 dashboard for managing wallets, NFTs, smart contracts, data storage, cross-chain bridges, oracle feeds, and more. Built with vanilla JavaScript and designed to integrate seamlessly with the OASIS API ecosystem.

Overview

The OASIS Portal is a unified interface that provides users with complete control over their Web3 assets and interactions across multiple blockchains. It features a modern, LayerZero-inspired design and supports authentication, wallet management, NFT operations, data storage, cross-chain bridging, oracle feeds, and developer tools.

Features

🔐 Authentication & Avatar Management

Avatar Registration & Login: Secure authentication with privacy mode support
Profile Management: View and manage avatar profiles, karma scores, and activity history
Multi-Provider Support: Works with various OASIS storage providers

💼 Wallet Management

Multi-Chain Wallets: Support for Solana, Ethereum, Polygon, Arbitrum, Base, Optimism, BNB Chain, Avalanche, Fantom, Radix, and more
Wallet Creation: Generate new wallets for any supported blockchain
Balance Tracking: Real-time balance monitoring across all chains
Token Management: View and manage tokens across all wallets
Transfer Operations: Send tokens between wallets and addresses

🎨 NFT Mint Studio

Multi-Chain NFT Minting: Mint NFTs on Solana, Ethereum, Polygon, Arbitrum, Base, Optimism, and more
Multiple Standards: Support for ERC-721, ERC-1155, SPL, and compressed NFTs
Collection Management: Create and manage NFT collections
Metadata Management: Configure on-chain and off-chain metadata
Gas Estimation: Real-time gas fee estimates for each chain

🌉 Universal Asset Bridge

Cross-Chain Swaps: Bridge tokens between different blockchains
Exchange Rate Tracking: Real-time exchange rates for bridge operations
Transaction History: Track all bridge transactions
Multi-Chain Support: Bridge between Solana, Ethereum, Polygon, Arbitrum, Base, Optimism, BNB Chain, Avalanche, Fantom, and Radix
Wallet Integration: Seamless wallet selection for source and destination chains

📊 Data Management (Holons)

Provider Management: View and configure OASIS storage providers
Holon Management: Create, read, update, and delete data holons
Auto-Replication: Configure automatic data replication across providers
Auto-Failover: Set up failover mechanisms for high availability
Provider Switching: Change active storage provider on the fly
AI Helper: Built-in AI assistant for data management queries

🔮 Custom Oracle Service

Oracle Feed Creation: Build custom oracle feeds from any Web2/Web3 source
Task Builder: Visual task builder with fetch, parse, transform, and aggregate operations
Multi-Provider Support: Connect to blockchain, database, cloud, and storage providers
Feed Management: Create, update, delete, and subscribe to oracle feeds
Public Feeds: Browse and subscribe to public oracle feeds
Data History: View historical oracle feed data

📱 Telegram Gamification

Account Linking: Link Telegram accounts to OASIS avatars
Achievement System: Track achievements and rewards
Leaderboards: Global and group-specific leaderboards
Activity Tracking: Monitor Telegram activities and contributions
Reward Management: View and claim rewards earned through Telegram
Check-in System: Daily check-in tracking and streaks

🛠️ Developer Tools

OAPP Management: Browse, install, and manage OASIS Applications (OAPPs)
API Key Management: Create and manage API keys with granular permissions
Webhook Configuration: Set up webhooks for event notifications
Usage Analytics: Track API usage and statistics
Code Examples: Access SDK examples and code snippets
API Logs: View detailed API request logs

📈 Dashboard & Analytics

Overview Dashboard: Comprehensive stats and activity overview
Transaction History: View all transactions across all services
Activity Feed: Real-time activity updates
Quest System: Track and complete quests
Message Center: Centralized messaging system

Architecture

Technology Stack

Frontend: Vanilla JavaScript (ES6+), HTML5, CSS3
API Client: Centralized OASIS API client (api/oasisApi.js)
Authentication: JWT-based authentication with localStorage persistence
State Management: Module-based state management
Styling: Custom CSS with modern design patterns

Key Components

API Client (`api/oasisApi.js`)

Centralized API client that handles all communication with the OASIS backend:

Automatic authentication header injection
Environment-aware base URL (localhost vs production)
Comprehensive error handling
Support for all OASIS API endpoints

Module Structure

avatar-dashboard.js: Avatar profile and insights
bridge.js: Cross-chain bridge operations
data-management.js: Holon and provider management
nft-mint-studio.js: NFT minting interface
oracle.js: Custom oracle feed builder
telegram-gamification.js: Telegram integration
script.js: Core navigation and UI interactions

Getting Started

Prerequisites

Python 3.x (for local development server)
Modern web browser (Chrome, Firefox, Safari, Edge)
Access to OASIS API (local or remote)

Quick Start

Clone the repository

git clone https://github.com/NextGenSoftwareUK/Oportal.git
cd portal

Start the development server

The portal needs to be served from the parent directory (OASIS_CLEAN) so relative paths to shared resources work correctly:
```
# From the OASIS_CLEAN directory (parent of portal)
cd ..
python3 -m http.server 8080
```
Open the portal

Navigate to: http://localhost:8080/portal/portal.html

Alternative: Using the Portal's Simple Server

If you want to serve just the portal directory:

cd portal
python3 simple-server.js  # or python3 server.py

Then open: http://localhost:8080/portal.html

Build (Optional)

For production builds:

npm install
npm run build

The build output will be in the dist/ directory.

Validation

Validate HTML and check for issues:

npm run validate

API Integration

Configuration

The portal automatically detects the environment and uses the appropriate API endpoint:

Local Development: https://localhost:5004 (when running on localhost)
Production: http://api.oasisweb4.com

Authentication

The portal uses JWT-based authentication:

Users register or login through the authentication modal
JWT tokens are stored in localStorage
All API requests automatically include the Authorization header
Tokens are refreshed automatically when needed

API Endpoints

The portal integrates with the following OASIS API endpoints:

Avatar: /api/avatar/* - Authentication and profile management
Wallet: /api/wallet/* - Wallet operations
NFT: /api/nft/* - NFT minting and management
Bridge: /api/bridge/* - Cross-chain bridge operations
Data: /api/data/* - Holon and data management
Provider: /api/provider/* - Provider configuration
Oracle: /api/oracle/* - Oracle feed management
Telegram: /api/telegram/* - Telegram integration
Developer: /api/developer/* - Developer tools and OAPPs

See api/oasisApi.js for the complete API client implementation.

File Structure

portal/
├── api/
│   └── oasisApi.js          # Centralized OASIS API client
├── avatar-dashboard.js       # Avatar profile and insights
├── bridge.js                 # Cross-chain bridge interface
├── data-management.js        # Holon and provider management
├── nft-mint-studio.js       # NFT minting studio
├── oracle.js                # Custom oracle feed builder
├── telegram-gamification.js # Telegram integration
├── script.js                # Core navigation and UI
├── portal.html              # Main portal interface
├── index.html               # Redirect to portal.html
├── styles.css               # Portal styles
├── package.json             # Build configuration
├── build.js                 # Build script
├── validate.js              # Validation script
├── server.py                # Python development server
├── simple-server.js         # Node.js development server
└── README.md                # This file

Development

Adding New Features

Create a new JavaScript module in the root directory
Add the module script to portal.html
Implement the feature following the existing module patterns
Use the centralized oasisAPI client for API calls
Follow the existing UI/UX patterns for consistency

Module Pattern

// Example module structure
let myModuleState = {
    data: [],
    loading: false,
    error: null
};

async function loadMyModule() {
    const container = document.getElementById('my-module-content');
    if (!container) return;
    
    try {
        const result = await oasisAPI.someEndpoint();
        // Update state and render
        container.innerHTML = renderMyModule();
        attachEventListeners();
    } catch (error) {
        console.error('Error:', error);
    }
}

function renderMyModule() {
    return `
        <div class="my-module">
            <!-- HTML content -->
        </div>
    `;
}

function attachEventListeners() {
    // Event handlers
}

Styling Guidelines

Use CSS variables defined in styles.css for colors and spacing
Follow the existing design patterns (LayerZero-inspired)
Ensure responsive design for mobile devices
Use modern CSS features (flexbox, grid, backdrop-filter)

Dependencies

External Dependencies

Fonts: Google Fonts (Inter)
Icons: SVG icons embedded in JavaScript modules

Build Dependencies (Optional)

html-validator: For HTML validation

Runtime Dependencies

None! The portal is built with vanilla JavaScript and requires no build step for development.

Browser Support

Chrome/Edge (latest)
Firefox (latest)
Safari (latest)
Mobile browsers (iOS Safari, Chrome Mobile)

Security Considerations

JWT tokens are stored in localStorage (consider httpOnly cookies for production)
API endpoints should use HTTPS in production
Implement CORS policies on the backend
Validate all user inputs on the backend
Use secure password requirements

Contributing

Fork the repository
Create a feature branch
Make your changes
Test thoroughly
Submit a pull request

License

MIT

Support

For issues, questions, or contributions, please open an issue on the GitHub repository.

Related Projects

OASIS API - Backend API
OASIS Website - Main website

Built with ❤️ by the OASIS team

Name		Name	Last commit message	Last commit date
Latest commit History 9 Commits
api		api
.gitignore		.gitignore
GRAPH_RAG_AND_HOLONIC_ARCHITECTURE.md		GRAPH_RAG_AND_HOLONIC_ARCHITECTURE.md
README.md		README.md
avatar-dashboard.js		avatar-dashboard.js
bridge.js		bridge.js
build.js		build.js
data-management.js		data-management.js
developer-tools.js		developer-tools.js
favicon.png		favicon.png
index.html		index.html
logos		logos
neo4j.webp		neo4j.webp
nft-mint-studio.js		nft-mint-studio.js
oasis-logo.png		oasis-logo.png
oracle.js		oracle.js
package-lock.json		package-lock.json
package.json		package.json
portal		portal
portal.html		portal.html
reform-dashboard.js		reform-dashboard.js
script.js		script.js
server.py		server.py
simple-server.js		simple-server.js
styles.css		styles.css
telegram-gamification.js		telegram-gamification.js
validate.js		validate.js
vercel.json		vercel.json

NextGenSoftwareUK/Oportal

Folders and files

Latest commit

History

Repository files navigation