Ctrlk
For the complete documentation index, see llms.txt. This page is also available as Markdown.

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:

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:

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:

  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

PreviousUnderstanding the Project StructureNextWorking with Components

Last updated