Aggregated Swaps

Understand how to use the Swaps components

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

Common customisations via props

1. Restrict source chains and source assets

2. Restrict destination chains and destination assets

3. Set a default input amount, source or destination chain or asset

4. Get notified when input amount or any chain or assets is chosen change

5. Get notified when a transaction is signed, or a swap is completed

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)

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

• 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.

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.

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

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