# Aggregator Components

## Swap Panel

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

### Usage <a href="#usage" id="usage"></a>

***

{% stepper %}
{% step %}
Import the component

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

{% endstep %}

{% step %}
Instantiating Component

```typescript
const swapPanelClient = SwapPanelClient.getInstance()
```

{% hint style="info" %}
The component uses the singleton pattern, so multiple calls to getInstance return the same instance.
{% endhint %}
{% endstep %}

{% step %}
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.

```typescript
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,
  }
}
```

{% endstep %}

{% step %}
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.

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

{% endstep %}

{% step %}
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('')
```

{% endstep %}

{% step %}
Calling the methods of instance

{% endstep %}
{% endstepper %}

### Methods

***

#### show()

Displays the swap panel.

```typescript
swapPanelClient.show()
```

#### hide()

Hides the swap panel.

```typescript
swapPanelClient.hide()
```

#### setTokenFrom(coinType: string): Promise\<boolean>

Sets the token to swap from.

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

#### setTokenTo(coinType: string): Promise\<boolean>

Sets the token to swap to.

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

#### setTokenFromAmount(amount: string): Promise\<boolean>

Sets the amount for the token to swap from.

```typescript
swapPanelClient.setTokenFromAmount('1000')
```

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

Sets the UI theme.

```typescript
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            |

```typescript
swapPanelClient.events.on(eventName, callback)
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://naviprotocol.gitbook.io/astros/astros-dex-aggregator/images-and-media/aggregator-components.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.