# 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)
```