# API Reference

The `AnyaltWidget` component exposes a variety of props and callbacks that allow you to configure its behavior and integrate it smoothly into your project. Below is an overview of its API:

### AnyaltWidget Props

<table><thead><tr><th width="217">Prop Name</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><strong>swapResultToken</strong></td><td><code>Object</code></td><td>An object defining the token that the user will use in the last mile transaction. This token will always be the output of the initial swap. Contains properties such as <code>symbol</code>, <code>address</code>, <code>chainId</code>, <code>name</code>, and <code>chainType</code>.</td></tr><tr><td><strong>finalToken?</strong></td><td><code>Object</code></td><td>An object defining the token that the user will receive or use in the last mile transaction. Includes properties like <code>symbol</code>, <code>address</code>, <code>chainId</code>, <code>name</code>, <code>chainType</code>, and optionally <code>logoUrl</code> for branding.</td></tr><tr><td><strong>apiKey</strong></td><td><code>String</code></td><td>Your project’s API key for authenticating requests to the AnyAlt backend.</td></tr><tr><td><strong>widgetTemplate?</strong></td><td><code>WidgetTemplateType</code></td><td>Defines the available modes for the widget, determining its functionality based on the selected option. <strong>Default <code>DEPOSIT_TOKEN</code></strong> - Enables the widget for depositing tokens, allowing users to transfer tokens into a designated account or wallet. <strong><code>TOKEN_BUY</code></strong> - Activates the widget for purchasing tokens, adjusting the UI and logic to facilitate token acquisition.</td></tr><tr><td><strong>isOpen</strong></td><td><code>Boolean</code></td><td>A flag indicating whether the widget modal is currently open.</td></tr><tr><td><strong>onClose</strong></td><td><code>Function</code></td><td>A callback function invoked to close the widget modal.</td></tr><tr><td><strong>estimateCallback</strong></td><td><code>Function</code></td><td>An asynchronous function that is called to provide an estimation before executing the last-mile transaction. It receives the token details and should return an object with properties like <code>amountOut</code> and <code>priceInUSD</code>.</td></tr><tr><td><strong>executeCallBack</strong></td><td><code>Function</code></td><td>An asynchronous function that executes the final transaction. It receives the token details and should return transaction details such as <code>approvalTxHash</code>, <code>executeTxHash</code>, and <code>amountOut</code>.</td></tr><tr><td><strong>minDepositAmount?</strong></td><td><code>Number</code></td><td>Specifies the minimum deposit amount required to proceed with the transaction.</td></tr></tbody></table>

### Token Object Structure

Both `inputToken` and `finalToken` follow the same structure

<pre class="language-js"><code class="lang-js"><strong>interface Token {
</strong>  symbol: String,       // e.g., "USDT"
  address: String,      // Blockchain address of the token
  chainId: Number,      // Identifier for the blockchain network
  name: String,         // Human-readable name of the token
  chainType: ChainType, // Type of blockchain, e.g., ChainType.EVM
  logoUrl?: String,     // (Optional) URL for the token’s logo
  amount?: string,      // (Optional) 
  decimals?: string,    // (Optional)
}
</code></pre>

### ChainType

The `ChainType` enum helps define the type of blockchain the token belongs to. For example:

* `ChainType.EVM` for Ethereum Virtual Machine (EVM)-compatible chains.
* `ChainType.SOLANA` for the Solana chain.

### widgetTemplate

The `widgetTemplate` parameter defines the mode of the widget:

* **`TOKEN_BUY`**: Configures the widget for token purchases. In this mode:
  * `swapResultToken` represents the token the user wants to buy.
  * It is highly recommended to provide the `logoUrl` of the token for better user experience.
  * The `finalToken` parameter is **optional**.
* **`DEPOSIT_TOKEN`**: Enables the widget for token swapping followed by a deposit. In this mode:
  * Both `swapResultToken` and `finalToken` are **required**.

### Callbacks

#### estimateCallback(inputToken)

* **Purpose:**\
  A function which will estimate the output amount and dollar value price of the last mile transaction.
* **Parameters:**
  * `swapResultToken`(`Token`): the token which the user will receive as a result of the swap, same as `swapResultToken`which was passed as a prop to `<AnyaltWidget />`
* **Returns:**\
  A promise that resolves to an object with:
  * `amountOut` (`String`): Estimated output amount.
  * `priceInUSD` (`String`): Estimated price in USD.

#### executeCallBack(token)

* **Purpose:**\
  A function which will create and present the last mile transaction for the user to sign, as well as the approval transaction if necessary
* **Parameters:**
  * `swapResultToken`(`Token`): the token which the user will receive as a result of the swap, same as `swapResultToken` which was passed as a prop to `<AnyaltWidget/>`
* **Returns:**\
  A promise that resolves to an object with:
  * `approvalTxHash` (`String`): Transaction hash for the approval step (if applicable).
  * `executeTxHash` (`String`): Transaction hash for the execution step.
  * `amountOut` (`String`): Final output amount from the transaction.

### Modal Control: useModal Hook

The widget package also provides a `useModal` hook to help manage the modal state:

```js
const { isOpen, onOpen, onClose } = useModal();
```

* **isOpen:** A boolean flag indicating whether the modal is currently open.
* **onOpen:** Function to open the modal.
* **onClose:** Function to close the modal.

***

This API reference should serve as a comprehensive guide to integrating and customizing the AnyAlt Widget within your project, enabling you to leverage its full capabilities for cross-chain token swaps and last-mile transactions.