Code Monkey home page Code Monkey logo

covalent-nextjs-starter's Introduction

Next.js-Covalent Starter Framework

This project is a wrapper of Covalent APIs that tend to assist the front-end developers in creating their Next.js based application with Covalent more easily.

The framework provides an ability to automate retrieving chain & address data from the caller’s wallets on active browser extensions. Firstly, the framework automatically retrieves the developer's chain & address information by using the Web3Modal library. Then, these data will be automatically parsed and used as parameters to call Covalents APIs.

So that, by using this framework, developers don’t need to configure their chain & address data manually in each call! Developers can quickly start their Next.js project natively built with Covalent API. They do not need to mess up on these pieces of stuff. All they have to do is to work on the front-end side of their application.

All in all, the framework acts as the starter kit that wraps sets of Covalent API calls into more easy-to-use functions.


Data provider / APIs

All routes of Covalent API are supported and can be called through the framework. Please use the Covalent API's official document as the reference.


Technology stacks

This project is built as a serverless system, getting inspiration from the Covalent AWS Serverless project.

The technologies used include

  • Next.js is used as the base technology framework of the project.
  • Web3Modal library is used for adding support for multiple providers in their apps with a simple customizable configuration.
  • Covalent AWS Serverless is used as a bridge of requesting data from Covalent's endpoints with our serverless setup.

Serverless Setup

Kindly follow the setup instruction from the README.md of the Covalent AWS Serverless project.


Local Run

  • Install dependencies

    npm install
    
  • Set the value of the NEXT_PUBLIC_COVALENT_API_URL variable, that you got in the serverless setup step, in the .env file.

  • Run on localhost:3000

    npm run dev
    

Example API call

import { useState, useEffect } from 'react'
import { getTokenBalancesData } from '../lib/class-a' // class-a | class-b | pricing
import { actionTypes } from '../store'

export default function() {
  const wallet = useSelector(state => state[actionTypes.WALLET])
  const [balancesData, setBalancesData] = useState([])

  useEffect(() => {
    const response = await getTokenBalancesData(wallet) // GET /v1/{chain_id}/address/{address}/balances_v2/
    setBalancesData(response ? response.items : [])
  }, [wallet])
}

covalent-nextjs-starter's People

Contributors

pjenviri avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.