Grindery SDK for apps/dApps development 

Last updated by Jamiu Idowu 7 days ago

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 

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

Import client class 

import NexusClient from 'grindery-nexus-client'; 

Init client 

const client = new NexusClient(); 

Set authentication token 

client.authenticate('{userToken}'); 

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 
OR  
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 
OR 
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="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. 
 

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 . 
Image 1  
Refreshed On: Dec 06, 2022 02:34:16 UTC+00:00