Dexola WebApp

Dexola WebApp is a decentralized application built on the Ethereum blockchain, enabling users to interact with smart contracts and manage token staking. This project is structured with React, Vite, and Web3Modal for blockchain integration.

Table of Contents

• Technical Task
• Prerequisites
• Dependencies
• Installation
• Usage
• Configuration
• Project Structure
• Live Link
• Features

Technical Task

This project is organized by Dexola.
The technical task for this project can be found in the project documentation.
The design assets and guidelines are provided in the Figma design file.

Prerequisites

• Node.js
• Vite

Dependencies

1. Formik (formik):
   • A library that helps with building forms in React, managing form state, and validating form fields.
2. Yup (yup):
   • A JavaScript schema builder for value parsing and validation which integrates well with Formik.
3. Web3Modal (@web3modal/ethereum & @web3modal/react):
   • Libraries for integrating Ethereum blockchain interactions within your React app, providing a modal dialog for connecting to different wallets.
4. WAGMI (wagmi):
   • A library used for integrating blockchain functionalities in your application. It provides hooks and utilities for working with Ethereum contracts and accounts.
5. Sass (sass):
   • A preprocessor scripting language that is interpreted or compiled into CSS, which enhances the styling of the application.
6. Normalize.css (normalize.css):
   • A modern alternative to CSS resets, making built-in browser styling consistent across different browsers.
7. React Tooltip (react-tooltip):
   • A library for creating simple and customizable tooltips in your application.
8. React Loader Spinner (react-loader-spinner):
   • Provides loading spinner components which are displayed while waiting for some data.
9. Viem (viem):
   • A library for formatting and manipulating values in your application.

Installation

git clone https://github.com/your-username/dexola-webapp.git
cd dexola-webapp
npm install

Usage

After installation, run the following command to start the development server:

npm run dev

Open http://localhost:5173 to view the application in your browser.

Configuration

Ensure to set up your environment variables correctly in a .env file at the root of your project. Here is an example configuration:

VITE_PROJECT_ID=your-project-id
VITE_ALCHEMY_KEY=your-alchemy-key
VITE_TOKEN=your-token-address
VITE_CONTRACT=your-contract-address

Project Structure

• src: Contains the main source files including components, hooks, utilities, and styles.
• public: Holds static files such as the index.html file.
• package.json: Lists the project dependencies and scripts.
• vite.config.js: Contains the Vite configuration.
• .gitignore: Specifies files and directories to be ignored by Git.
• .env: Holds environment variables (ensure to keep this file secure and untracked by Git).

Live Link

Dexola WebApp

Features

The Dexola WebApp allows users to interact with Ethereum blockchain to manage token staking. Here's how you can use the app:

Connecting a Wallet

1. Click on the Connect Wallet button on the top right corner.
2. Select your wallet type and follow the prompts to connect your Ethereum wallet.

Staking Tokens

1. Once your wallet is connected, navigate to the Stake page via the navigation bar.
2. Enter the amount of tokens you wish to stake in the input field.
3. Click on the Stake button and confirm the transaction in your wallet.

Withdrawing Staked Tokens

1. Navigate to the Withdraw page via the navigation bar.
2. Enter the amount of tokens you wish to withdraw in the input field.
3. Click on the Withdraw button and confirm the transaction in your wallet.