IBC Only Swaps

Understand how to use the IBC Only Swaps components

IBCSwaps

import {
  ElementsProvider,
  IBCSwaps,
  WalletType
} from '@leapwallet/elements'
import '@leapwallet/elements/styles.css'

const YourDapp = () => {
  // trigger the dApp's connect wallet flow
  const connectWallet = () => {}
  
  // set this to the currently connected wallet
  const connectedWalletType = WalletType.LEAP

  return (
    <div className="leap-ui">
      <ElementsProvider
        connectWallet={connectWallet}
        connectedWalletType={connectedWalletType}
      >
        <IBCSwaps />
      </ElementsProvider>
    </div>
  )
}

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)