DAB-js Update: Optional Parameters & Interface Changes 🧰

We’re updating the DAB-js interface to allow for optional parameters (e.g. passing an agent), which will modify the integration flow for DAB & Apps using DAB-js.

Time for an update to DAB-js! We’re redesigning the interface to accommodate a more flexible flow for developers by allowing some parameters in certain calls to be optional (e.g. the Agent).

This means that today, we’re introducing a breaking change that can affect the integration of some UI’s/apps have using the previous interface. We apologize for any inconvenience, we believe it is important to make this change early on so that the interface can grow without this restriction.

But it’s a very simple change! So adapting and updating will take a second.

• Website
• DAB’s Documentation
• NFT Submission form
• Canister Submission form

Interface Changes in DAB-js 🧰

What was the change introduced?

All methods in DAB-js used to receive multiple parameters at once. You can see an example highlighted below when using getNFTActor.

import { Principal } from '@dfinity/principal';
import { getNFTActor } from '@psychedelic/dab-js'
...
const getUserNFTs = async () => {   
const principal = 'r4rmh-mbkzp-gv2na-yvly3-zcp3r-ocllf-pt3p3-zsri5-6gqvr-stvs2-4ae';
const canisterId = 'qcg3w-tyaaa-aaaah-qakea-cai';
const standard = 'ICPunks';   const NFTActor = getNFTActor(canisterId, agent, standard);
const userTokens = await NFTActor.getUserTokens(Principal.fromText(principal)); } getUserNFTs();

The difference is that now you only need to pass one parameter, which is an object that inside holds the multiple parameters that you previously had to send individually/separately.

import { Principal } from '@dfinity/principal';
import { getNFTActor } from '@psychedelic/dab-js'
...
const getUserNFTs = async () => {
const principal = 'r4rmh-mbkzp-gv2na-yvly3-zcp3r-ocllf-pt3p3-zsri5-6gqvr-stvs2-4ae';
const canisterId = 'qcg3w-tyaaa-aaaah-qakea-cai';
const standard = 'ICPunks';   const NFTActor = getNFTActor({canisterId, agent, standard});
const userTokens = await NFTActor.getUserTokens(Principal.fromText(principal)); } getUserNFTs();

As simple as going from getNFTActor(canisterId, agent, standard); to ➡ this new format with the object’s curly brackets: getNFTActor({canisterId, agent, standard});.

Adjusting your integration is as easy as following this new interface format.

• You can visit our documentation to follow the new code examples.

Why Make this Adjustment in the Interface? 🤔 Flexibility 🌈

The previous design for DAB-js and its interface had optional parameters that couldn’t be removed, like the agent, and that caused potential issues for some developers (when it didn’t make sense for them to use the agent at all, in certain scenarios).

With this new parameters object, optional parameters such as the agent can be removed without causing any type of conflicts!

Wrapping it up 🗞️

That’s it for today! An update to ensure DAB is future-proofed and flexible enough for any developer wishing to integrate it into its

• Discord
• GitHub Repository
• Twitter
• Website
• Documentation