> For the complete documentation index, see [llms.txt](https://optim-finance.gitbook.io/optim-finance/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://optim-finance.gitbook.io/optim-finance/oada-ui/tutorials/basic-configuration-and-customization.md).

# Basic Configuration and Customization

## Basic Configuration and Customization

This tutorial will guide you through the basic configuration and customization options available in the OADA UI project. You'll learn how to configure the application for different environments and work with the Cardano network settings.

### Environment Configuration

#### 1. Configuration File

The main configuration file is located at `src/config.local.ts`. You can customize it based on your needs. Here's an example configuration:

```typescript
import { Network } from "lucid-cardano";

// Blockfrost API endpoint configuration
const blockfrostEndpoint: string =
  "https://preview-server.optim.finance/blockfrost";
// const blockfrostEndpoint: string = 'https://preprod-server.optim.finance/blockfrost';
// const blockfrostEndpoint: string = 'https://spo-server.optim.finance/blockfrost';
// const blockfrostEndpoint: string = 'http://localhost:8083/blockfrost';

// Cardano network selection
const cardanoNetwork: Network = "Preview";
// const cardanoNetwork: Network = 'Preprod';
// const cardanoNetwork: Network = 'Mainnet';

// Blockfrost API key configuration
const blockfrostKey: string = "previewMtZHkzC9Pfwdb8l5uLF13HJyQPJtsLpy";
// const blockfrostKey: string = 'preprodnVHn6TFwu2L0cARVUdGg2RUYh1xsy23g';
// const blockfrostKey: string = 'mainnetOpWFIMyQPVG3Zap4EOmBkKmEzGmHIilz';

// Optim server URLs
const optimServerUrl: string = "https://preview-server.optim.finance";
// const optimServerUrl: string = 'https://preprod-server.optim.finance';
// const optimServerUrl: string = 'https://spo-server.optim.finance';
// const optimServerUrl: string = 'http://localhost:8083';

const optimServer2Url: string = "https://preview-server.optim.finance";
// const optimServer2Url: string = 'https://preprod-server.optim.finance:8083';
// const optimServer2Url: string = 'https://spo-server.optim.finance';
// const optimServer2Url: string = 'http://localhost:8083';

// Verified names URL
const verifiedNamesUrl: string =
  "https://raw.githubusercontent.com/OptimFinance/verified-offers/main/names";

export {
  blockfrostEndpoint,
  cardanoNetwork,
  blockfrostKey,
  optimServerUrl,
  optimServer2Url,
  verifiedNamesUrl,
};
```

#### 2. Environment Selection

The configuration file supports different environments:

1. **Preview Network**
   * Blockfrost endpoint: `https://preview-server.optim.finance/blockfrost`
   * Network: `Preview`
   * Blockfrost key: `previewMtZHkzC9Pfwdb8l5uLF13HJyQPJtsLpy`
2. **Preprod Network**
   * Blockfrost endpoint: `https://preprod-server.optim.finance/blockfrost`
   * Network: `Preprod`
   * Blockfrost key: `preprodnVHn6TFwu2L0cARVUdGg2RUYh1xsy23g`
3. **Mainnet**
   * Blockfrost endpoint: `https://cardano-preview.blockfrost.io/api/v0`
   * Network: `Mainnet`
   * Blockfrost key: `mainnetOpWFIMyQPVG3Zap4EOmBkKmEzGmHIilz`
4. **Local Development**
   * Blockfrost endpoint: `http://localhost:8083/blockfrost`
   * Network: Configure as needed
   * Blockfrost key: Configure as needed

#### 3. Configuration Best Practices

1. **Environment Selection**
   * Comment out unused configurations
   * Keep only one active configuration per section
   * Use appropriate network settings for your environment
2. **Security**
   * Never commit API keys to version control
   * Use environment-specific keys
   * Keep local development configurations separate
3. **Network Configuration**
   * Ensure network settings match your target environment
   * Verify server URLs are correct for your environment
   * Test connections before deployment

### Style Management

#### 1. Global Styles

Global styles are managed through several key files:

1. `src/index.scss` - Main stylesheet that defines:
   * Global CSS variables and theme settings
   * Base HTML and body styles
   * Typography defaults
   * Common element styles
   * Layout utilities
2. `src/assets/_variables.scss` - Contains all global variables:
   * Font sizes and weights
   * Color palette
   * Media breakpoints
   * Spacing and padding
   * Shadows and gradients
   * Border radius values
3. `src/assets/normalize.css` - CSS reset/normalize styles

#### 2. Component Styles

Each component has its own styles in a SCSS module:

```scss
// ComponentName/index.module.scss
@import "src/assets/variables";

.component {
  // Component-specific styles
  // Can use variables from _variables.scss
}
```

#### 3. Key Style Features

1. **Variables and Functions**
   * Uses SCSS variables for consistent styling
   * Includes utility functions like `pxToRem`
   * Centralized color palette and typography
2. **Responsive Design**
   * Breakpoints defined in `_variables.scss`:

     ```scss
     $breakpointLaptop: 1329px;
     $breakpointTablet: 1027px;
     $breakpointPhone: 767px;
     $breakpointSmallPhone: 414px;
     ```
3. **Color System**
   * Base colors: `$colorBaseBlack`, `$colorBaseWhite`
   * Gray scale: `$colorGray100` through `$colorGray900`
   * Theme colors: `$colorViolet200`, `$colorBlue`, etc.
   * Gradients: `$priBtnColor`, `$borderGradient`
4. **Typography**
   * Font family: Roobert
   * Font weights: `$light` through `$black`
   * Font sizes: `$fontXxs` through `$fontXxxL`

#### 4. Best Practices

1. **Component Styling**
   * Use SCSS modules for component-specific styles
   * Import variables from `_variables.scss`
   * Follow the established naming conventions
2. **Responsive Design**
   * Use the predefined breakpoints
   * Implement mobile-first design
   * Test across all breakpoints
3. **Color Usage**
   * Use variables instead of hardcoded colors
   * Follow the established color system
   * Maintain consistency across components
4. **Typography**
   * Use the predefined font sizes and weights
   * Maintain consistent spacing
   * Follow the established hierarchy

### Next Steps

Now that you understand the configuration and styling options, you can proceed to:

1. Working with Components
2. State Management and Data Flow

### Additional Resources

* [Lucid Cardano Documentation](https://lucid-cardano.readthedocs.io/)
* [Blockfrost API Documentation](https://docs.blockfrost.io/)
* [Cardano Network Documentation](https://docs.cardano.org/)
* [SCSS Documentation](https://sass-lang.com/documentation)