Skip to main content
Version: V1

Introduction and Prerequisites

Scaffold-ETH is a collection of common Ethereum development tools for developers to quickly deploy Solidity smart contracts and launch DApps with a React frontend and a deployed subgraph. There are premade templates for common DApp types such as NFTs, ERC-20 tokens, multi-sig wallets, simple DEXs, etc.

This CyberConnect Starter Kit integrates CyberConnect SDK and API to Scaffold-ETH so that developers can have a general sense of how easy it is to build and launch DApps with CyberConnect features including reading an address’s identity, its social connections, and allowing users to follow and unfollow each other.

Check out the video tutorial here.

Prerequisites​

Install Scaffold-ETH​

We'll be working with the Scaffold-ETH. For installation, simply run:

git clone https://github.com/scaffold-eth/scaffold-eth.git

After the download completes, run:

yarn install

Once the dependencies have been installed without error, you can start modifying the different Scaffold-ETH components.

Install Dependencies​

Go to the React frontend directory:

cd packages\react-app

Run:

yarn add @cyberlab/cyberconnect graphql graphql-request babel-core babel-preset-env gulp-babel

To learn more about CyberConnect JS SDK, please read Connect with JS SDK. We are using GraphQL to query our data, you can check this link to learn more. graphql-request is the simplest and the most lightweight GraphQL client. @babel/preset-env is a toolchain for converting ECMAScript 2015+ code into a backward-compatible version of JavaScript in the current and legend browsers and environments.

Modify Configuration​

  • Open packages\react-app\gulpfile.js and modify the code as follows:
packages\react-app\gulpfile.js
const gulp = require("gulp");
const gulpless = require("gulp-less");
const postcss = require("gulp-postcss");
const debug = require("gulp-debug");
var csso = require("gulp-csso");
const autoprefixer = require("autoprefixer");
const NpmImportPlugin = require("less-plugin-npm-import");
const babel = require("gulp-babel");

gulp.task(
  "less",
  gulp.parallel(
    function () {
      const plugins = [autoprefixer()];

      return gulp
        .src("src/themes/*-theme.less")
        .pipe(debug({ title: "Less files:" }))
        .pipe(
          gulpless({
            javascriptEnabled: true,
            plugins: [new NpmImportPlugin({ prefix: "~" })],
          }),
        )
        .pipe(postcss(plugins))
        .pipe(
          csso({
            debug: true,
          }),
        )
        .pipe(gulp.dest("./public"));
    },
    () =>
      gulp
        .src("src/app.js")
        .pipe(
          babel({
            plugins: ["@babel/transform-runtime"],
          }),
        )
        .pipe(gulp.dest("./public")),
  ),
);
Designed by