Local Environment Setup

This tutorial will help get your local environment setup and show you how to secure your setup for the local wallet pairings. You will also configure environment variables to use the Pinata IPFS API. By the end of this guide, you’ll have your local environment set up and configured to run the HashioDAO application locally.

Prerequisites

• The Vercel CLI installed.

• A Pinata account created.

• Git command line and TypeScript >= 4.7 installed.

---

Step 1: Project Installation

Open a new terminal and navigate to your preferred directory where you want your project to live. Clone the repo and install dependencies using these commands:

git clone https://github.com/hashgraph/hedera-accelerator-defi-dex-ui.git
yarn install

These commands clone the project repository onto your local machine and install all the necessary dependencies using the yarn package manager.

---

Step 2: Local Environment Setup

Setup HTTPS for Local Wallet Pairing

The HashioDAO app utilizes the hashconnect library to pair with supported wallet extensions. Currently, the only supported wallet extension is HashPack. The HashConnect 1-click pairing feature only works in an SSL secured environment (https URLs). Enable HTTPS in your local build by creating a .env file in the root of this project and adding the HTTPS environment variable to it.

Add the HTTPS environment variable to your .env file and set it to true:

.env

HTTPS=true

Create an SSL certificate. There are several tools that can be used to generate a certificate and key. An easy way to do this is to use the mkcert tool.

Install mkcert via Homebrew (on macOS):

# The [Homebrew](https://brew.sh/) macOS package manager is used for this example

# Install mkcert tool
brew install mkcert

# Install nss (only needed if you use Firefox)
brew install nss

# Setup mkcert on your machine (creates a CA)
mkcert -install

Generate the certificate and key, storing them in a .cert directory:

# Create a directory to store the certificate and key
mkdir -p .cert

# Generate the certificate (ran from the root of this project)
mkcert -key-file ./.cert/key.pem -cert-file ./.cert/cert.pem "localhost"

Set the SSL_CRT_FILE and SSL_CRT_FILE environment variables to the path of the certificate and key files. Add the variables to your .env file:

.env

/* Path to certificate */
SSL_CRT_FILE=./.cert/cert.pem

/* Path to key */
SSL_KEY_FILE=./.cert/key.pem

Note: Make sure to include .env and .cert in your .gitignore file so this information is not committed to version control.

Setup Pinata Environment Variables

The HashioDAO app stores and retrieves IPFS data using Pinata. A Pinata public key, secret key, and gateway URL are necessary for IPFS pinning and fetching features to work as intended. If you have not already done so, create a Pinata account to generate a new set of keys and a gateway URL.

Add the below environment variables to your .env file to use the Pinata IPFS API:

.env

PRIVATE_PINATA_API_KEY=/** Public Key **/
PRIVATE_PINATA_API_SECRET_KEY=/** Secret Key **/
VITE_PUBLIC_PINATA_GATEWAY_URL=/** Gateway URL **/

A more comprehensive tutorial can be found in the Pinata API Docs.

---

Step 3: Run Application

Run the application using the below command:

vercel dev

This command will start your application, and you should see an https:// prefixed URL for your local server, indicating that HTTPS is successfully enabled.

---

Additional Resources

➡ HashioDAO Repository

➡ Pinata API Documentation

➡ HashPack Documentation