# Getting Started

{% hint style="warning" %}
AnyAlt Widget 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 Widget into your web3 project is simple and straightforward. Follow these steps to quickly get up and running:

### Step 1: Install the Package

Begin by installing the AnyAlt widget and \`@tanstack/react-query\`, which is a direct dependency, using your package manager of choice

```bash
npm install @anyalt/widget @tanstack/react-query
# or
yarn add @anyalt/widget @tanstack/react-query
# or
pnpm add @anyalt/widget @tanstack/react-query
```

> **Note:** Ensure that your project is using `react` and `react-dom` version 18 or 19, as these are required dependencies for the `@anyalt/widget` package.

### Step 2: Import the font family and styles

```tsx
import '@fontsource/rethink-sans/400.css';
import '@fontsource/rethink-sans/500.css';
import '@fontsource/rethink-sans/600.css';

import '@solana/wallet-adapter-react-ui/styles.css';
import '@rainbow-me/rainbowkit/styles.css';
```

### Step 2: Wrap Your Application with the providers

The `QueryClientProvider` and `WidgetProvider` set up the required context (such as theming) for the widget. In your main application file, import the provider along with the default theme and wrap your app as shown below:

```jsx
import React from "react";
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { whiteTheme, defaultTheme, WidgetProvider } from "@anyalt/widget";

const queryClient = new QueryClient();
const theme = 'default';

export const App = () => {
  return (
    <QueryClientProvider client={queryClient}>
      <WidgetProvider theme={theme === 'white' ? whiteTheme : defaultTheme}>
        {/* Your Application Components */}
      </WidgetProvider>
    </QueryClientProvider>
  );
};
```

> **Note:**\
> You can customize the theme by providing your own theme object instead of `defaultTheme` if you wish to match your project’s branding.

### Step 3: Import and Use the AnyAltWidget

Create a component that imports and uses the `AnyaltWidget`. The widget handles the UI for cross-chain swaps and last-mile transactions. A sample integration might look like this:

```jsx
import React from "react";
import {
  AnyaltWidget,
  ChainType,
  useModal,
} from "@anyalt/widget";

import "@solana/wallet-adapter-react-ui/styles.css";
import "@rainbow-me/rainbowkit/styles.css";

const Widget = () => {
  // useModal hook provides control over the widget’s modal state
  const { isOpen, onOpen, onClose } = useModal();

  // Define a callback to estimate transaction details before execution
  const estimateCallback = async (token) => {
    // Implement estimation logic here
    return {
      amountOut: "123.45",
      priceInUSD: "567",
    };
  };

  // Define a callback to execute the last-mile transaction
  const executeCallBack = async (token) => {
    // Implement execution logic here
    return {
      approvalTxHash: "0x123",
      executeTxHash: "0x123",
      amountOut: "123.45",
    };
  };

  return (
    <>
      <button onClick={onOpen}>Open</button>
      <AnyaltWidget
        swapResultToken={{
          symbol: "USDT",
          address: "0xFd086bC7CD5C481DCC9C85ebE478A1C0b69FCbb9",
          chainId: 42161,
          name: "USDT",
          chainType: ChainType.EVM,
          logoUrl: "https://example.com/static/logo-only.svg",
        }}
        finalToken={{
          symbol: "MYT",
          address: "0x123",
          chainId: 1,
          name: "MyToken",
          chainType: ChainType.EVM,
          logoUrl: "https://example.com/static/logo-only.svg",
        }}
        apiKey={"<YOUR_API_KEY>"}
        widgetTemplate={'DEPOSIT_TOKEN'}
        isOpen={isOpen}
        onClose={onClose}
        estimateCallback={estimateCallback}
        executeCallBack={executeCallBack}
        minDepositAmount={0}
      />
    </>
  );
};

export default Widget;
```

### How It Works

1. **Modal Control:**\
   The `useModal` hook supplies `isOpen`, `onOpen`, and `onClose` to control the display of the widget. A button or any trigger in your app can open the widget modal.
2. **Configuration Props:**
   * **`swapResultToken` and `finalToken`:** Define the tokens involved in the swap and final transaction.
   * **`widgetTemplate`:**  If value is **`TOKEN_BUY`** , then it is token purchase usecase. If you want to provide users to purchase your token, you can set your token information including logo url into **`swapResultToken`** props. In this case **`finalToken`** props is not required. Value is optional and by default it will use `DEPOSIT_TOKEN`.
   * **`apiKey`:** A required key for authentication or connecting to AnyAlt’s backend services.
   * **`minDepositAmount`:** Sets the minimum deposit amount needed to trigger a transaction.
3. **Callbacks:**
   * **`estimateCallback`:** Allows you to run custom logic (like querying exchange rates or fee estimations) before executing the final transaction.
   * **`executeCallBack`:** Executes your project-specific last-mile transaction and returns relevant transaction hashes and details.

By following these steps, you can integrate the AnyAlt Widget quickly, ensuring that your web3 project supports seamless cross-chain interactions with minimal effort.