⚛️
Leap Cosmos
  • Introduction
  • for dapps: Connect to Leap
    • Introduction
    • Optimizing Wallet Connectivity for Cosmos Dapps
    • Add Leap to existing Keplr integration
    • Add Leap to a new dapp
    • Suggest chain : Add Leap to a non-native chain
    • Add Leap to a Secret dapp
    • Wallet Connect
    • Wallet Adapters
      • Cosmos Kit
      • Shuttle
    • API Reference
  • for chains: integrate into Leap
    • Introduction
  • for SEI dapps: Connect to Compass
    • Connect to Compass
  • FOR SEI EVM DAPPS: CONNECT TO COMPASS
    • Connect to Compass
    • Supported RPC methods
  • Leap Metamask Snap
    • Introduction
    • Integrating Snaps
      • Metamask Cosmos Snap
      • Cosmos Snap Provider
      • Cosmos Kit
  • Embedded Wallet SDK
    • Embedded Wallet SDK React
    • Embedded Wallet Provider
    • Migration
    • Usage without UI
  • Elements
    • Introduction
    • Get Started
    • Integrate via CDN / Script Tag
    • Integrate as an Embed
    • Components
      • Aggregated Swaps
      • IBC Only Swaps
      • Fiat On-ramp
      • IBC Transfer
      • Multi View
    • Theming
      • Using CSS Variables
      • Advanced Customisations
    • Use Elements Without the UI
    • Tab Config
    • Using Skip API Key
  • Cosmos Nodes
    • Fallback Falooda : Node Fallback System
    • (Coming Soon) Blockchain Node Setup Guide
    • (Coming Soon) Monitoring Blockchain Node Performance
  • RESOURCES
    • Leap Assets
Powered by GitBook
On this page
  • Common customisations via props
  • Props
  1. Elements
  2. Components

IBC Only Swaps

Understand how to use the IBC Only Swaps components

PreviousAggregated SwapsNextFiat On-ramp

Last updated 8 months ago

Common customisations via props

Props

className (optional)

Add classes to customise the styling

title (optional)

Use to set the title of tab.

Default Value - "IBC 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: 'cosmoshub-4' },  // cosmos hub mainnet
    { chainId: 'noble-1' },      // noble mainnet
    { chainId: 'osmosis-1' }     // osmosis 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)

Restrict source chains and source assets
Restrict destination chains and destination assets
Set a default input amount, source or destination chain or asset
Get notified when input amount or any chain or assets is chosen change
Get notified when a transaction is signed, or a swap is completed