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 want to put the Swaps component inside a modal, we also ship SwapsModal component that you can directly use without worrying about managing state and handling any edge-cases.

Usage

import {
  Swaps,
  type SwapsProps,
  WalletClientContextProvider
} from '@leapwallet/elements'
import { useElementsWalletConfig } from './use-elements-wallet-config'

import '@leapwallet/elements/styles.css'

const YourDapp = () => {
  const walletClientConfig = useElementsWalletConfig()

  return (
    <div className="leap-ui">
      <WalletClientContextProvider value={walletClientConfig}>
        <Swaps />
      </WalletClientContextProvider>
    </div>
  )
}

Props

className (optional)

Add classes to customise the styling

title (optional)

Use to set the title of tab.

Default Value - "Swaps"

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)