Installation

OADA UI Installation Guide

This guide will help you set up and run the OADA UI frontend project locally. The OADA UI is a modern React based frontend application that provides a user interface for interacting with the OADA smart contract platform.

Prerequisites

Before you begin, ensure you have the following installed:

  • Node.js (v16 or higher)

  • npm (v7 or higher) or yarn (v1.22 or higher)

  • Git

  • A modern web browser (Chrome, Firefox, Safari, or Edge)

  • A Cardano wallet (e.g., Eternl, Nami, etc.)

  • Basic understanding of React, TypeScript, and the Cardano blockchain

Development Tools (Recommended)

  • VS Code or WebStorm for IDE

  • Chrome DevTools or Firefox Developer Tools

  • Git GUI client (optional)

  • Postman or Insomnia for API testing

  • React Developer Tools browser extension

  • Redux DevTools for state management debugging

Installation Steps

  1. Clone the Repository

    git clone https://github.com/OptimFinance/oada-ui.git
cd oada-ui

  2. Install Dependencies You can use either npm or yarn to install dependencies:

    Using npm:

    npm install

    Using yarn:

    yarn install

    Note: The first installation might take several minutes as it downloads all dependencies.

  3. Configuration Setup Create a configuration file by either:

    • Running the configuration script:

      ./generateConfig.sh

    • Or manually copying the example file:

      cp src/config.local.ts.example src/config.local.ts

    Modify src/config.local.ts with your specific settings:

    • Backend API endpoints

    • Blockchain network configuration

    • Fee addresses and amounts

    • Other environment-specific values

  4. Environment Setup Create a .env file in the root directory with the following variables:

    REACT_APP_API_URL=your_api_url_here
REACT_APP_ENV=development
REACT_APP_VERSION=$npm_package_version

    Additional optional environment variables:

    REACT_APP_DEBUG=true
REACT_APP_ANALYTICS_ID=your_analytics_id
REACT_APP_FEATURE_FLAGS=feature1,feature2
REACT_APP_LOG_LEVEL=debug
REACT_APP_SENTRY_DSN=your_sentry_dsn

  5. Start the Development Server

    npm start
# or
yarn start

    The application will start on http://localhost:3000

    Note: The first build might take a few minutes as it compiles all the assets.

    For API requests that might be affected by CORS, consider using:

    npx local-cors-proxy --proxyUrl="https://your-api-endpoint.com"

PreviousSetupNextDevelopment Workflow

Last updated