Skip to content

Latest commit

 

History

History
142 lines (98 loc) · 6.39 KB

user_guide.md

File metadata and controls

142 lines (98 loc) · 6.39 KB
Raw

Singularity Web SDK Boilerplate User Guide

Welcome to the Singularity Web SDK Boilerplate User Guide! This document will provide step-by-step instructions on setting up, configuring, and using the boilerplate project to integrate with SingularityNET services.

Step 1. Dependencies

Before you begin, ensure you have the Node.js (v18 or higher) installed on your machine

If you don't have Node.js installed, you can follow the official installation instructions provided by Node.js:

Go to the official Node.js website: Node.js Download. Follow the instructions for your specific operating system (Windows, macOS, or Linux). These instructions will guide you through the process of downloading and installing the latest version of Node.js, including npm, the Node.js package manager.

After installation, verify that Node.js was installed correctly by running the following command in your terminal:

  node -v

Ensure that the version displayed is v18 or higher.

Step 2. Installation

Follow these steps to set up the project:

  1. Clone the repository and navigate to the directory:
  git clone https://github.com/singnet/Web-JS-SDK-Boilerplate
  cd Web-JS-SDK-Boilerplate
  1. Copy the .env.example file to .env and update the values as necessary:
  cp .env.example .env
  1. Configure environment variables

The project requires certain environment variables to be set in the .env file. Below is a list of the required variables and their descriptions:

Variable Name Description Where to Get It
REACT_APP_ENV Specifies the environment (development or production). Set this manually.
REACT_APP_ALCHEMY_API_KEY API key for accessing Alchemy services. Alchemy API Keys
REACT_APP_PARTICLE_AUTH_PROJECT_ID Project ID for Particle authentication. Particle Network
REACT_APP_PARTICLE_AUTH_CLIENT_KEY Client key for Particle authentication. Particle Network
REACT_APP_PARTICLE_AUTH_APP_ID Application ID for Particle authentication. Particle Network
REACT_APP_NETWORK Specifies the blockchain network to connect to (mainnet or sepolia). Set this manually.
REACT_APP_INFURA_PROJECT_ID Project ID for accessing Infura services. Infura
REACT_APP_WALLET_CONNECT_PROJECT_ID Project ID for Wallet Connect integration. Wallet Connect
  1. Install the required dependencies:
  npm install
  1. Start the development server:
  npm start

After setting up, you can run the project on localhost:3000 to see it in action. The project comes pre-configured with two example services: one for the Ethereum Mainnet and one for the Sepolia Testnet. You can connect your wallet and send a message to the example service to see how it works.

Step 3. Generating JavaScript Files for Your Services

To interact with your own SingularityNET services, you need to compile the .proto files from your service to JavaScript files

Steps to Generate JS Files

Follow the steps mentioned in the official documentation to generate js stubs from .proto definitions. Additionally, provide the namespace_prefix flag to the generator.

Example Command for Linux

protoc ^
protoc \
--plugin=protoc-gen-ts=./node_modules/.bin/protoc-gen-ts \
--js_out=import_style=commonjs,binary,namespace_prefix=[package name]_[org id]_[service]:. --ts_out=service=grpc-web:. \
[proto file name].proto

Example Command for Windows CMD

protoc ^
--plugin=protoc-gen-ts=%cd%/node_modules/.bin/protoc-gen-ts.cmd ^ --js_out=import_style=commonjs,binary,namespace_prefix=[package name]_[org id]_[service]:. --ts_out=service=grpc-web:. ^
[proto file name].proto

After that you need to place them in the src/ExampleService/assets folder to use it in your service component.

Step 4. Interact with your service

Configure the Service

To configure the project to work with your service, you need to specify the orgId and serviceId in the src/config/service.ts file. There are two configurations: one for mainnet and one for sepolia testnet.

  1. Open the src/config/service.ts file.
  2. Update the orgId and serviceId values to match your desired SingularityNET service. orgId: "your-organization-id", serviceId: "your-service-id"

Adapt the ExampleService Component

The ExampleService/TestExampleService component provides a user interface for interacting with your service on the Mainnet/Sepolia network.

Make call to your service

  1. change runService function: Send a request to your service with the user-provided text and handle the response. Replace the service call and response handling in the runService function with the appropriate calls to your own service as defined in the protobuf files.
import { example } from './assets/mainnet/summary_pb_service';

async function runService(text) {
    const invokeOptions = {
        request: { text: text },
        host: 'https://your-service-host',
    };

    try {
        const response = await clientSDK.unary(
            example.TextSummary.summary,
            invokeOptions
        );
        newChat('bot', response.getText());
    } catch (error) {
        console.error('Error running service:', error);
    }
}
  1. use newChat funtion to display messages: When you want to display messages from a user or a service in the chat, simply call the newChat function, providing the sender and the message.
newChat('user', "This is a user's message.");
newChat('bot', "This is a bot's response.");