Mosaic Swap Widget

The Swap Widget bundles the whole swapping experience into a single React component that developers can easily embed in their app with a few lines of code.

Documentation:

See https://docs.mosaic.ag/swap-integration/swap-widget

Installation

Install the widgets library via npm ,pnpm or yarn.

yarn add @mosaicag/swap-widget

npm i --save @mosaicag/swap-widget

Usage

// import it in the root component in react, (ex: main.tsx/App.tsx)
import '@mosaicag/swap-widget/style.css' 

import SwapWidget from '@mosaicag/swap-widget'
<SwapWidget wallet={wallet} />

💡 Demo & Example code

Widget configs

import { Asset } from '@/constants/asset'
import { AnyRawTransaction, UserTransactionResponse } from '@aptos-labs/ts-sdk'
import {
  AptosSignAndSubmitTransactionInput,
  AptosSignAndSubmitTransactionOutput,
  AptosSignTransactionOutput,
  UserResponse,
} from '@aptos-labs/wallet-standard'
import { CSSProperties, ReactNode } from 'react'

export type WidgetProps = {
  /**
   * which chain to use, default mainnet 126
   */
  chainId: ChainId
  /**
   * wallet provider object, should have some mandatory field
   */
  wallet: WalletStandard
  /**
   * contact us to get a new one, https://docs.mosaic.ag/swap-integration/integration-partners#note-api-key-requirement
   */
  apiKey: string
  title?: {
    /**
     * default: Swap
     */
    title?: ReactNode
    /**
     * default: You are paying
     */
    input?: ReactNode
    /**
     * default: To Receive
     */
    output?: ReactNode
  }

  /**
   * use our default toast notification or not, set it to false if you want to use your own toast
   * default: true
   */
  notification?: boolean
  /**
   * default: 1
   */
  defaultInputAmount?: string
  /**
   * default slippage in bips, ex: if set to 50, it will be 0.5%
   */
  defaultSlippage?: number
  /**
   * list slippage options in settings UI, value should be in bips, default: [5, 10, 50, 100]
   */
  slippageOptions?: [number, number, number, number]
  /**
   * custom style
   */
  style?: WidgetStyle
  /**
   * custom theme colors
   */
  theme?: Theme
  /**
   * fa address (recommended) or coinType, ex: `0xe161897670a0ee5a0e3c79c3b894a0c46e4ba54c6d2ca32e285ab4b01eb74b66` or `0x275f508689de8756169d1ee02d889c777de1cebda3a7bbcce63ba8a27c563c6f::tokens::USDT`
   */
  defaultTokenInAddress?: string
  /**
   * same as defaultTokenInAddress
   */
  defaultTokenOutAddress?: string
  /**
   * custom threshold to show high or very high price impact, default: { high: 5, veryHigh: 10 }
   */
  priceImpactWarnings?: PriceImpactWarnings
  /**
   * show price impact warnings or not, default: true
   */
  showPriceImpactWarningsMsg?: boolean
  fee?: {
    /**
     * charge fee by src coin or not, default false
     */
    isFeeIn?: boolean
    /**
     * Fee in basis points
     */
    feeInBps: number
    /**
     * Fee receiver address
     */
    feeReceiver: string
  }
  /**
   * show powered by mosaic or not, default: true
   */
  poweredBy?: boolean
  /**
   *
   * callback when tx is submitted successfully
   */
  onTxSubmit?: (data: { hash: string; metadata: SwapMetadata }) => void
  /**
   *
   * callback when tx is submitted failed
   */
  onTxFail?: (data: { error: MosaicException; metadata: SwapMetadata }) => void
  /**
   *
   * callback when tx is confirmed successfully
   */
  onTxSuccess?: (data: { hash: string; receipt: UserTransactionResponse; metadata: SwapMetadata }) => void
  /**
   *
   * callback when click button connect wallet, show connect wallet modal in this function
   */
  onConnectButtonClick?: () => void
} & (LocalStateProps | GlobalStateProps)

export interface WalletStandard {
  account:
    | {
        address: string
        publicKey: Uint8Array
      }
    | undefined
  signAndSubmitTransaction(
    input: AptosSignAndSubmitTransactionInput,
  ): Promise<UserResponse<AptosSignAndSubmitTransactionOutput>>
  signTransaction(
    transaction: AnyRawTransaction,
    asFeePayer?: boolean,
  ): Promise<UserResponse<AptosSignTransactionOutput>>
}

export type Theme = {
  background?: string
  primary?: string
  secondary?: string
  error?: string
  secondaryBackground?: string
  baseContent?: string
  neutralContent?: string
  border?: string
}

type SelectFunc = (token: Asset) => void

type SelectState = {
  tokenIn: Asset | undefined
  tokenOut: Asset | undefined
  onChangeTokenIn: SelectFunc
  onChangeTokenOut: SelectFunc
  /**
   *
   * event when click switch token / arrow icon
   */
  onSwitchToken: (newTokenIn: Asset, newTokenOut: Asset) => void
}

type LocalStateProps = {
  /**
   *  use our local state or use your state
   *  if you set to false, you need to specify all: tokenIn, tokenOut, onChangeTokenIn, onChangeTokenOut, onSwitchToken
   *  if you set to true, sdk will use our local widget state
   *  default true
   */
  useLocalState?: true
} & Partial<SelectState>

type GlobalStateProps = {
  useLocalState: false
} & SelectState

export type WidgetStyle = {
  /**
   * outer div
   */
  wrapper?: CSSProperties
  /**
   * inner div
   */
  container?: CSSProperties
  inputGroup?: CSSProperties
  outputGroup?: CSSProperties
  /**
   * panel in the bottom
   */
  swapDetail?: CSSProperties
  settings?: CSSProperties
  arrowIcon?: CSSProperties
  selectTokenModal?: CSSProperties
  /**
   * swap button
   */
  ctaButton?: CSSProperties
}

export type PriceImpactWarnings = {
  high: number
  veryHigh: number
}

export type SwapMetadata = { amountIn: string; amountOut: string; tokenIn: Asset; tokenOut: Asset }