Sonic v1.2.0: Sonic-js, a Javascript Library to Simplify Sonic Integrations 🌂

Start integrating your dApps and IC experiences to Sonic’s DeFi protocols, and surface swaps or liquidity features onto your experience with Sonic-js!

4 min readFeb 22, 2022

Today we’re announcing Sonic-js, a developer friendly javascript library full of tools to make integrating and consuming data from Sonic’s protocols (swaps, liquidity, etc.) easier than ever!

We are releasing Sonic-js as a public beta in hopes of providing value to the community, while we continue to gather valuable feedback to improve the library.

Developers looking to build atop of Sonic using Sonic-js (beta included) will also qualify for our retroactive distributions come the time when we launch the $SONIC token.

If you’re eager to start integrating Sonic into your application, here are some great resources:

Sonic-js — Integrating Sonic’s Protocols 🤝

You can think of Sonic-js as a portable version of the underlying Sonic protocol.

This means that application developers can now offer unfettered access to Sonic swaps and liquidity pools directly from their own applications.

Wallets can enable native swaps without leaving their application. As Sonic slowly opens up to welcome other tokens seamlessly, things like having games onboard users to their in-game currency through ICP → WICP → Game Token swaps will be possible!

This is economic composability at its best. Pretty awesome, right?

Composability in Integrations 🖋

Right now, applications that want to interface with the Sonic canister will need considerable amounts of overheard code & knowledge of DeFi calculations to, for example, show a user’s pool allocation percentage. This is a problem.

Our goal with Sonic-js is also to alleviate this overhead burden & by putting in place the boilerplate code that will wire up a connection to the Sonic canister and ensure that any needed calculations are done correctly before its displayed to your user or sent off as parameters for an update call on behalf of your users.

In doing so, we’re increasing both the composability & safety of developing atop of Sonic’s protocols 🌈

Library Overview 📚

The Sonic-js library comes with three main modules — integrations, math, and utils.

Even though these modules are hierarchical (integration uses utils which uses math), the library still gives you the freedom to access them all directly. Let’s explore.

Integrations Module

Github Repo

We’re starting at the top level of the module tree. The Integrations module is where you can perform interactions against the Sonic canister & related token canisters directly (eg: approve, deposit, withdraw, swap).

The bulk of developers will use this module only, as it provides the most turn-key approach to integrating Sonic into your application.

Math Module

Github Repo

The Math module consists of methods that query data from Sonic to either be displayed by the UI or sent as a request parameter (eg: getPriceImpact, getShareOfPool, getTokenPath).

Additionally, this module can be thought of as external math calculations for valuable metrics that applications might want to show users about their assets in Sonic.

Utils Module

Github Repo

The lowest level module. Utils are standalone functions that mainly help convert one of Sonic’s common data type to another (eg: serialize, deserialize, toBigNumber, toExponential).

Sonic-js in In Action 👀

Looking to get your hands dirty with Sonic-js but aren’t sure where to start? You’ve come to the right place!

We’ve created the ‘Sonic-js Example App’ as a general purpose guide for developers looking to get a sense of what a sonic-js implementation would look like.

The example app showcases:

Interacting with Sonic-js to fetch and show information from the Sonic canister.
Connecting to the Sonic Swap canister using Plug as an identity provider.
Make swaps on behalf of authenticated users.

View the app’s source code here.

That’s all 👋

And that wraps up this v1.2.0 update! We can’t wait to see what the community uses Sonic-js to build. Builders who are early to integrate sonic into their application with Sonic-js will be eligible for our retroactive $SONIC distribution 🔥

As a reminder, this is a beta version of Sonic-js and may be updated after we collect community feedback. If you have any questions regarding anything to do with Sonic, hop into our Discord or tweet us!