Getting Started

The Intents Swap Widget lets you integrate a fully functional, cross-chain swap interface into your application in just a few lines of code.

1. Installation

Install the widget package using your preferred package manager:

npm install @aurora-is-near/intents-swap-widget

# or

yarn add @aurora-is-near/intents-swap-widget

2. Setup

Wrap your app, or just the area where the widget appears, with the WidgetConfigProvider, then render one of our prebuilt widgets within it.

For example, the snippet below shows how to render the swap widget.

import {
  WidgetConfigProvider,
  Widget,
} from '@aurora-is-near/intents-swap-widget';

export default function App() {
  return (
    <WidgetConfigProvider config={{ appName: 'MyApp' }}>
      <Widget />
    </WidgetConfigProvider>
  );
}

There are also WidgetTransfer and WidgetWithdraw widgets.

For a full list of configuration options see the Configuration page.

3. Styling

To apply the package styles you need to import the package styles into your apps stylesheet, for example:

@import '@aurora-is-near/intents-swap-widget/styles.css';

.my-class {
  background-color: #fff;
}

For more details about the available theming options see the Theming page.

4. Connect a wallet

Use your existing wallet integration (e.g. AppKit, Provy, TonConnect, etc.) and pass the connected address via the connectedWallets config option.

Here is an example that assumes you are using AppKit and have a hook for providing the wallet address and a button for connecting.

import {
  WidgetConfigProvider,
  Widget,
} from '@aurora-is-near/intents-swap-widget';
import { useAppKitWallet } from './hooks/useAppKitWallet';
import { WalletConnectButton } from './components/WalletConnectButton';

export const SimpleWidgetDemo = () => {
  const { address: walletAddress, isConnecting: isLoading } = useAppKitWallet();

  return (
    <WidgetConfigProvider
      config={{ connectedWallets: { default: walletAddress } }}
    >
      <Widget
        isFullPage
        isLoading={isLoading}
        FooterComponent={<WalletConnectButton />}
      />
    </WidgetConfigProvider>
  );
};