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"