Sonic-js Example

⚠️ The library is currently under a Beta version. It still a work in progress and can have braking changes through the new version releases.

💬 All feedback is accepted! Set up an issue.

This project is an example integration of the Sonic-js library.

• Check out the Sonic-js main repository
• Check out the Sonic-js documentation
• Visit our website

Table of Contents

• Table of Contents
• Getting Started
  • Setup Github Configuration
  • Running Example App
• About the project
  • Hooks
  • Components
  • Store

Getting Started

⚠️ We are assuming that you have basic knowledge using Node.js and the environment is already installed.

Setup Github Configuration

First, we need to setup our authentication on Github Packages. This step is compulsory, even for public packages.

To do so you're going to need a personal access token with the following configurations:

• repo
• read:packages

Next, authenticate yourself via the npm login command using your Github useranme for the username, Github email for the email and the personal access token as your password:

npm login --registry=https://npm.pkg.github.com --scope=@psychedelic

You're all set to use Sonic-js in your cloned sonic-js-example directory!

Running Example App

After cloning the project you need to install dependencies:

yarn

And run it:

yarn dev

If the running project doesn't open in your default browser, you can open it on http://localhost:9000/.

About the project

⚠️ This project was developed using React.js. If your application doesn't use React, you can still getting some ideas in how to apply it on your application by the comments added throughout project.

The project has examples of how to:

• Interact with the library 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.

The components present in the project are split in sections to prioritize the usage of each part in given section.

💬 Reminder to follow the comments on the code

Hooks

Custom hooks were created to avoid frequently repeated code inside the application:

• useSwapCanisterBalances
• useSwapCanisterController
• useSwapCanisterLists
• useSwapCanisterLiquidityPosition

Components

UI components create to exemplify how to display data:

• BalanceSection
• DataListsSection
• DepositSection
• PlugSection
• SwapSection
• WithdrawSection
• LiquidityPositionSection
• AddLiquiditySection
• RemoveLiquiditySection

Store

The app provides an example of the usage of react-redux to store global states.

• balances
• plug