Grindery SDK for apps/dApps development


The Grindery SDK for apps and dApps contains a set of tools that can help you get started with integrating your apps and dApps with Grindery quickly. You will be able to duplicate and reuse our high-quality code in multiple contexts. These tools include the Grindery Nexus API client, Grindery UI React components, and Nexus React hook. In addition, Ping by Grindery is provided as a use case. It is important to point out that all codes are open source, and we welcome contributions and bug reports from you and the entire community.
Grindery Nexus API Client
JS wrapper for Nexus engine API
Grindery UI React components
Reusable React components library for Grindery projects
Grindery Nexus React hook
React Hook for managing Grindery Nexus user authentication
Use Case
Github Repository
Live link
Ping by Grindery
Get wallet deposit notification on your browser


Grindery Nexus API Client

Grindery Nexus API client is the JS wrapper for Nexus engine API. To use the Nexus API client, take the following steps:

Install library

yarn add grindery-nexus-client
npm install grindery-nexus-client

Import client class

import NexusClient from 'grindery-nexus-client';

Init client

const client = new NexusClient();

Set authentication token


Call client methods

const listWorkflows = async () => { const workflows = await client.listWorkflows(); };
For more details on this, you can check out the full documentation of Nexus API client.

Grindery UI React Components

Grindery UI is a reusable ReactJS components library for Grindery projects, and it is based on Material UI. To use, take the following steps:

Install library

yarn add grindery-ui
npm install grindery-ui

Add components to your React app

First, add Theme Provider at the highest level possible.
import { ThemeProvider } from "grindery-ui"; const App = () => { return ( <ThemeProvider> <RestOfTheApp /> </ThemeProvider> ); };
Then, you can import and use the rest of the components inside your app:
import { CircularProgress } from "grindery-ui"; const RestOfTheApp = () => { return <CircularProgress />; };
For more examples, check out the Grindery UI documentation.

Grindery Nexus React Hook

This is the React Hook for managing Grindery Nexus user authentication. To use the Nexus React Hook, take the following steps:

Install library

yarn add use-grindery-nexus
npm install use-grindery-nexus

Add Provider component to your React app

import GrinderyNexusContextProvider from 'use-grindery-nexus'; const App = () => { return ( <GrinderyNexusContextProvider> {/* your app components */} </GrinderyNexusContextProvider> ); };

Use hook in your components to access user context

import { useGrinderyNexus } from "use-grindery-nexus"; const AuthenticationButton = () => { const { user, connect, disconnect } = useGrinderyNexus(); if(user){ return ( <button onClick={() => { disconnect(); }}>Disconnect</button> ) } if(!"ethereum" in window){ return ( <p> An injected Ethereum provider such as{" "} <a href="" target="_blank" rel="noreferrer"> MetaMask </a>{" "} is needed to authenticate. </p> ) } return !user ? ( <button onClick={() => { connect(); }} >Connect</button> ) : null; }

Grindery Nexus Authentication Process

You need authentication to use the Nexus API (read/edit/create/delete workflows, etc):
The authentication flow is compliant with OAuth2 standard. It requires users to sign an authentication message using their MetaMask wallets. In a nutshell, the Grindery Nexus Authentication flow is as follows:
  1. Web client gets user wallet address using MetaMask.
  1. Web client sends the user wallet address to the Nexus auth server, and receives a challenge message.
  1. User signs the message using the MetaMask extension.
  1. Web client compiles challenge message and signature into a “code” string, and sends to Nexus auth server.
  1. Nexus auth server returns an access token that can be used to access the Nexus API.

Use Case: Ping by Grindery

Ping is an example of a typical app that can be built with Grindery tools. It is an app that sends you a browser notification when a token is deposited to any of your wallets on any blockchain. It’s easy, seamless, and completely free. You can use and test the app by going to  and clicking  Connect Wallet.
Check out the Ping Github repository here. You can also read the how-to guide.
Image without caption