The Trinsic Javascript/ Typescript / Web SDK

The Trinsic Web SDK makes it easy to interact with the Trinsic API from any client-side web application. You can find the SDKs source on Github. The @trinsic/trinsic package comes with Typescript bindings.

Installation

Install the package for Node or Browser from npmjs.com

Install

npm install @trinsic/trinsic

To import the Trinsic SDK in ES6:

import { TrinsicService } from "@trinsic/trinsic/browser";

To import the Trinsic SDK in CommonJS:

let { TrinsicService } = require("@trinsic/trinsic/browser");

You must instantiate the trinsic service first:

const trinsicService = new TrinsicService({
    /** Trinsic API endpoint. Defaults to `prod.trinsic.cloud` */
    serverEndpoint: "prod.trinsic.cloud";
    /** Trinsic API port; defaults to `443` */
    serverPort: 443;
    /** Whether TLS is enabled between SDK and Trinsic API; defaults to `true` */
    serverUseTls: true;
    /** Authentication token for SDK calls; defaults to empty string (unauthenticated) */
    authToken: "<Your auth token>";
});

Now you can use the SDK:

const accountInfo = await trinsicService.account().getInfo();
console.log(JSON.stringify(accountInfo, null, 4));

You can find all of the SDK methods documented here

Configuration

Webpack 4Create React App 4Webpack 5Create React App 5

You can find a basic Webpack 4 sample here.

The library works without any further configuration in Webpack 4.

Package import

Import the library using @trinsic/trinsic/lib/browser.

You can find a basic Create React App 4 sample here.

You will have to extend the Create React App Webpack configuration to allow the included wasm bundle to be loaded.

Package import

Import the library using @trinsic/trinsic/lib/browser.

1. Install the @craco/craco package in case you're not yet using craco

   npm install @craco/craco --save-exact --save-dev
   

2. Adjust your package.json scripts to the below:

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

3. Add a craco.config.js file next to the package.json file with the following configuration:

   const { addBeforeLoader, loaderByName } = require('@craco/craco');
   module.exports = {
       webpack: {
           configure: (webpackConfig) => {
               const wasmExtensionRegExp = /\.wasm$/;
   
               webpackConfig.module.rules.forEach((rule) => {
                   (rule.oneOf || []).forEach((oneOf) => {
                   if (oneOf.loader && oneOf.loader.indexOf('file-loader') >= 0) {
                       oneOf.exclude.push(wasmExtensionRegExp);
                   }
                   });
               });
   
               return webpackConfig;
           },
       },
   };
   

You can find a basic Webpack 5 sample here.

Package import

Import the library using @trinsic/trinsic/browser.

You will have to enable the asyncWebAssembly experiment in Webpack 5.

1. Adjust your webpack.config.js:

   experiments: {
       asyncWebAssembly: true,
   },
   

You can find a basic Create React App 5 sample here.

Package import

Import the library using @trinsic/trinsic/browser.

You will have to extend the Create React App Webpack configuration to allow the included wasm bundle to be loaded.

1. Install the @craco/craco dependency in case you're not yet using craco

   npm install @craco/craco --save-exact --save-dev
   

2. Adjust your package.json scripts to the below:

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

3. Add a craco.config.js file next to the package.json file with the following configuration:

   module.exports = {
       webpack: {
           configure: (webpackConfig) => {
               webpackConfig.experiments = {
                   asyncWebAssembly: true
               };
   
               const wasmExtensionRegExp = /\.wasm$/;
               webpackConfig.module.rules.forEach((rule) => {
                   (rule.oneOf || []).forEach((oneOf) => {
                       if (oneOf.type === "asset/resource") {
                           oneOf.exclude.push(wasmExtensionRegExp);
                       }
                   });
               });
               return webpackConfig;
           },
       },
   };
   

Next Steps

Once the SDK is installed and configured, you're ready to start building! We recommend going through the walkthrough next. If you're ready to dive into building your ecosystem, check out our API Reference

Start Walkthrough Explore API