Build Your Own Crypto Portfolio Tracker With Hatchfi Link

Overview

In this guide, you'll be building your own white-label crypto portfolio tracker built with Vue3 and Vite. This portfolio tracker uses the Hatchfi API and Hatchfi Link to connect an end-users crypto account to the tracker. You can see the demo in action here.

If you need help setting this up, please join our Developer Discord Community and contact any of the Hatchfi team for assistance.

Getting Started

First, to get started. You'll need to create an account and get your free API keys. You can sign up here. If you already have an account, please head over to your Developer Dashboard and log in with your credentials.

Head over to our GitHub and clone the portfolio tracker repo.

What you need from the developer dashboard project:

API Key
SecretKey
ClientID

Items to replace within the code

In the ConnectHatchfi.vue file, find the linkUrl var and replace the <INSERT_CLIENT_ID_HERE> with your clientId

let linkUrl = ref("https://link.hatchfi.co/?clientId=<INSERT_CLIENT_ID_HERE>&token=<USER_GENERATED_TOKEN>");

Next, Replace the userId var on line 9 with an end-user username of your choice.

let userId = "REPLACE_ME";

We recommend using a UUID for complete anonymity in production environments, but for this tracker, you can use whatever you'd like.

In the index.js file, we have a clientId, secretKey, and APIkey that will need to be replaced on lines 12 to 14. Again, you can get this info from the Project tab in the Developer Dashboard.

Once you have the above VARS replaced, you'll be able to run your portfolio app using Hatchfi to connect your users' crypto accounts!

Getting your app running on localhost

Below are the commands to install and run the portfolio tracker on your computer.

📘
Please note that two servers must run in tandem, the front end, and the server. These steps below must be completed in both the root and server folders.

Install NPM Packages

npm install

Compile and Hot-Reload for Development

npm run dev