> For the complete documentation index, see [llms.txt](https://docs.anyalt.finance/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.anyalt.finance/sdk/getting-started.md).

# Getting Started

{% hint style="warning" %}
AnyAlt SDK requires an API key.

Contact us via the [form](https://9vi3topj6b2.typeform.com/to/F3Lnpo5u) and get your API key first. 
{% endhint %}

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

```bash
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:

```js
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:

```js
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:

```js
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:

```js
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:

```js
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` :

```typescript
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.