@axotrade/swaps NPM

Axo partner widgets

Axo Swaps

Screenshot

Basket Buy

Screenshot

Installing the package and peer dependecies (applicable to all widgets)

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

Importing styles (applicable to all widgets)

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

Integration

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

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

const config: SwapConfig = {
    left={"<asset-subject>" | "<asset-ticker>" | "<asset-policy-id>"}
    right={"<asset-subject>" | "<asset-ticker>" | "<asset-policy-id>"}
    network={"mainnet" | "preprod"}
    partnerKey="<api-key>"
    walletName={"<wallet-name>" | undefined}
    onClickWalletConnect={() => console.log('Wallet connect button clicked')}
}

const App = () => <AxoSwaps {...config} />

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

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

const config: BasketBuyConfig = {
    payload="<basket-buy-payload>"
    hostApiKey="<host-api-key>"
    hostBaseApiURL="<host-base-api-url>"
    network={"mainnet" | "preprod"}
    partnerKey="<api-key>"
    walletName={"<wallet-name>" | undefined}
    onClickWalletConnect={() => console.log('Wallet connect button clicked')}
}

const App = () => <AxoBasket {...config} />

Integrating in NextJS - Axo Swaps

'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={"<asset-subject>" | "<asset-ticker>" | "<asset-policy-id>"}
    right={"<asset-subject>" | "<asset-ticker>" | "<asset-policy-id>"}
    network={"mainnet" | "preprod"}
    partnerKey="<api-key>"
    walletName={"<wallet-name>" | undefined}
    onClickWalletConnect={() => console.log('Wallet connect button clicked')}
}

const App = () => <AxoSwaps {...config} />

Integrating in NextJS - Basket Buy

'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="<basket-buy-payload>"
    hostApiKey="<host-api-key>"
    hostBaseApiURL="<host-base-api-url>"
    network={"mainnet" | "preprod"}
    partnerKey="<api-key>"
    walletName={"<wallet-name>" | undefined}
    onClickWalletConnect={() => console.log('Wallet connect button clicked')}
}

const App = () => <AxoBasket {...config} />

Configuration - Axo Swaps

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.

Configuration - Basket buy

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.

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.