Overview

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.

Tool	Description	Repository/Library	Documentation
Grindery Nexus API Client	JS wrapper for Nexus engine API	Grindery Nexus API Client - Github Grindery Nexus API Client - NPM	Nexus API Client doc
Grindery UI React components	Reusable React components library for Grindery projects	Grindery UI - Github Grindery UI - NPM	Grindery UI doc
Grindery Nexus React hook	React Hook for managing Grindery Nexus user authentication	Nexus React hook - Github Nexus React hook - NPM	Nexus React hook doc
ㅤ	ㅤ	ㅤ	ㅤ
Use Case	Description	Github Repository	Live link
Ping by Grindery	Get wallet deposit notification on your browser	Grindery Ping	https://ping.grindery.org/

Quickstarts

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

javascript
yarn add grindery-nexus-client

javascript
npm install grindery-nexus-client

Import client class

javascript
import NexusClient from 'grindery-nexus-client';

Init client

javascript
const client = new NexusClient();

Set authentication token

javascript
client.authenticate('{userToken}');

Call client methods

javascript
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

javascript
yarn add grindery-ui

javascript
npm install grindery-ui

Add components to your React app

First, add Theme Provider at the highest level possible.

javascript
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:

javascript
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

javascript
yarn add use-grindery-nexus

javascript
npm install use-grindery-nexus

Add Provider component to your React app

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

Use hook in your components to access user context

javascript
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="https://metamask.io/" 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): https://github.com/grindery-io/grindery-nexus-client/blob/master/DOCUMENTATION.md

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:

Web client gets user wallet address using MetaMask.

Web client sends the user wallet address to the Nexus auth server, and receives a challenge message.

User signs the message using the MetaMask extension.

Web client compiles challenge message and signature into a “code” string, and sends to Nexus auth server.

Nexus auth server returns an access token that can be used to access the Nexus API.

Check out the complete documentation for the Nexus Authentication process.

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 ping.grindery.org and clicking Connect Wallet.

Check out the Ping Github repository here. You can also read the how-to guide.

Grindery SDK for apps/dApps development

Overview

Quickstarts

Grindery Nexus API Client

Install library

Import client class

Init client

Set authentication token

Call client methods

Grindery UI React Components

Install library

Add components to your React app

Grindery Nexus React Hook

Install library

Add Provider component to your React app

Use hook in your components to access user context

Grindery Nexus Authentication Process

Use Case: Ping by Grindery