YieldScan

Maximizing staking yield on substrate based networks(supported networks: Kusama and Polkadot). Currently, the app can be used on https://yieldscan.app .

Table of contents

• Currently supported networks
• Description
• Development
  • Contribution Guide
  • Codebase Overview
  • Pre-requisites
  • Development guide
• Gratitude

Currently supported networks

• Kusama Network
• Polkadot Network

Description

YieldScan is a portfolio management platform for NPoS (nominated proof-of-stake) networks like Kusama and Polkadot. We aim to simplify portfolio management to make yield optimization easier and more accessible, for technical and non-technical users alike.

This project is funded and supported by the Web3 Foundation - under Wave 6.

Development

We are always working on improving our codebase, and welcome any suggestions or contributions.

Contribution Guide

1. Create an issue for the improvement.

2. Fork the repo and make changes. Make sure to checkout from develop branch before starting.

3. Make a PR to develop branch.

Codebase Overview

Important packages:

• components/overview: User profile dashboard. This displays staked amount, nominated validators and estimated APY, it also handles bond-extra, rebond and withdraw operations for the nominator/user:

  • InvestMoreModal: Handles the bond extra operation.
  • WithdrawModal: Handles the chill and unbonding operations.
  • RedeemUnbonded: Handles the withdraw unbonded operation.
  • ReBondModal: Handles the rebonding the unbonding amount operations.

• components/reward-calculator: Provides user with the auto-generated validator sets of low, medium and high risks depending on the calculated estimated staking returns and risk-scores.

• components/staking: This module handles different staking flows for different cases:

  • StakeToEarn: Distinct stash controller.
  • Confirmation: Same stash controller.
  • SecureStakeToEarn: For onboarding new users to the best practices in the ecosystem.

• components/staking/stepperSignerPopover: For handling signing multiple transactions one by one.

• components/validators: This is for DYOR users for selecting the validators for staking based on different validator stats.

Pre-requisites

• yieldscan-crawler
• yieldscan-api

Development guide

• Clone this or forked repository:

  git clone https://github.com/yieldscan/yieldscan-frontend.git

• Install the dependencies:

  yarn

• Add environment variables in .env.local or .env file:

  # Main API endpoint
  NEXT_PUBLIC_API_BASE_URL="http://localhost:5000/api"
  # or NEXT_PUBLIC_API_BASE_URL="<base-url-of-deployed/local-api>/api"
  
  # Manage Testnets, if true westend will be enabled
  NEXT_PUBLIC_TESTNETS_ENABLED=true
  
  # Network Endpoints
  NEXT_PUBLIC_POLKADOT="wss://polkadot.api.onfinality.io/public-ws"
  NEXT_PUBLIC_KUSAMA="wss://kusama-rpc.polkadot.io"
  NEXT_PUBLIC_WESTEND="wss://westend-rpc.polkadot.io"

  Note: Checkout backend crawler and api.

  Useful resources:

  • Fathom
  • Metomic
  • Sentry

• Run the development server:

  Note: Make sure api and crawler services are up and running

  yarn dev

  Open http://localhost:3000 with your browser to see the result.

  You can start editing any page by modifying pages/<page>.js. The page auto-updates as you edit the file.

• Creating a new user flow?

  • Create a new page in pages/<page>.js
  • Create a layout if needed in components/common/layouts else use components/common/layouts/base.js
  • Create the page's root component in components/<page>/index.js

Git commit

Run yarn git:commit for commiting your code and follow the process

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

Docker

You can run a docker container via -

docker run -p 3000:3000 -e NEXT_PUBLIC_API_BASE_URL=<base-url-of-deployed/local-api> -t yieldscan-frontend

after running you can access the UI via http://localhost:3000

Tests

You can run tests via -

yarn test

Gratitude