Skip to main content

Frontend Integration with IntentoJS

IntentoJS is our TypeScript/JavaScript library that simplifies the process of creating and managing intent-based flows in your dApp. This guide will walk you through the key concepts and provide practical examples.

Prerequisites​

  • Basic knowledge of TypeScript/JavaScript
  • Node.js (v14 or later)
  • An Intento-compatible wallet (E.g. through Cosmos Kit)
  • IntentoJS installed in your project.

Integration withouth IntentoJS is also possible. tokenstream.fun uses CosmJS to create and submit flows from host chains. Hence, no IntentoJS is required.

Getting Started​

Installation​

npm install intentojs
# or
yarn add intentojs

Basic Flow Submission​

Here's how to create a simple flow that executes a token transfer:

import { Registry, msgRegistry } from "intentojs";

// 1. Prepare your message
const transferMsg = {
  typeUrl: "/cosmos.bank.v1beta1.MsgSend",
  value: {
    fromAddress: "cosmos1senderaddress",
    toAddress: "cosmos1recipientaddress",
    amount: [{ denom: "uatom", amount: "1000000" }]
  }
};

// 2. Encode the message
const registry = new Registry(msgRegistry);
const encodedMsg = registry.encodeAsAny({
  typeUrl: transferMsg.typeUrl,
  value: transferMsg.value
});

// 3. Submit the flow
const msgSubmitFlow = intento.intent.v1.MessageComposer.withTypeUrl.submitFlow({
  label: "Simple Transfer Flow",
  owner: "your-into-address",
  msgs: [encodedMsg],
  duration: "720h", // 30 days
  interval: "0",   // Execute once
  feeFunds: [{ denom: "uinto", amount: "1000000" }] // E.g. 1 INTO. Required in case wallet fallback is not set. Refundable
});

// 4. Sign and broadcast
const result = await client.signAndBroadcast(signerAddress, [msgSubmitFlow], {
  amount: [],
  gas: "300000"
});

Advanced Features​

Conditional Flows​

Create flows that execute based on specific conditions. For example, transfer tokens only if a certain token output threshold is met:

// See full example in the Conditional Transfers tutorial
const comparison: Comparison = {
  flowId: BigInt(0),
  responseIndex: 0,
  responseKey: "amount.[0].amount",
  valueType: "math.Int",
  operator: 4, // GREATER_THAN
  operand: "200000000" // 200 ATOM (in uatom)
};

Tutorial: Learn more in our Conditional Transfers with ICQ tutorial.

Feedback Loops​

Dynamically update flow input based on previous executions:

const feedbackLoop: FeedbackLoop = {
  flowId: BigInt(0),
  responseIndex: 0,
  responseKey: "amount.[0].amount",
  valueType: "math.Int",
  msgsIndex: 0,
  msgKey: "amount"
};

Trustless Agents​

Integrate with Trustless Agents to handle flow execution:

const trustlessAgentConfig = {
  agentAddress: "into1agentaddress",
  feeLimit: [{ denom: "uinto", amount: "100000" }]
};

// Include in your submitFlow message
const msgSubmitFlow = {
  // ... other flow config
  trustlessAgent: trustlessAgentConfig
};

Guide: Learn more about setting up Trustless Agents.

Fee Calculation​

Estimate the cost of your flows before submission:

import { calculateFlowFee } from "intentojs";

const feeEstimate = await calculateFlowFee({
  messages: [msg1, msg2],
  duration: 86400, // 1 day in seconds
  interval: 3600,  // 1 hour interval
  client: yourIntentoClient
});

console.log(`Estimated fee: ${feeEstimate.amount} ${feeEstimate.denom}`);

Best Practices​

  1. Error Handling: Always wrap flow submissions in try-catch blocks
  2. Gas Estimation: Use the simulate method to estimate gas before submission
  3. Flow Management: Store flow IDs for future reference and management
  4. Testing: Test flows on testnet (Chain ID: intento-dev-1) before deploying to mainnet

Example Implementations​

Next Steps​