🅰️Aggregator Components

Swap Panel

Provides a complete Swap transaction process, including pair selection, intelligent routing, constructing transactions, submitting transactions, and displaying transaction results.

Usage

---

1

Import the component

import { SwapPanelClient } from 'navi-web-component'

2

Instantiating Component

const swapPanelClient = SwapPanelClient.getInstance()

The component uses the singleton pattern, so multiple calls to getInstance return the same instance.

3

Register the onSignTransaction method for transaction signing.

The user executing swap needs the wallet to sign the transaction. the DApp needs to register a callback function to implement the wallet signing logic.

swapPanelClient.onSignTransaction = async (txb) => {
  // run sign transaction logic in your app
  // after signed, return the signature and bytes
  const resp = await signTransaction({
    transaction: txb,
  })
  return {
    signature: resp.signature,
    bytes: resp.bytes,
  }
}

4

Listen connect event

If the user uses the Swap component within the DApp without connecting to the wallet, the component displays a button to connect to the wallet. Clicking on the button by the user triggers the connect event, which the DApp needs to listen to and enter the wallet connection flow.

swapPanelClient.events.on('clickConnect', () => {
  // run connect wallet logic in your app
  // after connected, set user address in swap panel
  swapPanelClient.setUserAddress('0x1234567890123456789012345678901234567890')
})

5

Sync user address

DApp needs to pass the address of the currently connected wallet to the component.

// wallet connected
swapPanelClient.setUserAddress('0x1234567890123456789012345678901234567890')
// wallet disconnected
swapPanelClient.setUserAddress('')

6

Calling the methods of instance

Methods

---

show()

Displays the swap panel.

swapPanelClient.show()

hide()

Hides the swap panel.

swapPanelClient.hide()

setTokenFrom(coinType: string): Promise<boolean>

Sets the token to swap from.

swapPanelClient.setTokenFrom('0xa99b8952d4f7d947ea77fe0ecdcc9e5fc0bcab2841d6e2a5aa00c3044e5544b5::navx::NAVX')

setTokenTo(coinType: string): Promise<boolean>

Sets the token to swap to.

swapPanelClient.setTokenTo('0x02::sui::SUI')

setTokenFromAmount(amount: string): Promise<boolean>

Sets the amount for the token to swap from.

swapPanelClient.setTokenFromAmount('1000')

changeTheme(theme: 'dark' | 'light'): Promise<boolean>

Sets the UI theme.

swapPanelClient.changeTheme('dark')
swapPanelClient.changeTheme('light')

Events

Use the events property to listen for specific swap panel events.

---

Event name	Description
ready	trigger when swap panel is ready
clickConnect	trigger when connect button is clicked.
swapSuccess	trigger when swap success
show	trigger when swap panel show
hide	trigger when swap panel hide

swapPanelClient.events.on(eventName, callback)