# Aggregated Swaps

`Swaps` component allows users to swap tokens from EVM to Cosmos Chains and also in between the Cosmos Chains.

If you'd like to customise `Swaps` using a webapp, check out [https://leap-elements.web.app](https://leap-elements.web.app/)

<div align="left"><figure><img src="/files/Oi5B26KuGgibnIRPmLdy" alt="" width="375"><figcaption></figcaption></figure></div>

### Common customisations via props

1. [Restrict source chains and source assets](#allowedsourcechains-optional)
2. [Restrict destination chains and destination assets](#alloweddestinationchains-optional)
3. [Set a default input amount, source or destination chain or asset](#defaultvalues-optional)
4. [Get notified when input amount or any chain or assets is chosen change](#onvalueschange-optional)
5. [Get notified when a transaction is signed, or a swap is completed](#txnlifecyclehooks-optional)

### Props

#### `className` (optional)

Add classes to customise the styling

#### `title` (optional)

Use to set the title of tab.

Default Value - `"Swaps"`

#### `sourceHeader`(optional)

Use to set custom text for source section header

Default Value - `"You pay"`

#### `destinationHeader`(optional)

Use to set custom text for destination section header

Default Value - `"You get"`

#### `hideNoRouteAssets` (optional)&#x20;

Use to toggle visibility for asset which doesn't support any route

Default Value - `"true"`

#### `showPoweredByBanner` (optional)

This is a boolean which toggles the visibility for the powered by text for the tab - `Powered by Leap and Skip`

Default Value - `false`

#### `defaultValues` (optional)

This is an object that contains the default values for the tab

* `sourceChainId`: chainId of the source chain&#x20;
* `sourceAsset`: denom of source asset
* `destinationChainId`: chainId of the destination chain
* `destinationAsset`: denom of destination asset
* `inputAmount`: input amount of swap in string

#### `defaultSettings` (optional)

This is an object that contains the default settings for the tab

* `slippage`: max slippage percentage allowed for the swap

#### `allowedSourceChains` (optional)

Pass in an array of objects with a `chainId` property set to the chains you want to display on the source side.

```javascript
const allowedSourceChains = [
    { chainId: '1' },            // ethereum mainnet
    { chainId: '137' },          // polygon mainnet
    { chainId: 'cosmoshub-4' },  // cosmos hub mainnet
]
```

#### `allowedDestinationChains` (optional)

Pass in an array of objects with a `chainId` property set to the chains you want to display on the source side. You can also restrict the `denominations` for each chain.

```javascript
const allowedDestinationChains = [
    {
        chainId: 'cosmoshub-4',  // cosmos hub mainnet
        assetDenoms: [           // optional
            'uatom',
            'ibc/9A234CF0...',
            // and so on...
        ]
    },
]
```

#### `txnLifecycleHooks` (optional)

This is an object that contains the callbacks for transaction lifecycle

* `onTxnSignInit` - callback fired when a transaction signing request is initiated
* `onTxnSignApproved` - callback fired when a transaction signing request is approved and the transaction has been accepted on chain
* `onTxnSignFailed` - callback fired when a transaction signing request is rejected from wallet
* `onTxnComplete` - callback fired when a swap completes
* `onTxnInProgress` - callback fired when a transaction is initiated, you can return a cleanup callback that fires when the transaction has been accepted on chain

#### `onValuesChange` (optional)

This a callback which is fired when following values are changed for a swap

* `sourceChainId`: chainId of the source chain&#x20;
* `sourceAsset`: denomination of source asset
* `destinationChainId`: chainId of the destination chain
* `destinationAsset`: denomination of destination asset
* `inputAmount`: input amount of swap in string

#### `onSettingsChange` (optional)

This a callback which is fired when swap settings are changed (i.e slippage)


---

# 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://docs.leapwallet.io/cosmos/elements/components/aggregated-swaps.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.