Router Chain TypeScript SDK

Introduction

Router Chain Ts SDK is a SDK which is used to Build CrossChain DApps on Router Chain. Refer this Documentation to Learn in-detail about the Methods available in Ts SDK Package.

Now, Let’s Explore Some of the functions available.

Setting Up the Project

Navigate to your Desired Workspace Directory and Create a new Directory for your Project using the mkdir Command and cd to that directory -
Terminal window
```
mkdir my-router-chain-project
```
Terminal window
```
cd my-router-chain-project
```
Initialize a package.json file, which will Manage your Project’s Dependencies, using yarn -
Terminal window
```
yarn init -y
```
Install TypeScript as a Development Dependency using yarn -
Terminal window
```
yarn add -D typescript
```
Generate a Basic TypeScript Configuration file using the TypeScript Compiler -
Terminal window
```
yarn tsc --init
```
This creates a tsconfig.json file at the Root of your Project. It defines Compiler Options for how TypeScript code will be Transpiled to JavaScript.
Create a New file for your Application code with a .ts Extension (e.g., index.ts) -
Terminal window
```
touch index.ts
```
Since TypeScript Code needs to be Compiled to JavaScript before NodeJS can Execute it, you’ll use the ts-node Package for Development -

Install ts-node as a Development Dependency:
Terminal window
```
yarn add -D ts-node
```
Install the Latest Version of Asset Transfer SDK -
Terminal window
```
yarn add @routerprotocol/router-chain-sdk-ts
```

Fetching an Account’s Balance

Refer the Below SDK Implementation to Understand how to fetch an Account’s Balance.

import { ChainGrpcBankApi, getEndpointsForNetwork, Network } from '@routerprotocol/router-chain-sdk-ts';

const endpoint = getEndpointsForNetwork(Network.Testnet);
const bankClient = new ChainGrpcBankApi(endpoint.grpcEndpoint);

async function fetchAccountDetails() {
  // Fetch all balances of an account
  const accountBalances = await bankClient.fetchBalances(
      'router16sqwdtdxjl6zdvx49rvayhkyelfrhavpmknxh9'
  );
  console.log(accountBalances);

  // Fetch particular coin's balance of an account
  const routersBalances = await bankClient.fetchBalance({
      accountAddress: 'router16sqwdtdxjl6zdvx49rvayhkyelfrhavpmknxh9',
      denom: 'route',
  });
  console.log(routersBalances);
}

fetchAccountDetails();

Possible Errors

For using the SDK with UI it is recommended to use Node version v18.12.1 or above. If you get Webpack errors when using with create-react-app, follow these steps -

Install craco and required packages.

yarn add -D @craco/craco

yarn add -D path-browserify stream-browserify stream-http https-browserify os-browserify assert url buffer process crypto-browsify fs

Add craco.config.js file in your project root.

const { ProvidePlugin } = require('webpack');
module.exports = {
  webpack: {
    configure: webpackConfig => {
      return {
        ...webpackConfig,
        resolve: {
          ...webpackConfig.resolve,
          fallback: {
            ...(webpackConfig.resolve?.fallback ?? {}),
            path: require.resolve('path-browserify'),
            stream: require.resolve('stream-browserify'),
            buffer: require.resolve('buffer/'),
            crypto: require.resolve('crypto-browserify'),
            http: require.resolve('stream-http'),
            https: require.resolve('https-browserify'),
            os: require.resolve('os-browserify/browser'),
            assert: require.resolve('assert/'),
            url: require.resolve('url/'),
          },
        },
        plugins: [
          ...(webpackConfig.plugins ?? []),
          new ProvidePlugin({
            Buffer: ['buffer', 'Buffer'],
          }),
          new ProvidePlugin({
            process: 'process/browser',
          }),
        ],
      };
    },
  },
};

Replace these scripts in package.json.

"scripts": {
    -  ~~"start": "react-scripts start"~~
    +  "start": "craco start"
    -  ~~"build": "react-scripts build"~~
    +  "build": "craco build"
    -  ~~"test": "react-scripts test"~~
    +  "test": "craco test"
}

yarn start and the Webpack errors should be gone.
If you get Webpack errors when using Vue’s nuxt framework, do this small change in nuxt.config.js build key -

build: {
    extend(config, ctx) {
      config.module.rules.push({
        test: /\.js$/, // apply this rule to .js files
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"], // use the preset-env preset
          },
        },
      });
    },
  }