Getting Started

AnyAlt Widget requires an API key.

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

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

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

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:

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:

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
        inputToken={{
          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:

   • inputToken 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 inputToken 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.