Raze.bot Developers

Prerequisites

Before installing Raze, ensure you have the following:

Node.js

Version 18 or later recommended

npm

Comes bundled with Node.js

Verify your Node.js version by running node --version in your terminal

Quick Start

1. Clone the Repository

git clone https://github.com/razedotbot/solana-ui.git
cd solana-ui

2. Install Dependencies

npm install

3. Start Development Server

npm run dev

The development server will start at http://localhost:5173

One-Click Deployment

Prefer not to run locally? Deploy instantly to the cloud:

Deploy with Vercel

Zero-config deployment

Deploy with Netlify

Continuous deployment

Production Build

Build for Production

npm run build

This command will:

Run TypeScript type checking
Generate HTML from templates
Bundle and optimize the application

Preview Production Build

npm run preview

Deploy the `dist` Folder

After building, deploy the contents of the dist folder to your hosting provider.

Available Scripts

Command	Description
`npm run dev`	Start development server with hot reload
`npm run build`	Build for production
`npm run preview`	Preview production build locally
`npm run lint`	Run ESLint for code quality
`npm run typecheck`	Run TypeScript type checking
`npm run analyze`	Analyze bundle size
`npm run generate-html`	Regenerate HTML from template

Project Structure

solana-ui/
├── src/
│   ├── components/       # Reusable UI components
│   │   ├── modals/       # Modal dialogs
│   │   └── tools/        # Trading tools & automation
│   ├── contexts/         # React contexts
│   ├── pages/            # Page components
│   │   ├── HomePage.tsx
│   │   ├── WalletsPage.tsx
│   │   ├── AutomatePage.tsx
│   │   ├── DeployPage.tsx
│   │   └── SettingsPage.tsx
│   └── utils/            # Utility functions
├── docs/                 # Documentation
├── scripts/              # Build scripts
├── brand.json            # Brand configuration
├── green.css             # Default theme
└── package.json

Configuration

Environment Setup

Raze uses a configuration system stored in the browser. Key settings include:

array

Configure multiple RPC endpoints with weighted load balancing

string

Optional self-hosted trading server URL

string

Data stream API key for real-time market data

Brand Configuration

Customize branding by editing brand.json:

{
  "brand": {
    "name": "Your Brand",
    "displayName": "YOUR BRAND",
    "domain": "yourdomain.com",
    "appUrl": "https://app.yourdomain.com",
    "docsUrl": "https://docs.yourdomain.com",
    "theme": {
      "name": "green"
    }
  }
}

After editing, regenerate HTML:

npm run generate-html

Theme Customization

Edit green.css or create a new theme file:

:root {
  /* Primary Colors */
  --color-primary: #02b36d;
  --color-primary-light: #04d47c;
  --color-primary-dark: #01a35f;
  
  /* Background Colors */
  --color-bg-primary: #050a0e;
  --color-bg-secondary: #0a1419;
  
  /* And many more... */
}

Troubleshooting

Port 5173 already in use

The dev server defaults to port 5173. If it’s in use, Vite will automatically try the next available port. You can also specify a port:

npm run dev -- --port 3000

Node.js version errors

Ensure you’re using Node.js 18 or later:

node --version
# Should output v18.x.x or higher

Consider using nvm to manage Node.js versions.

Build fails with TypeScript errors

Run type checking separately to see detailed errors:

npm run typecheck

RPC connection issues

Configure multiple RPC endpoints in Settings for redundancy. The app will automatically rotate between endpoints if one fails.

Solana UI

iFrame Widget

Locally Install

Prerequisites

Node.js

npm

Quick Start

1. Clone the Repository

2. Install Dependencies

3. Start Development Server

One-Click Deployment

Deploy with Vercel

Deploy with Netlify

Production Build

Build for Production

Preview Production Build

Deploy the `dist` Folder

Available Scripts

Project Structure

Configuration

Environment Setup

Brand Configuration

Theme Customization

Troubleshooting

Next Steps

Technical Integration

Key Features

​Prerequisites

Node.js

npm

​Quick Start

​1. Clone the Repository

​2. Install Dependencies

​3. Start Development Server

​One-Click Deployment

Deploy with Vercel

Deploy with Netlify

​Production Build

​Build for Production

​Preview Production Build

​Deploy the dist Folder

​Available Scripts

​Project Structure

​Configuration

​Environment Setup

​Brand Configuration

​Theme Customization

​Troubleshooting

​Next Steps

Technical Integration

Key Features

Prerequisites

Quick Start

1. Clone the Repository

2. Install Dependencies

3. Start Development Server

One-Click Deployment

Production Build

Build for Production

Preview Production Build

Deploy the `dist` Folder

Available Scripts

Project Structure

Configuration

Environment Setup

Brand Configuration

Theme Customization

Troubleshooting

Next Steps