BEAM All-in-One dApp

A complete decentralized application suite for the BEAM Privacy blockchain featuring DEX token swapping, liquidity pool management, and confidential asset minting.

Features

Token Swap (DEX)

• Instant token swaps using BEAM's AMM DEX
• Auto-quote with real-time price updates
• Automatic fallback to BEAM when no direct pool exists
• Pool information and fee breakdown

Liquidity Pools

• Browse all available liquidity pools
• Sorted by BEAM reserve (highest liquidity first)
• USD value display using live BEAM price
• Pool details: reserves, rates, LP token info, volatility
• Click any pool to start swapping

Token Minter

• Create Token - Mint new Confidential Assets with full metadata
• My Tokens - View tokens you own with management options
• Mint/Withdraw - Mint additional supply for owned tokens

Recent DEX Activity

• Live feed of recent trades from the blockchain
• Token pair icons and formatted amounts
• Action type badges (Trade, Add Liquidity, Withdraw)

Installation

Option 1: Install in BEAM Desktop Wallet

1. Download beam-allinone.dapp from releases
2. Open BEAM Desktop Wallet
3. Go to DApp Store → Install DApp from file
4. Select the .dapp file
5. The app will appear in your DApp list

Option 2: Run in Browser (Development)

Open app/index.html directly in a browser. Note: Wallet functionality requires the BEAM Desktop Wallet or Web Extension.

Building the .dapp Package

After making changes to the source files, rebuild the package:

# Navigate to project directory
cd AllDapps

# Remove old package and create new one
rm -f beam-allinone.dapp
zip -r beam-allinone.dapp manifest.json app/

# Verify the package
unzip -l beam-allinone.dapp

What goes in the package:

• manifest.json - App metadata (required at root)
• app/index.html - Main application
• app/appicon.svg - App icon
• app/shaders/ - WASM shader files
• app/assets/ - Token logos and images

Project Structure

AllDapps/
├── manifest.json           # dApp manifest (name, icon, entry point)
├── beam-allinone.dapp      # Packaged dApp for wallet installation
├── README.md               # This file
└── app/
    ├── index.html          # Main application (HTML + CSS + JS)
    ├── appicon.svg         # Application icon
    ├── BeamDappConnector.js # Wallet connection library
    ├── shaders/
    │   ├── amm_app.wasm    # DEX contract shader
    │   └── minter_app.wasm # Minter contract shader
    └── assets/
        └── logos/          # Token icon images
            ├── beam.svg
            ├── fomo.png
            ├── beamx.png
            └── ...

Manifest Format

The manifest.json file is required for BEAM wallet installation:

{
    "name": "BEAM All-in-One",
    "description": "Complete BEAM dApp suite: DEX Swap, Liquidity Pools & Token Minter",
    "url": "localapp/app/index.html",
    "icon": "localapp/app/appicon.svg",
    "guid": "f8a3b2c1d4e5f6a7b8c9d0e1f2a3b4c5"
}

Field	Description
name	Display name in wallet
description	Short description
url	Entry point (prefix with localapp/ for packaged apps)
icon	App icon path (prefix with localapp/)
guid	Unique identifier (generate once, never change)

Smart Contracts

DEX Contract

• Contract ID: 729fe098d9fd2b57705db1a05a74103dd4b891f535aef2ae69b47bcfdeef9cbf
• Actions: pools_view, pool_trade, pool_add_liquidity, pool_withdraw

Minter Contract

• Contract ID: 295fe749dc12c55213d1bd16ced174dc8780c020f59cb17749e900bb0c15d868
• Actions: view_all_assets, view_owned, create_token, withdraw

Technical Details

Browser Compatibility

Built for Chrome 83+ (Qt WebEngine in BEAM Desktop Wallet):

• No CSS gap property (uses margins)
• No CSS inset shorthand (uses top/left/right/bottom)
• Includes -webkit- prefixes for flexbox
• No AbortSignal.timeout() (uses AbortController + setTimeout)

Wallet Detection

The app automatically detects the wallet environment:

• Desktop Wallet - Qt WebChannel API
• Mobile Wallet - Document events (Android) / Callbacks (iOS)
• Web Extension - postMessage API

Explorer API

Uses BEAM Explorer API for blockchain data:

• Primary: https://explorer.0xmx.net/api
• Fallback nodes available in the UI

Development

Adding New Token Icons

1. Add icon file to app/assets/logos/
2. Update ASSET_ICONS object in index.html:

const ASSET_ICONS = {
    0: 'assets/logos/beam.svg',
    174: 'assets/logos/fomo.png',
    // Add new asset ID and path
};

Modifying Styles

All CSS is embedded in index.html within the <style> tag. Key CSS variables:

--accent-primary: #25c2a0;   /* Teal accent */
--accent-secondary: #00d4ff; /* Cyan accent */
--bg-primary: #0a0e17;       /* Dark background */
--bg-card: #151d2e;          /* Card background */

License

MIT License - See LICENSE file for details.

Links

• BEAM Privacy
• BEAM Documentation
• BEAM GitHub