snet-sdk-web v4.1.4

snet-sdk-web

SingularityNET SDK for Browser (Web)

Getting Started

These instructions are for the development and use of the SingularityNET SDK for JavaScript on web platform like browsers.

Installation

npm install snet-sdk-web

Note: This SDK requires Node.js version 18 or higher and react-scripts version 5.0.1 or higher for optimal functionality and compatibility.

If you are using create-react-app then require Node.js polyfills for browser compatibility, To add these polyfills, you can use the config-overrides.js file with react-app-rewired. This approach allows you to customize the Webpack configuration without ejecting from create-react-app.

Install react-app-rewired into your application

npm install --save-dev react-app-rewired

Install the necessary polyfill packages

npm install --save-dev buffer process os-browserify url

Create config-overrides.js in the root of your project with the content:

const webpack = require("webpack");

module.exports = function override(config) {
  const fallback = config.resolve.fallback || {};
  Object.assign(fallback, {
    os: require.resolve("os-browserify"),
    url: require.resolve("url"),
  });
  config.resolve.fallback = fallback;
  config.plugins = (config.plugins || []).concat([
    new webpack.ProvidePlugin({
      process: "process/browser",
      Buffer: ["buffer", "Buffer"],
    }),
  ]);
  config.ignoreWarnings = [/Failed to parse source map/];
  config.module.rules.push({
    test: /\.(js|mjs|jsx)$/,
    enforce: "pre",
    loader: require.resolve("source-map-loader"),
    resolve: {
      fullySpecified: false,
    },
  });
  return config;
};

Update your package.json scripts to use react-app-rewired instead of react-scripts.

{
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  }
}

Usage

The SingularityNET SDK allows you to import compiled client libraries for your service or services of choice and make calls to those services programmatically from your application by setting up state channels with the providers of those services and making gRPC calls to the SingularityNET daemons for those services by selecting a channel with sufficient funding and supplying the appropriate metadata for authentication.

import SnetSDK from "snet-sdk-web";

import config from "./config";

const sdk = new SnetSDK(config);

You can find a sample config below

{
  "web3Provider": window.web3.currentProvider,
  "networkId": "3",
  "ipfsEndpoint": "http://ipfs.organization.io:80",
  "defaultGasPrice": "4700000",
  "defaultGasLimit": "210000",
  "rpcEndpoint": "https://ropsten.infura.io/v3/1234567890"
}

Note: rpcEndpoint is optional, you should provide this if you are getting block size limit exceeded error. This is usually happens when you are using any web social auth providers.

Debugging Tip: To view debug logs, enable verbose mode in your browser's developer console.

Now, the instance of the sdk can be used to instantiate clients for SingularityNET services. To interact with those services, the sdk needs to be supplied with the compiled gRPC client libraries.

This SDK uses gRPC-web by improbable engineering. To generate the gRPC client libraries, follow the instructions given by the gRPC-web package here.

The api to invoke gRPC methods against a service is similar to that of the gRPC-web package used.

import { <ServiceName> } from  '<path_to_grpc_service_file>'

import { <Message> } from  '<path_to_grpc_message_file>'

const  client = sdk.createServiceClient("<org_id>", "<service_id>")

This generates a service client which can be used to make gRPC calls to the desired service. You can then invoke service specific calls as follows

client.invoke(<ServiceName>.<MethodName>, <InvokeRpcOptions>);

More details about can be found on the official documentation.

WEBSDK SETUP LOCALLY

If you want to setup WEB SDK locally please follow below steps

First clone this repo to your local machine.

Then open repo and go to web folder inside SNET-SDK-JS > packages > web

npm install

If you are using Windows Then follow below steps first

Copy core folder from SNET-SDK-JS > packages > core and paste or replace it inside SNET-SDK-JS > packages > web > src

npm run build

npm link

Now go to the other project or repo where you want to connect SDK locally

npm link snet-sdk-web

npm run start

(NOTE) If you change anything inside web sdk and you want to access the updated code inside your repo you need to re run all the above commands.

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

License

This project is licensed under the MIT License - see the LICENSE file for details.