Axo partner widgets

Axo Swaps

!Screenshot

Basket Buy

!Screenshot

$3

``console
npm i @axotrade/swaps @emurgo/cardano-serialization-lib-browser@11.5.0
`

Make sure that your that your build config supports importing WASM modules.

- webpack

$3

`js
import @axotrade/swaps/dist/style.css';
``

$3

#### Integrating in Create React App (or similar client only config) - Axo Swaps

`typescript
import { AxoSwaps, SwapConfig } from '@axotrade/swaps'

const config: SwapConfig = {
left={"" | "" | ""}
right={"" | "" | ""}
network={"mainnet" | "preprod"}
partnerKey=""
walletName={"" | undefined}
onClickWalletConnect={() => console.log('Wallet connect button clicked')}
}

const App = () =>
`

#### Integrating in Create React App (or similar client only config) - Basket buy

`typescript
import { AxoBasket, BasketBuyConfig } from '@axotrade/swaps'

const config: BasketBuyConfig = {
payload=""
hostApiKey=""
hostBaseApiURL=""
network={"mainnet" | "preprod"}
partnerKey=""
walletName={"" | undefined}
onClickWalletConnect={() => console.log('Wallet connect button clicked')}
}

const App = () =>
`

#### Integrating in NextJS - Axo Swaps

`typescript
'use client';
import dynamic from "next/dynamic"
import type { SwapConfig } from '@axotrade/swaps'

const AxoSwaps = dynamic(
() => import('@axotrade/swaps').then((module) => module.AxoSwaps),
{ ssr: false },
);

const config: SwapConfig = {
left={"" | "" | ""}
right={"" | "" | ""}
network={"mainnet" | "preprod"}
partnerKey=""
walletName={"" | undefined}
onClickWalletConnect={() => console.log('Wallet connect button clicked')}
}

const App = () =>
`

#### Integrating in NextJS - Basket Buy

`typescript
'use client';
import dynamic from "next/dynamic"
import type { BasketBuyConfig } from '@axotrade/swaps'

const AxoBasket = dynamic(
() => import('@axotrade/swaps').then((module) => module.AxoBasket),
{ ssr: false },
);

const config: BasketBuyConfig = {
payload=""
hostApiKey=""
hostBaseApiURL=""
network={"mainnet" | "preprod"}
partnerKey=""
walletName={"" | undefined}
onClickWalletConnect={() => console.log('Wallet connect button clicked')}
}

const App = () =>
`

$3

| Name | Required | Type | Default | Description |
| -------------------- | ------------ | ---------------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| left | true | string | - | The left asset to use for the swap. Can be a subject, policy ID or ticker. |
| right | true | string | - | The right asset to use for the swap. Can be a subject, policy ID or ticker. |
| network | true | 'mainnet' \| 'preprod' | - | The network to use for the swap. Use 'mainnet' for Cardano Mainnet, 'preprod' for Cardano pre-prod. |
| partnerKey | true | string | - | The partner key to use for the swap. |
| walletName | false | WalletName | - | The name of the connected wallet. Supported values: eternl, nami, flint, yoroi, typhoncip30, nufi and gerowallet. If no wallet connected, pass undefined. |
| onClickWalletConnect | false | VoidFunction | - | A function to call when the wallet connect button is clicked. |

$3

| Name | Required | Type | Default | Description |
| -------------------- | ------------ | ---------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| payload | false | PayloadEntry[] | - | Subjects, tickers (asset_name) and weights provided by host to use instead of the host's api. When hostApiKey, hostBaseApiURL and payload are provided, the payload will take precedence |
| hostApiKey | false | string | - | The host api key to use for the host's api (needs to be used in conjunction with hostBaseApiURL) |
| hostBaseApiURL | false | string | - | The host base api url to connect to host's api to query the payload, example: https://api.host-domain.com/v1 (needs to be used in conjunction with hostApiKey) |
| network | true | 'mainnet' \| 'preprod' | - | The network to use for the swap. Use 'mainnet' for Cardano Mainnet, 'preprod' for Cardano pre-prod. |
| partnerKey | true | string | - | The partner key to use for the swap. |
| walletName | false | WalletName | - | The name of the connected wallet. Supported values: eternl, nami, flint, yoroi, typhoncip30, nufi and gerowallet. If no wallet connected, pass undefined. |
| onClickWalletConnect | false | VoidFunction | - | A function to call when the wallet connect jtton is clicked. |

`typescript
const type PayloadEntry = {
asset_name: string;
subject: string | undefined;
weight: number;
}
`

#### Pre-prod network configuration (applicable to all widgets)

When using preprod`, the component will use the Cardano Pre-prod network and the Axo preview environment.

This configuration is meant for testing your integration with Axo.

Prices and order book information will be sourced from Axo preview.
The component will use tokens distributed from the preview faucet. If necessary, more tokens can be purchased with tADA in the application.

Demo

$3

- Axo Swaps: https://app.axo-preview.trade/dev/partner-integration/axo-swaps
- Basket Buy: https://app.axo-preview.trade/dev/partner-integration/basket-buy

$3

- Axo Swaps: https://app.axo.trade/dev/partner-integration