Getting Started

AnyAlt SDK requires an API key.

Contact us via the form and get your API key first.

Integrating the AnyAlt SDK into your project gives you full control over the cross-chain swap and last-mile transaction processes without the constraints of a pre-built UI. Follow these steps to integrate and start using the SDK:

Step 1: Install the SDK Package

Install the AnyAlt SDK using your package manager of choice

npm install @anyalt/sdk
# or
yarn add @anyalt/sdk
# or
pnpm add @anyalt/sdk

Step 2: Initialize the SDK

Begin by creating an instance of the AnyAlt class using your API key. This instance will be used to access all SDK functions:

import { AnyAlt } from '@anyalt/sdk';

const anyalt = new AnyAlt('<YOUR_API_KEY>');

Step 3: Retrieve Available Chains and Tokens

To let your end-users select a source token and chain, fetch the list of available chains and tokens:

import { useEffect, useState } from 'react';

const YourComponent = () => {
  const [chains, setChains] = useState([]);
  const [selectedChain, setSelectedChain] = useState(null);
  const [tokens, setTokens] = useState([]);

  useEffect(() => {
    const fetchChains = async () => {
      const { chains } = await anyalt.getChains();
      setChains(chains);
    };

    fetchChains();
  }, []);
  
  useEffect(() => {
    const fetchTokens = async () => {
      const { tokens } = await anyalt.getTokens({
          chainId: selectedChain.id,
          page: 0,
          pageSize: 100,
        });
        
        setTokens(tokens);
    }
  
    setTokens([]);
    
    if (selectedChain) {
      fetchTokens();
    }
  }, [selectedChain]);

  // Render your chain/token selection UI using the `chains` state
  return <div>{/* Your chain selection UI */}</div>;
};

export default YourComponent;

Step 4: Obtain the Best Swap Route

Once a user selects the source and destination tokens, determine the optimal cross-chain swap route:

const bestRouteRes = await anyalt.getBestRoute({
  from: '<SOURCE_TOKEN_UUID>',  // UUID of the source token
  to: '<DESTINATION_TOKEN_UUID>', // UUID of the destination token
  amount: "0.1",                // Amount of the source token as a string with decimal precision
  slippage: "100",              // Maximum acceptable slippage percentage as a string with decimal precision
});

const routeId = bestRouteRes.requestId;
const swaps = res.swaps;

Step 5: Confirm the Swap Route

After obtaining the best route, confirm it by providing the selected route, wallet mappings, and the destination address:

const res = await anyalt.confirmRoute({
  selectedRoute: routeId,
  // Map network names to wallet addresses for the user
  selectedWallets: {
    "BSC": "0xeae6d42093eae057e770010ffd6f4445f7956613",
    "AVAX_CCHAIN": "0xeae6d42093eae057e770010ffd6f4445f7956613"
  },
  destination: "0x6f33bb1763eebead07cf8815a62fcd7b30311fa3", // Recipient address on the destination chain, can be same or different to wallets in `selectedWallets`
});

const operationId = res.operationId;
const swaps = res.swaps;

Step 6: Execute the Swap

Finally, execute the cross-chain swap. You can track the progress of the transaction using a callback function:

import { useCallback, useState } from 'react';

const YourSwapComponent = () => {
  const [status, setStatus] = useState('');

  // Define a callback to handle transaction progress updates
  const handleTransactionProgress = useCallback((progress) => {
    setStatus(progress.status);
  }, []);

  const executeSwapTransaction = async () => {
    await anyalt.executeSwap(
      operationId, // The operation ID obtained from confirmRoute
      "100",       // Maximum acceptable slippage percentage
      swaps,       // List of swaps
      handleTransactionProgress // Progress callback
    );
  };

  return (
    <div>
      <button onClick={executeSwapTransaction}>Execute Swap</button>
      <p>Transaction Status: {status}</p>
    </div>
  );
};

export default YourSwapComponent;

The progress callback uses typical IoC or dependency injection, where the progress being injected into it is of type TransactionProgress :

export type TransactionStatus =
  | 'pending'
  | 'signing'
  | 'broadcasting'
  | 'confirmed'
  | 'failed';

export interface TransactionProgressDetails {
  currentStep: number;
  totalSteps: number;
  stepDescription: string;
}

export interface TransactionProgress {
  status: TransactionStatus;
  message: string;
  txHash?: string;
  error?: string;
  details?: TransactionProgressDetails;
}

By following these steps, you can integrate the AnyAlt SDK into your project and build a fully customized UI for managing cross-chain swaps and transactions.