Welcome to Sulaunch’s developer documentation!

SuLaunch is an ENS491/492 project offered at the Sabanci University as a graduation project. The main aim of this project is to introduce Blockchain technology to CS enthusiasts and wants to explore new technology.

This project aims to create the foundation for the utilization of blockchain technology in Sabanci University through an utility token (SUC) deployed on one of the EVM compatible blockchains. The main priority is to provide a fundraising platform for students to propose their projects and distribute their project’s tokens for funds via the auction mechanism provided by our system. The process will be as basic as possible for users to use blockchain technology, most of the key features of our project will be automated through the smart contracts and the backend server.

One of the key points of this part of the project is to protect the ideas of the project proposers as in the real world, fundraising can be vulnerable to the theft of ideas. The project provides a hybrid solution where both traditional databases and a blockchain are utilized to provide a safety measure. This is achieved through saving the hash of the project details in the blockchain and commercialized versions of the project details in the database. This lets users be able to show the ownership of the document through their wallet and the logs in the blockchain by our web application during the applying process.

The motivation for the project lies in the safety of the project’s owner’s rights, decentralization of the funding mechanisms around the schools, and providing a solid foundation for the later blockchain use cases which can be utilized through SUC.

This is a code documentation for developers. Since it is about how the platform works, It is recommended that you read the User Documentation first.

Contents

Setup Guide

Requirements

  • Pull the latest version of the project Install node.js v18

  • Install pnpm with (npm install -g pnpm)

To Run Frontend:

In frontend_react

run: pnpm i

In /src/contracts_hardhat

run:

pnpm add -D hardhat

pnpm hardhat compile

In frontend_react

run: pnpm start

To Run Backend:

In backend_dotnet

run: dotnet run

To set up metamask

Create a wallet Go to settings -> networks -> Add a network

Network Name: Mumbai Testnet (Optional)

New RPC URL: https://polygon-mumbai.infura.io/v3/4458cf4d1689497b9a38b1d6bbf05e78

Chain ID: 80001

Currency Symbol: MATIC

Block Explorer URL (optional): https://mumbai.polygonscan.com

After the network, go to assets -> Import Tokens and enter the current address of SUCoin.

Press save and use this Metamask settings while entering the website. This process is automatic for users when they first enter the website. They just need to agree on the changes.

Docker Setup

Docker Commands

run:

docker compose build

docker compose -f docker-compose.yml up -d

Important:

-d flag is not required if the containers will run on a screen

REACT_APP_BACKEND_URL and REACT_APP_FRONTEND_URL need to be set accordingly inside the docker-compose.yml file

Shutting down the containers

run: docker compose down

if it does not work,

run:

docker stop $(docker ps -aq)

docker rm $(docker ps -aq)

For Linux Enviroments

podman-compose can be used instead of docker compose and podman instead of docker if root access is not available

To keep the containers running in the background when the terminal is closed, create a new screen and run the commands inside of it

Screen controls
To create a new screen

run: screen -S

Deattach the current screen

Press CTRL+A and then D

Reattach a screen

run: screen -x

To terminate the current screen

Press CTRL+A and then K then Y and then Enter

Smart Contract Deployment

When the project will operate on the Polygon Mainnet, Contracts have to be redeployed with the instructions below:

Sucoin, Project Register and BokkyPooBahsRedBlackTreeLibrary Contracts need to be deployed manually before all the others and their address needs to be set in the deploy_maestro.js file at frontend_react/src/contracts_hardhat/scripts/deploy_maestro.js

Sucoin is handled by the Supayment team. Please contact them to learn the address of the contract.

Project Register is in frontend_react/src/contracts_hardhat/contracts

BokkyPooBahsRedBlackTreeLibrary is in the libraries folder of the same directory.

Deploy them using Remix or any other contract deployment tool. To learn how to deploy contracts using Remix, please refer here

After these steps, hardhat.config.js file needs to be updated for the polygon mainnet. the necessary steps can be found here at the Setting up the contract section.

Now the rest of the contracts are ready to be deployed. To deploy them with hardhat run the following commands in the frontend_react/src/contracts_hardhat directory:

pnpm hardhat compile

pnpm hardhat run scripts/deploy_maestro.js –polygon_mumbai

After the contracts are deployed, their addresses will be printed to the console. These addresses need to be set in the location of the contract addresses in the project before booting up.

Locations of Contract Addresses

Enviorment Variables:

  • REACT_APP_MAESTRO_ADDRESS for Maestro(Auction) Contract

  • REACT_APP_PROJECT_REGISTER_ADDRESS for ProjectRegister Contract

  • REACT_APP_SUCOIN_ADDRESS for Sucoin Contract

They can also be set in the following files:

  • backend_dotnet/Constants/ContractConstants.cs

  • frontend_react/src/config.js

Constants

The Constants directory contains several classes defining constants used throughout the project. These constants are grouped into different namespaces, files and classes for better organization.

ContractConstants

This class contains the contract addresses for the RegisterContract and MaestroContract on the blockchain.

MessageConstants

The MessageConstants class contains various constant string messages used in the application. These messages are typically used for providing user feedback, error messages, or informative responses.

ProjectStatusConstants

This class defines constants representing the different statuses a project can have, such as “Approved”, “Pending”, or “Rejected”.

UserPermissionRoleConstants

This class defines constants for the different permission roles a user can have in a project, such as “Owner”, “Co-Owner”, or “Editor”.

UserRoleConstants

The UserRoleConstants class defines constants for different user roles, such as “Admin”, “Whitelist”, “Viewer”, “Base”, and “Blacklist”.

Data Context

The DataContext class (located in the backend_dotnet\Data\DataContext.cs file) is responsible for managing the connection to the database and providing access to the various tables within the database. This class inherits from the DbContext class provided by the Entity Framework Core library.

DataSets

The following data sets are defined within the DataContext class:

  • Projects: Represents the table containing project data.

  • Users: Represents the table containing user data.

  • ProjectPermissions: Represents the table containing project permissions data.

  • Ratings: Represents the table containing ratings data.

Database Connection Configuration

The OnConfiguring method in the DataContext class is used to configure the database connection. It retrieves the server, database, username, and password from environment variables, and configures the connection to use the MySQL database with the specified credentials.

Logging Configuration

The DataContext class also configures logging for the database context. It uses the LoggerFactory to create a logging provider that outputs log messages to the console, with a log level filter set to “Warning” for messages coming from the “Microsoft.EntityFrameworkCore” namespace. Additionally, sensitive data logging and detailed error messages are enabled.

Data Transfer Objects

Data Transfer Object (shortened as DTO), is a design pattern used in software development to transfer data between layers of an application. In .NET, DTOs are typically used to transfer data between the business logic layer and the presentation layer or between different components of a distributed application.

In this project, DTO classes are primarily used to model the data coming from and going to the Solidity Smart Contract. They contain classes representing Smart Contract events and function outputs. The Nethereum library is used to interact Smart Contracts in the .NET environment. Nethereum provides attributes like Event, Parameter, and FunctionOutput to define and map these classes to their respective smart contract events and function outputs.

Controllers Introduction

Controllers in this project are responsible for handling incoming HTTP requests, managing the flow of data between the client and the business logic, and sending appropriate HTTP responses based on the outcomes of the operations performed. They act as intermediaries between the front-end and the back-end services. Below is a brief introduction to each controller.

AuthenticationController

This controller is responsible for handling user authentication, including logging in and registering new users. It also manages email verification and provides the functionality to get a nonce (a unique value) for a user’s address.

EventDebugController

The EventDebugController is designed to help debug events emitted by the blockchain contracts. It retrieves and displays event logs related to project evaluation, whitelist addition, and whitelist removal. It also checks if a user is whitelisted.

UserController

The UserController is responsible for managing user-related operations. These include retrieving user details, updating user information, deleting a user, inviting a user to a project, managing project invitations, and listing all users. This controller also handles operations related to project co-owners, removing collaboration permissions from users, and updating user roles.

ProjectController

The ProjectController is responsible for managing project-related operations. These include creating a new project, retrieving project details, updating project information, deleting a project, listing all projects, and listing all projects a user is a member of. This controller also handles operations related to project co-owners, removing collaboration permissions from users, and updating user roles.

Authentication Controller

The AuthenticationController handles user authentication and registration. It is located at:

backend_dotnet\Controllers\AuthenticationController.cs

It handles user authentication and registration, providing endpoints for user login, registration, email verification, and retrieving the nonce for a given wallet address. It is located at:

Routes

Login:

POST /Authentication/Login

Authenticates the user with their credentials.

Request JSON Object:

  • request (obj) – The user login request object.

Response JSON Object:

  • response (obj) – The service response object.

Register:

POST /Authentication/Register

Registers a new user with the provided information.

Request JSON Object:

  • request (obj) – The user registration request object.

Response JSON Object:

  • response (obj) – The service response object.

Verify Email:

GET /Authentication/verify-email

Verifies the user’s email address with a provided token.

Query Parameters:

  • email (string) – The user’s email address.

  • token (string) – The email verification token.

Response JSON Object:

  • response (obj) – The service response object.

Get Nonce:

GET /Authentication/GetNonce/{address}

Retrieves the nonce for a given wallet address.

Parameters:

  • address (string) – The wallet address of the user.

Response JSON Object:

  • response (obj) – The service response object.

Event Debug Controller

The EventDebugController is used for debugging purposes and to check the whitelisting status of a user. It is located at:

backend_dotnet\Controllers\EventDebugController.cs

The EventDebugController is used for debugging purposes and checking the whitelisting status of users, providing endpoints for retrieving event logs and checking if a user is whitelisted based on their wallet address. It is located at:

Routes

Debug:

GET /EventDebug/Debug

Retrieves the project evaluation event logs.

Response JSON Object:

  • response (obj) – The service response object.

Debug Remove:

GET /EventDebug/DebugRemove/{address}

Retrieves the whitelist removal event logs for a given wallet address.

Parameters:

  • address (string) – The wallet address of the user.

Response JSON Object:

  • response (obj) – The service response object.

Debug Add:

GET /EventDebug/DebugAdd/{address}

Retrieves the whitelist insertion event logs for a given wallet address.

Parameters:

  • address (string) – The wallet address of the user.

Response JSON Object:

  • response (obj) – The service response object.

Is WhiteListed:

GET /EventDebug/Whitelisted/{address}

Checks if the user with the given wallet address is whitelisted.

Parameters:

  • address (string) – The wallet address of the user.

Response JSON Object:

  • response (bool) – A boolean indicating whether the user is whitelisted or not.

User Controller

The UserController manages user-related actions such as retrieving, updating, and deleting user information, managing project permissions, and handling project invitations. It is located at:

backend_dotnet\Controllers\UserController.cs

Routes

  • GET /user/get: Retrieves the user information.

  • PUT /user/update: Updates the user information.

  • DELETE /user/delete: Deletes the user’s own account.

  • DELETE /user/deleteuser/{id:int}: Deletes a user account as an admin.

  • POST /user/invite: Invites a user to a project.

  • PUT /user/invitationreply: Allows the user to reply to a project invitation.

  • GET /user/getall: Retrieves all users (admin only).

  • GET /user/learnusercount: Retrieves the total user count.

  • GET /user/getcoowners/{projectID:int}: Retrieves co-owners of a project.

  • DELETE /user/removecollab: Removes a collaborator from a project.

  • PATCH /user/updaterole/{address}/{role}: Updates the role of a user (admin only).

Project Controller

The ProjectController manages the projects and their associated actions. It is located at:

backend_dotnet\Controllers\ProjectController.cs

Routes

Get all projects:

GET /Project/Get/All

Retrieves all projects.

Query Parameters:

  • withHex (bool) – Optional query parameter to include hexadecimal values.

Response JSON Object:

  • response (obj) – The service response object containing a list of projects.

Get project by ID:

GET /Project/Get/{id:int}

Retrieves a project by its ID.

Parameters:

  • id (int) – The project ID.

Response JSON Object:

  • response (obj) – The service response object containing the project details.

Update project:

PUT /Project/Update

Updates an existing project.

Request JSON Object:

  • project (obj) – The project data to be updated.

Response JSON Object:

  • response (obj) – The service response object.

Delete project:

DELETE /Project/Delete/{id}

Deletes a project by its ID.

Parameters:

  • id (int) – The project ID.

Response JSON Object:

  • response (obj) – The service response object.

Add project:

POST /Project/Add

Adds a new project.

Request JSON Object:

  • project (obj) – The project data to be added.

Response JSON Object:

  • response (obj) – The service response object.

Rate project:

PUT /Project/Rate/{id:int}/{rating}

Rates a project.

Parameters:

  • id (int) – The project ID.

  • rating (double) – The rating value.

Response JSON Object:

  • response (obj) – The service response object.

Get projects by status:

GET /Project/GetByStatus/{status}

Retrieves projects by their status.

Parameters:

  • status (string) – The project status.

Response JSON Object:

  • response (obj) – The service response object containing a list of projects.

Change project status:

PUT /Project/ChangeStatus/{id:int}

Changes the status of a project.

Parameters:

  • id (int) – The project ID.

Response JSON Object:

  • response (obj) – The service response object.

Update project markdown:

PUT /Project/UpdateMarkDown/{id:int}/{markdown}

Updates a project’s markdown.

Parameters:

  • id (int) – The project ID.

  • markdown (string) – The updated markdown content.

Response JSON Object:

  • response (obj) – The service response object.

Get all permissioned projects:

GET /Project/GetAllPermissioned/{withHex}

Retrieves all permissioned projects.

Query Parameters:

  • withHex (bool) – Optional query parameter to include hexadecimal values.

Response JSON Object:

  • response (obj) – The service response object containing a list of projects.

Get all invitations:

GET /Project/GetAllInvitations

Retrieves all project invitations.

Response JSON Object:

  • response (obj) – The service response object containing a list of invitations.

Get top N rated projects:

GET /Project/GetProjects/{numberOfProjects:int}

Retrieves the top N rated projects.

Parameters:

  • numberOfProjects (int) – The number of projects to retrieve.

Response JSON Object:

  • response (obj) – The service response object containing a list of projects.

Get all project file hashes:

GET /Project/GetAllHashes/{areOnlyAuctionsStarted}

Retrieves all project file hashes.

Query Parameters:

  • areOnlyAuctionsStarted (bool) – Optional query parameter to filter projects with auctions started.

Response JSON Object:

  • response (obj) – The service response object containing a list of project file hashes.

Reply to project preview:

PUT /Project/ViewerReply/{id:int}/{reply}

Submits a reply to a project preview.

Parameters:

  • id (int) – The project ID.

  • reply (bool) – The viewer’s reply (true or false).

Response JSON Object:

  • response (obj) – The service response object.

Projects

Class: Project

Properties:

  1. ProjectID

    • Type: int

    • Description: Represents the ID of the project.

  2. ProjectName

    • Type: string

    • Description: Represents the name of the project.

    • Required: Yes

  3. Date

    • Type: Nullable<System.DateTime>

    • Description: Represents the date of the project.

  4. ViewerAccepted

    • Type: bool

    • Description: Indicates whether the viewer has accepted the project.

  5. IsAuctionCreated

    • Type: bool

    • Description: Indicates whether an auction has been created for the project.

  6. IsAuctionStarted

    • Type: bool

    • Description: Indicates whether the auction for the project has started.

  7. FileHash

    • Type: string

    • Description: Represents the hash of the project file.

  8. ProjectDescription

    • Type: string

    • Description: Represents the description of the project.

    • Required: Yes

  9. Rating

    • Type: double

    • Description: Represents the rating of the project.

  10. Status * Type: string

    • Description: Represents the status of the project.

    • Default: ProjectStatusConstants.PENDING

  11. MarkDown * Type: string * Description: Represents the Markdown content of the project.

  12. ProposerAddress * Type: string * Description: Represents the address of the project proposer.

  13. ViewerAcceptedAddress * Type: string * Description: Represents the address of the viewer who accepted the project.

Please note that any required imports or namespace declarations should be included in your actual code, which have been omitted here for brevity.

Project permission

Class: ProjectPermission

Properties:

  1. ID

    • Type: int

    • Description: Represents the ID of the project permission.

  2. ProjectID

    • Type: int

    • Description: Represents the ID of the project associated with the permission.

  3. UserID

    • Type: int

    • Description: Represents the ID of the user associated with the permission.

  4. Role

    • Type: string

    • Description: Represents the role assigned to the user for the project.

  5. IsAccepted

    • Type: Boolean

    • Description: Indicates whether the permission has been accepted by the user.

    • Default: false

Please note that any required imports or namespace declarations should be included in your actual code, which have been omitted here for brevity.

Rating

Class: Rating

Properties:

  1. ID

    • Type: int

    • Description: Represents the ID of the rating.

  2. ProjectID

    • Type: int

    • Description: Represents the ID of the project associated with the rating.

  3. UserID

    • Type: int

    • Description: Represents the ID of the user who gave the rating.

  4. Rate

    • Type: double

    • Description: Represents the rating value given by the user.

Please note that any required imports or namespace declarations should be included in your actual code, which have been omitted here for brevity.

User

Class: User

Properties:

  1. Id

    • Type: int

    • Description: Represents the ID of the user.

  2. Name

    • Type: string

    • Description: Represents the name of the user.

  3. Surname

    • Type: string

    • Description: Represents the surname of the user.

  4. Address

    • Type: string

    • Description: Represents the address of the user.

  5. MailAddress

    • Type: string?

    • Description: Represents the email address of the user. It can be nullable.

  6. Username

    • Type: string

    • Description: Represents the username of the user.

  7. Role

    • Type: string

    • Description: Represents the role of the user. It is set to a default value from UserRoleConstants.BASE.

  8. Nonce

    • Type: Nullable<int>

    • Description: Represents the nonce value associated with the user. It can be nullable.

  9. VerificationToken

    • Type: string

    • Description: Represents the verification token for the user.

  10. VerificationExpiration

    • Type: DateTime?

    • Description: Represents the expiration date and time for the verification token. It can be nullable.

  11. IsVerified

    • Type: bool

    • Description: Represents whether the user is verified or not.

Please note that any required imports or namespace declarations should be included in your actual code, which have been omitted here for brevity.

Project Permission Request

Class: ProjectPermissionRequest

Properties:

  1. ProjectID

    • Type: int

    • Description: Represents the ID of the project.

  2. Username

    • Type: string?

    • Description: Represents the username associated with the permission request. It can be nullable.

  3. Role

    • Type: string

    • Description: Represents the role associated with the permission request. It is set to a default value from UserPermissionRoleConstants.EDITOR.

  4. IsAccepted

    • Type: Boolean

    • Description: Represents whether the permission request is accepted or not.

Please note that any required imports or namespace declarations should be included in your actual code, which have been omitted here for brevity.

Project Request

Class: ProjectRequest

Properties:

  1. ProjectID

    • Type: int

    • Description: Represents the ID of the project.

  2. ProjectName

    • Type: string

    • Description: Represents the name of the project. It is set to an empty string by default.

  3. Date

    • Type: Nullable<System.DateTime>

    • Description: Represents the date associated with the project.

  4. ProjectDescription

    • Type: string?

    • Description: Represents the description of the project. It can be nullable.

  5. ImageUrl

    • Type: string?

    • Description: Represents the URL of the image associated with the project. It can be nullable.

  6. MarkDown

    • Type: string

    • Description: Represents the markdown content of the project. It is set to an empty string by default.

  7. FileHex

    • Type: string

    • Description: Represents the hexadecimal value of the file associated with the project. It is set to an empty string by default.

Please note that any required imports or namespace declarations should be included in your actual code, which have been omitted here for brevity.

User Login Request

Class: UserLoginRequest

Properties:

  1. Address

    • Type: string?

    • Description: Represents the user’s address. It can be nullable and is set to null by default.

  2. SignedMessage

    • Type: string?

    • Description: Represents the signed message associated with the login request. It can be nullable and is set to null by default.

Please note that any required imports or namespace declarations should be included in your actual code, which have been omitted here for brevity.

User Register Request

Class: UserRegisterRequest

Properties:

  1. Name

    • Type: string?

    • Description: Represents the user’s name. It can be nullable and is set to null by default.

  2. Surname

    • Type: string?

    • Description: Represents the user’s surname. It can be nullable and is set to null by default.

  3. Username

    • Type: string?

    • Description: Represents the desired username for the user. It can be nullable and is set to null by default.

  4. MailAddress

    • Type: string?

    • Description: Represents the user’s email address. It can be nullable and is set to null by default.

  5. SignedMessage

    • Type: string?

    • Description: Represents the signed message associated with the registration request. It can be nullable and is set to null by default.

Please note that any required imports or namespace declarations should be included in your actual code, which have been omitted here for brevity.

Service Response

Class: ServiceResponse<T>

Type Parameters: * T: The type of data contained in the response.

Properties:

  1. Data

    • Type: T?

    • Description: Represents the data contained in the response. It can be nullable.

  2. Success

    • Type: bool

    • Description: Indicates whether the service operation was successful. It is set to false by default.

  3. Message

    • Type: string?

    • Description: Represents an optional message associated with the response. It can be nullable.

Please note that any required imports or namespace declarations should be included in your actual code, which have been omitted here for brevity.

Authentication Service

Class: AuthenticationService

Dependencies: * IMapper: An object mapper for mapping between objects. * DataContext: The data context for accessing the database. * IHttpContextAccessor: An accessor for accessing the HTTP context. * IConfiguration: The configuration settings. * IChainInteractionService: A service for interacting with the blockchain.

Constructor: * Initializes the class and sets the required dependencies.

Private Methods:

  1. GenerateVerificationToken()

    • Return Type: string

    • Description: Generates a verification token used for email verification.

  2. SendVerificationEmail(string email, string token)
    • Parameters:

      • email: The email address of the user.

      • token: The verification token.

    • Description: Sends a verification email to the user with the provided email address and verification token.

  3. GetNonce(string address)
    • Parameters:

      • address: The user’s Ethereum address.

    • Return Type: Task<ServiceResponse<int>>

    • Description: Retrieves the nonce value for the user with the provided Ethereum address.

  4. Login(UserLoginRequest request)
    • Parameters:

      • request: The login request containing the user’s Ethereum address and signed message.

    • Return Type: Task<ServiceResponse<string>>

    • Description: Handles the user login process, including address and signature verification.

  5. VerifyEmail(string email, string token)
    • Parameters:

      • email: The user’s email address.

      • token: The verification token.

    • Return Type: Task<ServiceResponse<string>>

    • Description: Verifies the user’s email address using the provided email and verification token.

  6. Register(UserRegisterRequest request)
    • Parameters:

      • request: The user registration request containing user details and a signed message.

    • Return Type: Task<ServiceResponse<string>>

    • Description: Handles the user registration process, including email verification and user creation.

  7. UserExists(string address, string email, string username)
    • Parameters:

      • address: The user’s Ethereum address.

      • email: The user’s email address.

      • username: The user’s username.

    • Return Type: Task<bool>

    • Description: Checks if a user with the provided Ethereum address, email address, or username already exists.

  8. UserNameExists(string username)
    • Parameters:

      • username: The username to check.

    • Return Type: Task<bool>

    • **Description.

Chain Interaction Service

Class: ChainInteractionService

Dependencies: * IMapper: An object mapper for mapping between objects. * DataContext: The data context for accessing the database. * IHttpContextAccessor: An accessor for accessing the HTTP context. * Web3: A library for interacting with Ethereum networks.

Constructor: * Initializes the class and sets the required dependencies. * Sets the connection timeout for the blockchain client. * Initializes the Web3 object with the Infura URL.

Private Methods:

  1. GetUserId()

    • Return Type: int

    • Description: Retrieves the user ID from the HTTP context.

  2. GetUserAddress()

    • Return Type: string

    • Description: Retrieves the user address from the HTTP context.

Methods:

  1. GetRegisterEventLogs():

    • Return Type: Task<ServiceResponse<List<EventLog<ProjectRegisterEventDTO>>>>

    • Description: Retrieves the event logs for project registration from the blockchain.

  2. GetWhiteListInsertEventLogs(string address):
    • Parameters:

      • address: The address for filtering the event logs.

    • Return Type: Task<ServiceResponse<List<EventLog<WhitelistInsertEventDTO>>>>

    • Description: Retrieves the event logs for whitelist insertions from the blockchain.

  3. GetWhiteListRemoveEventLogs(string address):
    • Parameters:

      • address: The address for filtering the event logs.

    • Return Type: Task<ServiceResponse<List<EventLog<WhitelistRemoveEventDTO>>>>

    • Description: Retrieves the event logs for whitelist removals from the blockchain.

  4. GetChainRole(string address):
    • Parameters:

      • address: The address of the user.

    • Return Type: Task<ServiceResponse<string>>

    • Description: Retrieves the chain role of a user based on their address.

  5. GetAuctionFromHash(string projectHash):
    • Parameters:

      • projectHash: The hash of the project.

    • Return Type: Task<ServiceResponse<string>>

    • Description: Retrieves the auction address associated with a project hash.

  6. IsAuctionCreatedInChain(string projectHash):
    • Parameters:

      • projectHash: The hash of the project.

    • Return Type: Task<ServiceResponse<bool>>

    • Description: Checks if an auction is created in the blockchain for a given project hash.

  7. IsAuctionStartedInChain(string projectHash)
    • Parameters:

      • projectHash: The hash of the project.

    • Return Type: Task<ServiceResponse<bool>>

    • Description: Checks if an auction is started in the blockchain for a given project hash.

  8. GetProjectEvaluationEventLogs():

    • Return Type: Task<ServiceResponse<List<EventLog<ProjectEvaluationEventDTO>>>>

    • Description: Retrieves the event logs for project evaluations from the blockchain.

IPFS Interaction Service

Class: IpfsInteractionService

Dependencies: - IIpfsInteractionService: An interface for IPFS interaction. - Newtonsoft.Json: A library for JSON serialization and deserialization. - ServiceResponse: A generic class for encapsulating service responses. - MessageConstants: A class containing message constants.

Methods:

  1. UploadToIpfs(string hexString, string? imageHex)
    • Parameters:

      • hexString: The hexadecimal string representing the file to upload.

      • imageHex: The optional hexadecimal string representing an image file to upload.

    • Return Type: Task<ServiceResponse<string>>

    • Description: Uploads a file or a file with an image to the IPFS network. It returns the hash of the uploaded content.

  2. RemoveFromIpfs(string encodedHash)
    • Parameters:

      • encodedHash: The encoded hash of the content to remove from IPFS.

    • Return Type: Task<ServiceResponse<bool>>

    • Description: Removes content from the IPFS network based on the encoded hash. It returns a boolean indicating the success of the removal operation.

Please note that the documentation provided here is a general outline. You may need to add more detailed explanations for each method based on your specific requirements.

Admin Change Event

Class: AdminChangeEventDTO

Properties:

  1. From

    • Type: address

    • Description: Represents the address of the previous admin.

  2. To

    • Type: address

    • Description: Represents the address of the new admin.

This class is decorated with the [Event(“AdminChange”)] attribute, indicating that it represents an event with the name “AdminChange”. It implements the IEventDTO interface provided by the Nethereum.Contracts namespace.

Please note that any required imports or namespace declarations should be included in your actual code, which have been omitted here for brevity.

Auction Finished Event

Class: AuctionFinishedEventDTO

Properties:

  1. Round

    • Type: uint

    • Description: Represents the round number associated with the finished auction.

  2. Price

    • Type: uint

    • Description: Represents the final price achieved in the auction.

This class is decorated with the [Event(“AuctionFinished”)] attribute, indicating that it represents an event with the name “AuctionFinished”. It implements the IEventDTO interface provided by the Nethereum.Contracts namespace.

Please note that any required imports or namespace declarations should be included in your actual code, which have been omitted here for brevity.

AuctionStartedEvent

Class: AuctionStartedEventDTO

Properties:

  1. Start

    • Type: uint

    • Description: Represents the start time of the auction.

  2. End

    • Type: uint

    • Description: Represents the end time of the auction.

This class is decorated with the [Event(“AuctionStarted”)] attribute, indicating that it represents an event with the name “AuctionStarted”. It implements the IEventDTO interface provided by the Nethereum.Contracts namespace.

Please note that any required imports or namespace declarations should be included in your actual code, which have been omitted here for brevity.

Bid Submission Event

Class: BidSubmissionEventDTO

Properties:

  1. Sender

    • Type: address

    • Description: Represents the address of the sender who submitted the bid.

  2. Amount

    • Type: uint256

    • Description: Represents the amount of the bid.

This class is decorated with the [Event(“BidSubmission”)] attribute, indicating that it represents an event with the name “BidSubmission”. It implements the IEventDTO interface provided by the Nethereum.Contracts namespace.

Please note that any required imports or namespace declarations should be included in your actual code, which have been omitted here for brevity.

Claim Tokens Event

Class: ClaimTokensEventDTO

Properties:

  1. Round

    • Type: uint

    • Description: Represents the round number associated with the token claim.

  2. Amount

    • Type: uint

    • Description: Represents the amount of tokens being claimed.

This class is decorated with the [Event(“ClaimTokens”)] attribute, indicating that it represents an event with the name “ClaimTokens”. It implements the IEventDTO interface provided by the Nethereum.Contracts namespace.

Please note that any required imports or namespace declarations should be included in your actual code, which have been omitted here for brevity.

Create Auction Event

Class: CreateAuctionEventDTO

Properties:

  1. Creator

    • Type: string

    • Description: Represents the address of the creator who initiated the auction.

  2. Auction

    • Type: string

    • Description: Represents the address of the created auction.

  3. AuctionType

    • Type: string

    • Description: Represents the type of the auction.

  4. FileHash

    • Type: byte[]

    • Description: Represents the hash of the associated file.

This class is decorated with the [Event(“CreateAuctionEvent”)] attribute, indicating that it represents an event with the name “CreateAuctionEvent”. It implements the IEventDTO interface provided by the Nethereum.Contracts namespace.

Please note that any required imports or namespace declarations should be included in your actual code, which have been omitted here for brevity.

Dutch Auction Bid Event

Class: DutchAuctionBidEventDTO

Properties:

  1. sender

    • Type: string

    • Description: Represents the address of the bidder who submitted the bid.

  2. Amount

    • Type: uint256

    • Description: Represents the amount of the bid.

  3. Price

    • Type: uint256

    • Description: Represents the price of the bid.

This class is decorated with the [Event(“BidSubmission”)] attribute, indicating that it represents an event with the name “BidSubmission”. It implements the IEventDTO interface provided by the Nethereum.Contracts namespace.

Please note that any required imports or namespace declarations should be included in your actual code, which have been omitted here for brevity.

Hash To Project

Class: HashToProjectDTO

Properties:

  1. proposerAddress

    • Type: string? (nullable string)

    • Description: Represents the address of the project proposer.

  2. tokenAddress

    • Type: string? (nullable string)

    • Description: Represents the address of the token associated with the project.

  3. auctionAddress

    • Type: string? (nullable string)

    • Description: Represents the address of the auction associated with the project.

  4. auctionType

    • Type: string? (nullable string)

    • Description: Represents the type of the auction associated with the project.

This class is used as an output DTO for the function HashToProject and allows retrieving project-related information based on a given hash.

Please note that any required imports or namespace declarations should be included in your actual code, which have been omitted here for brevity.

Project

Class: ProjectDTO

Properties:

  1. ProjectID

    • Type: int

    • Description: Represents the unique identifier of the project.

  2. ProjectName

    • Type: string

    • Default Value: “” (empty string)

    • Description: Represents the name of the project.

  3. Date

    • Type: Nullable<System.DateTime>

    • Description: Represents the date associated with the project.

  4. IsAuctionCreated

    • Type: bool

    • Default Value: false

    • Description: Represents whether an auction is created for the project.

  5. ProjectDescription

    • Type: string? (nullable string)

    • Description: Represents the description of the project.

  6. ImageUrl

    • Type: string? (nullable string)

    • Default Value: null

    • Description: Represents the URL of the project’s image.

  7. Rating

    • Type: double

    • Default Value: 0

    • Description: Represents the rating of the project.

  8. Status

    • Type: string

    • Default Value: ProjectStatusConstants.PENDING

    • Description: Represents the status of the project. The default value is obtained from the ProjectStatusConstants class in the SU_COIN_BACK_END.Constants namespace.

  9. MarkDown

    • Type: string

    • Default Value: “” (empty string)

    • Description: Represents the markdown content associated with the project.

  10. FileHash * Type: string * Default Value: “” (empty string) * Description: Represents the hash of a file associated with the project.

  11. ProposerAddress * Type: string? (nullable string) * Default Value: null * Description: Represents the address of the project proposer.

  12. ViewerAcceptedAddress * Type: string? (nullable string) * Default Value: null * Description: Respresents the address of the user that accept.

Project Evaluation Event

Class: ProjectEvaluationEventDTO

  • Attributes:

    • [Event(“ProjectEvaluation”)]: Decorates the class to indicate its association with the “ProjectEvaluation” event.

  • Implements: IEventDTO

Properties:

  1. Hash

    • Type: byte[]

    • Attribute: [Parameter(“bytes32”, “projectHash”, 1, true)]

      • Represents an indexed parameter of type “bytes32” with a name of “projectHash” and an order of 1.

    • Description: Represents the project hash as a byte array.

  2. isApproved

    • Type: bool

    • Attribute: [Parameter(“bool”, “isApproved”, 2, false)]

      • Represents a non*indexed parameter of type “bool” with a name of “isApproved” and an order of 2.

    • Description: Represents whether the project is approved.

This class is designed to deserialize the event data for the “ProjectEvaluation” event when working with Ethereum smart contracts in the backend of your project.

Please note that you might need to import additional dependencies and namespaces in your actual code, which have been excluded here for brevity.

Project Register Event

Class: ProjectRegisterEventDTO

  • Attributes:

    • [Event(“Register”)]: Decorates the class to indicate its association with the “Register” event.

  • Implements: IEventDTO

Properties:

  1. From

    • Type: string

    • Attribute: [Parameter(“address”, “from”, 1, true)]

      • Represents an indexed parameter of type “address” with a name of “from”.

    • Description: Represents the address of the event sender.

  2. Hash

    • Type: byte[]

    • Attribute: [Parameter(“bytes32”, “projectHash”, 2, false)]

      • Represents a non*indexed parameter of type “bytes32” with a name of “projectHash”.

    • Description: Represents the project hash as a byte array.

This class is utilized for deserializing event data related to the “Register” event when interacting with Ethereum smart contracts in the backend of your project.

Please ensure that you include the necessary import statements and namespaces in your actual code, which have been omitted here for conciseness.

Project Template

Class: ProjectTemplateDTO

Properties:

  1. ProjectID

    • Type: int

    • Description: Represents the ID of the project.

  2. ProjectName

    • Type: string

    • Description: Represents the name of the project.

  3. Abstract

    • Type: string

    • Description: Represents the abstract or summary of the project.

  4. ProjectDetails

    • Type: string

    • Description: Represents the detailed information about the project.

Please note that any required imports or namespace declarations should be included in your actual code, which have been omitted here for brevity.

Token Creation Event

Class: TokenCreationEventDTO

Properties:

  1. Creator

    • Type: string

    • Description: Represents the address of the creator of the token.

  2. Name

    • Type: string

    • Description: Represents the name of the token.

  3. Symbol

    • Type: string

    • Description: Represents the symbol or ticker of the token.

  4. TokenAddress

    • Type: string

    • Description: Represents the address of the token.

Please note that the event attribute [Event(“TokenCreation”)] indicates that this DTO represents the “TokenCreation” event. Any required imports or namespace declarations should be included in your actual code, which have been omitted here for brevity.

User

Class: UserDTO

Properties:

  1. Id

    • Type: int

    • Description: Represents the unique identifier of the user.

  2. Name

    • Type: string?

    • Description: Represents the name of the user.

  3. Surname

    • Type: string?

    • Description: Represents the surname of the user.

  4. Address

    • Type: string?

    • Description: Represents the address of the user. It is nullable.

  5. MailAddress

    • Type: string?

    • Description: Represents the email address of the user.

  6. Username

    • Type: string?

    • Description: Represents the username of the user.

  7. Role

    • Type: string?

    • Description: Represents the role of the user.

  8. Invitations

    • Type: List<ProjectPermission>?

    • Description: Represents the list of project permissions or invitations for the user. It is nullable.

Please note that any required imports or namespace declarations should be included in your actual code, which have been omitted here for brevity.

Vote Delegate Event

Class: VoteDelegateEventDTO

Properties:

  1. From

    • Type: string

    • Description: Represents the address of the delegate who cast the vote.

  2. To

    • Type: string

    • Description: Represents the address of the delegate who received the vote.

  3. Hash

    • Type: byte[]

    • Description: Represents the hash of the project for which the vote was cast.

  4. Weight

    • Type: uint

    • Description: Represents the weight or value of the vote.

Please note that any required imports or namespace declarations should be included in your actual code, which have been omitted here for brevity.

Vote Event

Class: VoteEventDTO

Properties:

  1. Hash

    • Type: byte[]

    • Description: Represents the hash of the project for which the vote was cast.

  2. From

    • Type: string

    • Description: Represents the address of the delegate who cast the vote.

  3. Decision

    • Type: bool

    • Description: Represents the decision of the vote (e.g., true for “yes” and false for “no”).

  4. Weight

    • Type: uint

    • Description: Represents the weight or value of the vote.

Please note that any required imports or namespace declarations should be included in your actual code, which have been omitted here for brevity.

HomeNew Component

The HomeNew component is located at:

frontend_react\src\components\HomeNew.js

This is the main page of the web application, which displays different projects and auctions. This component is built with React.

Key Features

  1. Data Fetching: Uses the axios library to fetch different data such as projects, users, and auctions from the backend.

  2. Displaying Auctions and Projects: Provides functionality to display a list of projects and auctions. Includes a carousel view to rotate through the list.

  3. Navigating to Details: Contains functions to handle navigation to the detail pages of individual projects and auctions.

  4. Statistics Display: Displays the total number of users, projects applied, and total SUCoins raised.

  5. Loading State Handling: Displays a loading icon while data is being fetched, transitioning to the actual content once data is ready.

The ProjectList Component

The ProjectList component is located at:

frontend_react/src/components/ProjectList.js

Overview

The ProjectList component displays a list of projects in the web application. It is responsible for fetching the project data from the backend, allowing for filtering by project status, and rendering the project data in a grid format.

Key Features

  • Data Fetching: Fetches project data from the backend using axios.

  • Role and Token Handling: Retrieves the user role from the token stored in cookies. It uses this to determine what projects should be displayed based on the role of the user.

  • Project Filtering: Allows for filtering the displayed projects by their status (e.g., all, approved, pending, rejected).

  • Grid Display: Displays projects in a grid format using the SimpleGrid component from @chakra-ui/react.

  • Loading State Handling: Displays a loading icon while project data is being fetched, transitioning to the actual content once data is ready.

The CreateTokens Component

The CreateTokens component is found at:

frontend_react/src/components/CreateTokens.js

Overview

CreateTokens is a React component responsible for creating tokens in the application. It leverages the ethers.js library to interact with Ethereum-based contracts. User can input the name, symbol, and total supply of the token to be created.

Key Features

  • State Management: It uses React’s useState hook to manage state within the component.

  • Ethereum Interactions: Interacts with Ethereum contracts through the ethers.js library.

  • Error Handling: Error messages are displayed to the user via the Mantine NotificationsProvider.

  • Input Handling: Handles user input for token parameters such as tokenName, tokenSymbol, and totalSupply.

  • Contract Interaction: The component leverages the Maestro contract’s createToken function to mint new tokens.

  • Toast Notifications: Handles display of toast notifications via Mantine’s NotificationsProvider.

CreateAuction Component

Location

The CreateAuction component is located at:

frontend_react/src/components/CreateAuction.js

Overview

The CreateAuction component handles the creation of a new auction on the blockchain. It offers a selection of different auction types for users and generates the appropriate form for the selected auction type where users can specify the necessary parameters.

Key Features

  1. Auction Type Selection: The component provides several options for the auction type, such as uncapped auction, pseudo capped auction, order book FCFS auction, FCFS auction, Dutch auction, orderbook Dutch auction, and strict Dutch auction.

  2. Dynamic Form Generation: Based on the selected auction type, the component dynamically generates the necessary input fields for the user.

  3. Auction Creation: This component interacts with the blockchain via the Maestro contract to create an auction with the specified parameters.

  4. Database Update: After successful creation of the auction on the blockchain, it updates the database to reflect the created auction.

  5. Error Handling and Notifications: The component provides feedback to the user via notifications, including success notifications and error messages.

Auctions Component

Location

The Auctions component is located at:

frontend_react/src/components/Auctions.js

Overview

The Auctions component retrieves and displays a list of all auctions from the blockchain. It allows filtering auctions based on their status, like “Off”, “Running”, “Paused”, “Ended”, or “All”. Each auction is represented as a card, utilizing the AuctionCard component.

Key Features

  1. Auction Retrieval: This component retrieves auctions from the blockchain using the Maestro contract.

  2. Auction Filtering: Auctions can be filtered by their status, allowing users to view auctions that are off, running, paused, ended, or all auctions regardless of status.

  3. Auction Display: Each auction is displayed as a card on the user interface, which includes key information about the auction such as the project name, description, and auction type.

  4. Error Handling and Notifications: The component provides feedback to the user via notifications in the event of errors. It utilizes the NotificationsProvider from @mantine/notifications for this purpose.

  5. Loading State: The component displays a loading icon while it fetches the auction data from the blockchain.

Project Component

The Project component is found at:

frontend_react/src/components/Project.js

Overview

The Project component is a key part of a frontend React application likely designed for a Decentralized Application (DApp) or blockchain-related project. It employs the ethers.js library for interaction with the Ethereum blockchain and uses the InterPlanetary File System (IPFS) for decentralized file storage.

Key Features

  • Manages a multitude of states for project information, markdown description, whitelisting status, and more.

  • Uses React’s useState and useEffect hooks for state management and updating.

  • Interacts with the ProjectRegister smart contract on the Ethereum blockchain.

  • Handles user navigation between routes.

  • Includes functions for editing and submitting changes, as well as fetching files from IPFS.

  • Utilizes cookies for likely user authentication purposes.

Auction Component

The Auction component is found at:

frontend_react/src/components/Auction.js

Overview

The Auction component is a fundamental component of a frontend React application for handling auctions, particularly in the context of a Decentralized Application (DApp) or blockchain-related project. It is found in the frontend_react/src/components/ directory and is named Auction.js. It makes use of the ethers.js library for interaction with the Ethereum blockchain and employs the InterPlanetary File System (IPFS) for decentralized file storage.

Key Features

  • Manages states related to auction details, images, finish time, current data, loading status, and historic data.

  • Uses React’s useState and useEffect hooks for state management and side-effects handling.

  • Interacts with the UpgradeableAuctions smart contract on the Ethereum blockchain.

  • Utilizes multiple functions to fetch and manipulate auction data, including historical data.

  • Contains a variety of auction types with corresponding information and controls.

  • Renders progress circular progress bars to display the progress of the auction and sold token progress.

  • Includes the PriceChart component to visually represent price data over time.

  • Handles downloading of files from IPFS.

  • Uses the Mantine UI library for theming and notifications.

Profile Page Component

The Profile Page component is found at:

frontend_react/src/components/ProfilePage.js

Overview

ProfilePage.js is a React component that provides the profile page of a user. The page displays user information and their associated projects. The file is primarily composed of functional components, hooks, and several asynchronous operations to interact with the back-end service.

Features

  • User Information: Displays user’s name, surname, email, and username. There is an option for users to edit their information.

  • Projects: Shows all the projects the user has permission to access. Each project card has options to edit, delete, and send an invitation request for the project.

  • Invitations: Displays all the invitations the user has received. Each invitation card has options to accept or reject the invitation.

  • Loading State: Includes a loading state to handle asynchronous operations.

NotAuthorized Component

The NotAuthorized component is found at:

frontend_react/src/components/NotAuthorized.js

Overview

The NotAuthorized component is used to display an authorization error message to the user, indicating that they do not have the necessary permissions to view the page they attempted to access. After a delay of 3000 milliseconds (3 seconds), the component automatically redirects the user to the root (‘/’) route.

Features

  1. Redirect Delay: Utilizes a custom delay function which returns a Promise that resolves after a specified time period. In this case, a delay of 3000 milliseconds is implemented.

  2. Navigation: Uses the useNavigate hook from React Router DOM for navigation. After the delay, the user is redirected to the home route (‘/’).

  3. Styling: The component returns a div with a centered message. The styling is applied inline and includes flexbox centering, a full viewport height, and specific font properties.

  4. Effect: The side effect of redirecting the user after a delay is handled in the useEffect hook, which executes upon component mount.

Usage

This component is intended to be used when a user tries to access a restricted page without the necessary permissions.

Viewer Component

The Viewer component is found at:

frontend_react/src/components/Viewer.js

Overview

The Viewer.js file defines a single React functional component called Viewer. This component is responsible for displaying a list of projects and providing functionality to manage these projects.

Description

The Viewer component retrieves a list of projects from a backend server, displays them in a table, and allows the user to accept, reject, or download each project’s PDF file.

Features

  1. State Management: Utilizes React’s useState and useEffect hooks for managing component state and side effects. The state includes a list of projects and details of each project like ID and fileHash.

  2. API Calls: Uses the Axios library to send HTTP requests to a backend server. The server’s URL is stored in a separate config file.

  3. Authentication: Includes an authentication header in API requests. This header is set to a Bearer token stored in a cookie.

  4. File Downloading: Downloads a project’s PDF file from the IPFS (InterPlanetary File System) when the corresponding button is clicked. The downloaded file is then saved to the user’s device.

  5. Project Management: Allows the user to accept or reject a project. When a project is accepted or rejected, an API request is sent to update the project’s status on the backend server.

Usage

The Viewer component is intended to be used when there is a need to display a list of projects and allow a user to manage these projects by accepting, rejecting, or downloading their associated files.

Admin Component

The Admin component is found at:

frontend_react/src/components/Admin.jsx

Overview

The Admin.jsx file defines a single React functional component named Admin. This component provides administrative control over users, projects, and auctions in the system.

Description

The Admin component displays a tab-based interface with three sections: “User Operations”, “Project Operations”, and “Auction Operations”. Each section is filled with different subcomponents, namely UserBox, ProjectBox, and AuctionBox respectively. The role of each subcomponent is to manage the corresponding section.

Features

  1. Tab Interface: Utilizes the Tabs, TabList, TabPanels, Tab, and TabPanel components from the ‘@chakra-ui/react’ library to create a tab-based interface.

  2. Section Management: Each section/tab has its associated Box component (UserBox, ProjectBox, AuctionBox) for managing operations related to users, projects, and auctions.

  3. State Management: Uses the React useState hook for managing the selected user in the UserBox component.

  4. Notification: Integrates the useToast function from the ‘@chakra-ui/react’ library for displaying notifications to the admin.

Usage

The Admin component is intended for use by system administrators for management of users, projects, and auctions within the system.

About Component

The About component is found at:

frontend_react/src/components/About/About.js

Overview

The About.js file defines a single React functional component named About. This component presents information about the project and the team of developers who created it.

Description

The About component has two main sections: an overview of the “SuLaunch” project and a list of project members. The overview section describes the project’s aims, motivation, and the technologies used. The project members’ section displays a list of team members, their roles, and their contact information.

Features

  1. Project Information: Provides a detailed description of the SuLaunch project, its aims, technology used, and motivation.

  2. Project Members: Lists the team members who developed the project, along with their roles, contact information, and images.

  3. Data Mapping: Uses the map function to render each developer’s information from a local array of developer objects.

  4. Styling and Layout: Uses various components from the ‘@mantine/core’ library, such as Text, Avatar, Card, Image, Group, and Badge, to create a visually pleasing and well-structured layout.

  5. Conditional Rendering: Utilizes a ternary operator to conditionally render either an Image or an Avatar component based on the availability of the developer’s image URL.

Usage

The About component is used to provide information about the SuLaunch project and the team of developers who worked on it. It can be used in any part of the application where this information needs to be displayed.

UserNotVerified Component

The UserNotVerified component is found at:

frontend_react/src/components/UserNotVerified.js

Overview

The UserNotVerified.js file defines a single React functional component named UserNotVerified. This component is displayed to the user when the verification link they are trying to use has expired.

Description

The UserNotVerified component is a simple component that displays a message to the user stating that the verification link they are trying to use has expired, and instructs them to fill out the sign-up form again. After a delay of three seconds, the user is automatically redirected to the home page.

Features

  1. Redirection: Uses the ‘react-router-dom’ library’s useNavigate hook to perform the redirection after a delay.

  2. Delay Mechanism: Uses a custom delay function wrapped in a Promise to create a delay before performing the redirection.

  3. useEffect Hook: Uses React’s useEffect hook to call the delay function and navigate function when the component is first rendered.

  4. Styling and Layout: Uses inline CSS styling to center the message text vertically and horizontally in the viewport. Also sets the font family, font weight, and font size of the message.

Usage

The UserNotVerified component is used when the user tries to access a resource with an expired verification link. It informs the user of the situation and redirects them to the home page after a short delay.

UserVerified Component

The UserVerified component is found at:

frontend_react/src/components/UserVerified.js

Overview

The UserVerified.js file defines a single React functional component named UserVerified. This component is displayed to the user when their email address has been successfully verified.

Description

The UserVerified component is a simple component that displays a message to the user confirming their email verification and welcoming them to enjoy using SuLaunch. After a delay of three seconds, the user is automatically redirected to the home page.

Features

  1. Redirection: Uses the ‘react-router-dom’ library’s useNavigate hook to perform the redirection after a delay.

  2. Delay Mechanism: Uses a custom delay function wrapped in a Promise to create a delay before performing the redirection.

  3. useEffect Hook: Uses React’s useEffect hook to call the delay function and navigate function when the component is first rendered.

  4. Styling and Layout: Uses inline CSS styling to center the message text vertically and horizontally in the viewport. Also sets the font family, font weight, and font size of the message.

Usage

The UserVerified component is used when a user’s email address has been successfully verified. It informs the user of the successful verification and redirects them to the home page after a short delay.

Apply Component

The Apply component is found at:

rontend_react/src/components/Apply.js

Overview

Apply is a React component that provides the user interface for a form that accepts project details and saves them in a blockchain database.

Key Features

  • User Authentication: Uses axios to handle API requests for user authentication, and uses cookies for managing tokens.

  • Project Registration: Users can submit project details including the project name, a description, a whitepaper (in PDF format), and an image. This data is sent to a backend server and also added to the blockchain.

  • Notification System: Uses the Mantine Notification system to show progress and result notifications.

  • File Uploads: Supports uploading of PDF and image files. The PDF is meant to be the project whitepaper and the image is the project image. Both are processed and stored as hexadecimal strings.

  • Form Validation: The form uses React Bootstrap’s built-in validation.

  • File Download: There is a function that converts the whitepaper file from a hexadecimal string back to a file and triggers a download.

  • Ethereum Smart Contract Interaction: The component interacts with an Ethereum smart contract to register the project.

  • React Context: Uses the UserContext for managing user data.

Functions

The following list includes some of the functions that the Apply component uses:

  • connectToContract: This function is used to connect with an Ethereum smart contract and register a project.

  • handleDB: This function posts the project details to the backend server and saves them in a database.

  • downloadFile: This function triggers the download of the whitepaper file.

  • handleInput: This function handles the form inputs.

  • handleSubmit: This function handles form submission.

  • SetWhitePaper: This function handles the uploading and processing of the whitepaper file.

  • SetImage: This function handles the uploading and processing of the image file.

Sub-Components

  • MyDropzone: This is a dropzone component for uploading files. It handles the drag-and-drop file uploading process.

HowToUse Component

The HowToUse component is found at:

frontend_react/src/components/HowToUse.js

Overview

HowToUse is a React component that is primarily used to redirect users to an external website that contains the ‘how to use’ guide of the project.

Key Features

  • Redirect: On component mount, the useEffect React hook is used to redirect the user to the “how to use” guide hosted on an external site (https://umutondersu.github.io/Sulaunch/).

  • Placeholder: While the page is redirecting, a message “Redirecting…” is displayed to the user. This can be replaced with a loading gif or any other visual cue to indicate the ongoing redirection.

Functions

The component makes use of the following JavaScript function:

  • useEffect: This is a React hook that is used to perform side-effects in the component. In this case, it is used to execute the redirection when the component is rendered.