Intents Swap Widget

Swap Widget frontend that uses 1Click API.

Usage

Widgets

This package exports a number of pre-built widget components, Widget, WidgetSwap, WidgetDeposit and WidgetWithdraw.

See the /apps folder for some examples of how to use these widgets.

Custom implementation

If your use cases cannot be met using the pre-built widgets described above you have the option to roll your own, using the components and hooks exposed by this package.

For this purpose, the package structure is as follows:

Components

import { Button } from '@aurora-is-near/intents-swap-widget/component'

Components submodule exports low-level, stateless components such as buttons, inputs, and banners. These components are not connected to the widget's logic and can be considered part of an internal UI kit.

Features

import { SwapQuote } from '@aurora-is-near/intents-swap-widget/features'

Features submodule exports rich components that use the widget's context to operate.

Hooks

import { useTokens } from '@aurora-is-near/intents-swap-widget/hooks'

The Hooks submodule is similar to Features but without the representational (UI) part. Most hooks use the widget's context, but not necessarily all of them.

Machine

import { useSafeSnapshot } from '@aurora-is-near/intents-swap-widget/machine'

Machine submodule defines the finite state machine and context store. It is the heart of the business logic and, together with the Hooks, can be used to build your own UI without relying on the provided Features and Components.

Types

import type { Token } from '@aurora-is-near/intents-swap-widget/types'

Types submodule exports domain types such as Token, Chain, Quote etc.

Ext

import { useAlchemyBalanceIntegration } from '@aurora-is-near/intents-swap-widget/ext'

Ext submodule contains various extensions that can be used with the widget but are completely optional. For example, it includes an Alchemy API integration that allows you to easily get token balances. Essentially, these are pre-written pieces of custom code.

Development

If you want to make changes to the package and submit PRs, the repository includes a demo application that includes various example widget implementations. Run it with:

yarn dev

You can also link the @aurora-is-near/intents-swap-widget package to your application locally, allowing you to make changes to the package and see the results in your app:

# in this repo
cd packages/intents-swap-widget
yarn link
yarn build:watch

# in your app
yarn link @aurora-is-near/intents-swap-widget
yarn dev

Contribution

We use semantic release with commitlint. While creating a PR make sure it's title meets the requirements as well as commit messages.