> For the complete documentation index, see [llms.txt](https://docs.leapwallet.io/cosmos/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.leapwallet.io/cosmos/elements/components/aggregated-swaps.md).

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