Quasar - Stellaris Wallet Browser Extension

A secure, feature-rich browser wallet extension for Stellaris and Stellaris-based blockchain networks. Built with modern web technologies and designed for seamless cryptocurrency management directly in your browser.

What's New

🔒 Enhanced Security: Core cryptographic utilities now match the Python stellaris-wallet implementation
🔧 Browser-Compatible: All wallet verification and cryptographic functions work natively in browsers
⚡ Performance Optimized: Updated with React 18, Webpack 5, and modern TypeScript
🛡️ Secure Verification: Two-layer password hashing (PBKDF2 + Scrypt-like), HMAC validation, and timing-safe comparisons
🌐 Node Validation: Built-in blockchain node validation and connection testing
📱 Modern UI: Clean, responsive interface with Tailwind CSS and Framer Motion

Key Features

Wallet Functionality

Multi-Chain Support: Compatible with Stellaris and Stellaris-based networks
Secure Key Management: Browser-compatible cryptographic utilities with secure password hashing
Transaction Handling: Send, receive, and manage cryptocurrency transactions
Asset Management: Support for multiple tokens and assets
Import/Export: Wallet backup and recovery capabilities

Security Features

Two-Factor Authentication: TOTP support for enhanced security
Password Verification: Multi-layer hashing with PBKDF2 and Scrypt-like algorithms
HMAC Validation: Message authentication for data integrity
Node Validation: Automatic blockchain node verification and validation
Secure Memory: Best-effort secure memory cleanup in browser environment

Technical Features

Chrome Extension Manifest V3: Latest extension standards for enhanced security
TypeScript Support: Full type safety and modern development experience
Hot Reload: Automatic browser refresh during development
Modular Architecture: Clean separation of concerns with reusable components

Technology Stack

Chrome Extension Manifest V3 - Latest extension security standards
React 18 - Modern UI framework with concurrent features
TypeScript - Type-safe development experience
Webpack 5 - Advanced bundling and optimization
Webpack Dev Server 4 - Fast development server
Tailwind CSS - Utility-first CSS framework
Framer Motion - Production-ready motion library
Web Crypto API - Browser-native cryptographic operations

Architecture

Core Libraries (`src/lib/`)

verification_utils.ts - Password verification, HMAC validation, node connectivity
cryptographic_utils.ts - Encryption, TOTP, proof-of-work algorithms
data_manipulation_utils.ts - Data scrambling, attempt tracking, secure cleanup
wallet_generation_utils.ts - Wallet creation and key derivation
wallet_client.ts - Blockchain interaction and transaction handling

Browser Compatibility

All cryptographic operations have been adapted from the Python stellaris-wallet implementation to work natively in browser environments using the Web Crypto API and other browser-standard technologies.

Installation & Development

Prerequisites:

Node.js version >= 18
Chrome or Chromium-based browser
Git

Setup Procedures:

Clone the repository

git clone https://github.com/StellarisChain/quasar.git
cd quasar

Install dependencies
```
npm install
# or
pnpm install
```
Start development server
```
npm start
```
Load extension in Chrome
1. Open chrome://extensions/
2. Enable Developer mode (top right toggle)
3. Click Load unpacked extension
4. Select the build folder from the project directory
Start developing!
- The extension will auto-reload on code changes
- Check the browser console for any errors
- Use Chrome DevTools to debug the extension

Browser-Specific Builds

Quasar supports both Chrome and Firefox with browser-specific optimizations and manifest versions.

Quick Start

Chrome (Manifest V3)

# Using esbuild (faster)
npm run dist:chrome

# Using webpack (more features)
npm run build:chrome && npm run package:chrome

Firefox (Manifest V2)

# Using esbuild (faster)
npm run dist:firefox

# Using webpack (more features)
npm run build:firefox && npm run package:firefox

Both Browsers

# Build for all browsers using esbuild
npm run esbuild:all

# Create distribution packages for all browsers
npm run dist:all

Available Build Scripts

ESBuild (Recommended for speed)

npm run esbuild:chrome - Build for Chrome using esbuild
npm run esbuild:firefox - Build for Firefox using esbuild
npm run esbuild:all - Build for both browsers using esbuild

Webpack (Advanced features)

npm run build:chrome - Build for Chrome using webpack
npm run build:firefox - Build for Firefox using webpack
npm run build:all - Build for both browsers using webpack

Distribution Packages

npm run dist:chrome - Build and package for Chrome
npm run dist:firefox - Build and package for Firefox
npm run dist:all - Build and package for both browsers

Browser Differences

Chrome (Manifest V3)

Service Worker: Uses background service worker
API: Uses chrome.action API
Permissions: Uses scripting permission for content injection
Security: Enhanced security with stricter CSP

Firefox (Manifest V2)

Background Scripts: Uses persistent background scripts
API: Uses browser.browserAction API
Permissions: Uses <all_urls> for content access
Compatibility: Uses webextension-polyfill for cross-browser compatibility

Output Structure

After building, you'll find browser-specific builds in:

build/
├── chrome/          # Chrome-optimized build (Manifest V3)
│   ├── manifest.json
│   ├── background.bundle.js
│   ├── popup.html
│   └── ...
└── firefox/         # Firefox-optimized build (Manifest V2)
    ├── manifest.json
    ├── background.bundle.js
    ├── popup.html
    └── ...

Distribution packages are created in:

zip/
├── quasar-chrome-5.0.4.zip   # Ready for Chrome Web Store
└── quasar-firefox-5.0.4.zip  # Ready for Firefox Add-ons

Loading in Different Browsers

Chrome

Open chrome://extensions/
Enable "Developer mode"
Click "Load unpacked"
Select the build/chrome folder

Firefox

Open about:debugging
Click "This Firefox"
Click "Load Temporary Add-on"
Select any file in the build/firefox folder

Edge

Open edge://extensions/
Enable "Developer mode"
Click "Load unpacked"
Select the build/chrome folder (Edge supports Chrome extensions)

Development Tips

Use esbuild for development - It's significantly faster than webpack
Test on both browsers - Use npm run esbuild:all during development
Check manifests - Ensure browser-specific features are working correctly
Use the browser compatibility layer - Import from src/lib/browser-compat.ts for cross-browser APIs

Browser Compatibility Features

The extension includes a comprehensive browser compatibility layer:

import { browserAPI, getBrowserType } from 'src/lib/browser-compat';

// Detect browser type
const browser = getBrowserType(); // 'chrome', 'firefox', 'edge', or 'unknown'

// Use unified APIs
await browserAPI.storage.local.set({ key: 'value' });
const tabs = await browserAPI.tabs.query({ active: true });

Production Build

NODE_ENV=production npm run build

The build folder will contain the production-ready extension for Chrome Web Store submission.

Project Structure

src/
├── components/          # Reusable React components
├── pages/              # Extension pages (popup, options, etc.)
├── lib/                # Core wallet libraries
│   ├── verification_utils.ts      # Password & node verification
│   ├── cryptographic_utils.ts     # Encryption & TOTP
│   ├── data_manipulation_utils.ts # Data handling & security
│   ├── wallet_generation_utils.ts # Wallet creation
│   └── wallet_client.ts          # Blockchain interaction
├── assets/             # Images, icons, static files
└── manifest.jsonc      # Extension configuration

The extension is structured as a modern React application with the following entry points:

Popup: Main wallet interface (src/pages/Popup/)
Options: Settings and configuration (src/pages/Options/)
Background: Service worker for blockchain operations
Content Scripts: Web page integration (if needed)

Security Features

Cryptographic Implementation

The wallet implements industry-standard security practices:

Password Hashing: Two-layer approach using PBKDF2 (100,000 iterations) + Scrypt-like algorithm
HMAC Validation: Message authentication for data integrity verification
Timing-Safe Comparisons: Protection against timing attacks
Secure Memory Management: Best-effort cleanup of sensitive data in browser environment

Node Validation

Automatic verification of blockchain nodes
Block hash comparison with trusted reference nodes
Connection testing with fallback protocols
Protection against malicious or compromised nodes

Development

Hot Reload & Auto-refresh

The development server automatically reloads the extension when you save changes, making development fast and efficient.

Custom Port:

PORT=6002 npm run start

TypeScript Support

Full TypeScript support with type checking and IntelliSense. All wallet libraries are written in TypeScript for better code quality and developer experience.

Debugging

Use Chrome DevTools to debug extension pages
Background script logs appear in the extension's service worker console
React DevTools work normally for component debugging

Code Quality

ESLint: Configured with eslint-config-react-app
Prettier: Automatic code formatting
TypeScript: Compile-time type checking

Advanced Configuration

Content Scripts

If you need to inject scripts into web pages, configure them in webpack.config.js:

{
  entry: {
    myContentScript: "./src/js/myContentScript.js"
  },
  chromeExtensionBoilerplate: {
    notHotReload: ["myContentScript"]  // Exclude from hot reload
  }
}

And reference in src/manifest.jsonc:

{
  "content_scripts": [
    {
      "matches": ["https://example.com/*"],
      "js": ["myContentScript.bundle.js"]
    }
  ]
}

Environment Variables & Secrets

For API keys and environment-specific configuration:

Development: ./secrets.development.js

export default { 
  apiKey: 'dev-key-123',
  nodeUrl: 'https://test-node.stellaris.dev'
};

Usage in code:

import secrets from 'secrets';
console.log(secrets.apiKey);

Note: Files matching secrets.*.js are automatically ignored by git.

Contributing

We welcome contributions to Quasar! Please follow these guidelines:

Fork the repository and create a feature branch
Follow TypeScript conventions and maintain type safety
Test your changes thoroughly in both development and production builds
Update documentation if you're adding new features
Submit a pull request with a clear description of changes

Development Guidelines

Use TypeScript for all new code
Follow the existing code style and formatting
Ensure browser compatibility for all cryptographic operations
Test wallet functionality with multiple blockchain networks
Maintain security best practices

Resources & Documentation

Stellaris Blockchain - Official Stellaris network documentation
Chrome Extension Development - Official Chrome extension guides
Web Crypto API - Browser cryptography documentation
Webpack Documentation - Build system configuration
React 18 Documentation - UI framework documentation

Support & Community

Telegram: VoxaCommunications
GitHub Issues: Report bugs and request features
Discussions: Join community discussions on GitHub

License

This project is licensed under the MIT License - see the LICENSE file for details.

Screenshots

Quasar provides a clean, intuitive interface for managing your Stellaris assets directly in your browser.

Acknowledgments

This project builds upon the excellent work of the Chrome extension boilerplate community and integrates seamlessly with the Stellaris blockchain ecosystem. Special thanks to:

Michael Xieyang Liu - Original Chrome extension boilerplate (Website)
Stellaris Development Team - Blockchain protocol and Python wallet implementation
Open Source Community - Various cryptographic and web3 libraries

Developed by Connor W | Website | Stellaris Chain

Name		Name	Last commit message	Last commit date
Latest commit History 321 Commits
.devcontainer		.devcontainer
.github		.github
.vscode		.vscode
docs		docs
scripts		scripts
src		src
stellaris @ 47a48f6		stellaris @ 47a48f6
stellaris-wallet @ 29e945e		stellaris-wallet @ 29e945e
tests		tests
utils		utils
.babelrc		.babelrc
.eslintrc		.eslintrc
.gitignore		.gitignore
.gitmodules		.gitmodules
.prettierrc		.prettierrc
LICENSE		LICENSE
README.md		README.md
esbuild.config.js		esbuild.config.js
package-lock.json		package-lock.json
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
tsconfig.json		tsconfig.json
update-submodules.sh		update-submodules.sh
webpack.config.js		webpack.config.js

Uh oh!

License

StellarisChain/quasar

Folders and files

Latest commit

History

Repository files navigation

Quasar - Stellaris Wallet Browser Extension

What's New

Key Features

Wallet Functionality

Security Features

Technical Features

Technology Stack

Architecture

Core Libraries (src/lib/)

Browser Compatibility

Installation & Development

Prerequisites:

Setup Procedures:

Browser-Specific Builds

Quick Start

Chrome (Manifest V3)

Firefox (Manifest V2)

Both Browsers

Available Build Scripts

ESBuild (Recommended for speed)

Webpack (Advanced features)

Distribution Packages

Browser Differences

Chrome (Manifest V3)

Firefox (Manifest V2)

Output Structure

Loading in Different Browsers

Chrome

Firefox

Edge

Development Tips

Browser Compatibility Features

Production Build

Project Structure

Security Features

Cryptographic Implementation

Node Validation

Development

Hot Reload & Auto-refresh

TypeScript Support

Debugging

Code Quality

Advanced Configuration

Content Scripts

Environment Variables & Secrets

Contributing

Development Guidelines

Resources & Documentation

Support & Community

License

Screenshots

Acknowledgments

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases 5

Sponsor this project

Uh oh!

Contributors 7

Uh oh!

Languages

Core Libraries (`src/lib/`)