IBC Transfer

Understand how to use the IBC Transfer components

Common customisations via props

1. Restrict source chains and source assets

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

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

4. Get notified when a transaction is signed, or a transfer is completed

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're sending"

destinationHeader(optional)

Use to set custom text for destination section header

Default Value - "To"

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

• inputAmount: input amount of swap in string

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
]

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

• inputAmount: input amount of swap in string